<div class="agenda"> <!-- Time markers --> <ul class="agenda-time"> <li class="from-7 to-8"><span>7 AM</span></li> <li class="from-8 to-9"><span>8 AM</span></li> <li class="from-9 to-10"><span>9 AM</span></li> <li class="from-10 to-11"><span>10 AM</span></li> <li class="from-11 to-12"><span>11 AM</span></li> <li class="from-12 to-13"><span>12 AM</span></li> <li class="from-13 to-14"><span>1 PM</span></li> <li class="from-14 to-15"><span>2 PM</span></li> <li class="from-15 to-16"><span>3 PM</span></li> <li class="from-16 to-17"><span>4 PM</span></li> <li class="from-17 to-18"><span>5 PM</span></li> <li class="from-18 to-19"><span>6 PM</span></li> <li class="from-19 to-20"><span>7 PM</span></li> <li class="at-20"><span>8 PM</span></li> </ul> <!-- Events list --> <div class="agenda-events"> <!-- Events go here --> </div> </div>
Agenda markup is fluid in width but also in height: just set a height to resize it:
<div class="agenda" style="height:200px"> ... </div>
<!-- The class with-header is required to use the header style --> <div class="agenda with-header"> <ul class="agenda-time"> ... <!-- Colored time line --> <li class="from-11 to-12"><span class="blue">11 AM</span></li> ... </ul> <div class="agenda-header"> <!-- Previous arrow --> <a href="#" title="Previous day" class="agenda-previous"><span class="icon-left-round"></span></a> <!-- Next arrow, disabled --> <a href="#" title="Next day" class="agenda-next disabled"><span class="icon-right-round"></span></a> <!-- Title --> Monday </div> <div class="agenda-events"> <!-- Striped zone --> <div class="dark-stripes from-12 to-14"></div> <!-- Current time line --> <div class="agenda-now" style="top:63.75%"><span>03:23</span></div> </div> </div>
The agenda style provides an easy way to set events and time lines positions, using a set of predefined classes:
Use the classes from-7, from-7-30, from-8, from-8-30... and so on to from-20.
Use the classes to-7, to-7-30, to-8, to-8-30... and so on to to-20.
For ponctual elements (such as lines), use the classes at-7, at-7-30, at-8, at-8-30... and so on to at-20.
For events starting or ending out of the time range, use the classes from-before and to-after.
The default time range goes from 7:00 to 20:00. To change this, edit the time positioning classes as follow:
Do the same but in reverse for the to-* values, start from 100, then decrease.
<!-- Event with link --> <a href="#" class="agenda-event from-7 to-12"> <time>7 AM - 12 AM</time> Event description </a> <!-- Static event, custom color --> <span class="agenda-event from-15 to-20 anthracite-gradient"> <time>3 PM - 8 PM</time> Event description </span>
<!-- Left event --> <span class="agenda-event from-8 to-14-30 event-1-on-2"> <time>8 AM - 2:30 AM</time> Event description </span> <!-- Right event --> <span class="agenda-event from-12 to-19 event-2-on-2"> <time>12 AM - 7 PM</time> Event description </span>
<!-- Left event --> <span class="agenda-event from-8 to-13-30 event-1-on-3"> <time>8 AM - 1:30 PM</time> Event description </span> <!-- Middle event --> <span class="agenda-event from-10-30 to-17-30 event-2-on-3"> <time>10:30 AM - 5:30 PM</time> Event description </span> <!-- Right event --> <span class="agenda-event from-14 to-19-30 event-3-on-3"> <time>2 PM - 7:30 PM</time> Event description </span>
The background markup for multi-columns agendas is the same, but with multiple agenda-events blocks in a agenda-wrapper wrapper:
<div class="agenda with-header"> <!-- Time markers --> <ul class="agenda-time"> ... </ul> <!-- Columns wrapper --> <div class="agenda-wrapper"> <!-- Events lists --> <div class="agenda-events agenda-day1">...</div> <div class="agenda-events agenda-day2">...</div> <div class="agenda-events agenda-day3">...</div> <div class="agenda-events agenda-day4">...</div> <div class="agenda-events agenda-day5">...</div> <div class="agenda-events agenda-day6">...</div> <div class="agenda-events agenda-day7">...</div> </div> </div>
By default, the multi-column agenda has 7 columns, if you need a different number you may create a special class - for instance if you need 4 columns:
/* Special class to use 4 columns: .agenda-4-cols */
.agenda-4-cols > .agenda-day1 { left: 0; right: 75%; }
.agenda-4-cols > .agenda-day2 { left: 25%; right: 50%; }
.agenda-4-cols > .agenda-day3 { left: 50%; right: 25%; }
.agenda-4-cols > .agenda-day4 { left: 75%; right: 0; }
The just add this new class to the wrapper block, and you are done!
Multi-columns agenda look good on wide screens, but are impossible to read on smaller screen. Therefore, the template includes an auto-scroll plugin, which will detect the available width and display the right number of columns to preserve readability. On smaller screens, there will be only one column visible at the time, for instance. The plugin also takes care of adding scroll arrows, and provides methods to scroll columns by code.
Here is an example: the agenda contains a full week, try resizing the window to see how the columns are hidden/shown by the plugin to match available space:
To use it, just add the class auto-scroll to your agenda:
<div class="agenda with-header auto-scroll"> ... </div>
It is also possible to define manually the number of visible columns, whatever the available space. For instance, to show only one column:
This example uses some of the options detailled below:
<div class="agenda with-header auto-scroll" data-agenda-options='{"auto":false,"first":1}'>
...
</div>
Enable agenda scrolling
@param object options - optional (see defaults for a complete list)
Set the first visible column
@param int|string|jQuery firstCol either an index (starting from 0), an CSS selector or a jQuery object
@param boolean|null animate true to animate the movement, false to disable animation, null to use settings value (optional, default: null)
Scroll an agenda to previous column
Scroll an agenda to next column