Calendars

The template includes a set of 4 calendar sizes, and a fluid calendar style, all of which are responsive. All sizes allow displaying a list of event for each day, even in smaller sizes.

Markup

The markup is the same for all calendars sizes:

<table class="calendar">

	<!-- Month and scroll arrows -->
	<caption>
		<a href="#" class="cal-prev">◄</a>
		<a href="#" class="cal-next">►</a>
		March 2012
	</caption>

	<!-- Days names -->
	<thead>
		<tr>
			<th scope="col">Sun</th>
			<th scope="col">Mon</th>
			<th scope="col">Tue</th>
			<th scope="col">Wed</th>
			<th scope="col">Thu</th>
			<th scope="col">Fri</th>
			<th scope="col">Sat</th>
		</tr>
	</thead>

	<!-- Dates -->
	<tbody>
		<tr>
			<td class="week-end prev-month"><span class="cal-day">30</span></td>
			<td><span class="cal-day">1</span></td>
			<td><span class="cal-day">2</span></td>
			<td><span class="cal-day">3</span></td>
			<td><span class="cal-day">4</span></td>
			<td><span class="cal-day">5</span></td>
			<td class="week-end"><span class="cal-day">6</span></td>
		</tr>
		...
	</tbody>
	<!-- End dates -->

</table>

Scroll arrows

To show disabled next/previous arrows, you may either use a span or add the class disabled:

<!-- Using a span element -->
<span class="cal-prev">◄</span>

<!-- Using the class disabled -->
<a href="#" class="cal-prev disabled">◄</a>

Days

The calendar days require the date to be wrapped in a span with the class day-cal:

<td><span class="cal-day">1</span></td>

The cells may take several classes to style them when required:

prev-month

Day from the previous month

next-month

Day from the next month

week-end

Different background for week-end days

today

The current date will be highlighted

selected

An alternative highlight style, for any use

Sizes

The default size is the small one, the template provides 3 additional sizes, which become available as the media queries are fired. To use any bigger size, use one of these classes on table:

medium

Loaded in mobile-landscape

large

Loaded in tablet-portrait

largest

Loaded in tablet-landscape

<!-- Example for medium size -->
<table class="calendar medium">

When the requested size is not available, the previous size is used - for instance, a calendar with the class large will show as medium on a mobile screen, hence it will always fit in.

Days events

To enable day events, you must add the class with-events to the calendar:

<table class="calendar with-events">

This is not required for fluid calendars (see below).

The markup for a date with events:

<td>
	<span class="cal-day">24</span>
	<ul class="cal-events">
		<!-- Default event style -->
		<li>Event description</li>
		<!-- Red event style -->
		<li class="important">Event description</li>
	</ul>
</td>

On smaller calendars, these events will show as dots, and when the user clicks on a date an extra block is added to display the complete list. On larger calendars, the list is fully displayed.

2 classes are available to style the events as is they were spreading to another column:

to-previous-day

The event will touch left column side

to-next-day

The event will touch right column side

Both styles can be used on a single event. In the example below, the event will look like it spreads over 3 columns:

<td>
	<span class="cal-day">1</span>
	<ul class="cal-events">
		<li class="to-next-day">Event description</li>
	</ul>
</td>
<td>
	<span class="cal-day">2</span>
	<ul class="cal-events">
		<li class="to-previous-day to-next-day">Event description</li>
	</ul>
</td>
<td>
	<span class="cal-day">3</span>
	<ul class="cal-events">
		<li class="to-previous-day">Event description</li>
	</ul>
</td>

Fluid calendar

If you want your calendar to fit all available space, the template provides a fluid calendar size, enhanced by a javascript plugin. To use it, just add the class fluid to your calendar (remove any other size class):

<table class="calendar fluid">

This style will automaticaly fill all available width, switching between the various size styles to get the best look and accessibility. This is useful also when the calendar is used in a column.

Fluid calendars will work without the JS plugin most of the time, but in the overall they will look better with it and in some cases the plugin will make some style changes the CSS only can't handle.

It will also scale cells height to preserve aspect ratio, but it is possible to set a height limit for bigger screens:

<!-- Set a max height of 100px for cells -->
<table class="calendar fluid" data-calendar-options='{"maxHeight":100}'>

Methods

$(selector).fluidCalendar(options)

Enable calendar scrolling

Parameters

@param object options - optional (see defaults for a complete list)

$(selector).fluidCalendarRefresh()

Refresh fluid calendar size. This is useful is the calendar content has been changed.

Options reference

maxHeight

Maximum cell height (used for width screens to limit the calendar vertical expansion)
Type: int
Default: 130

onSizeChange

Callback on each calendar resize event
Type: function
Default: null