Styleguide notes


Calendar


Usage

The inline calendar component is used to highlight the days on which events occur.


Interaction

Today's date is always indicated.

A day can have either highlighted or non-highlighted state to indicate on which days events are occurring.

The user can click on a highlighted day or the main URL to access more detailed events pages.


CSS and media queries

The Calendar table styles have been heavily reduced from the original CSS supplied by the library.

Media queries are used to reduce the font size of the calendar in several stages to ensure the full numbering is visible even at the smallest column size.


Use of Javascript

The calendar requires the inclusion of the Zebra_datepicker Javascript library. This is based heavily on the Zebra_datepicker calendar.

The Javascript library has been augmented to allow clickable event dates. The Javascript takes the links marked as highlighted-dates from the markup and inserts the links into the calendar during rendering.

Users without Javascript will see the links to the highlighted-dates only without a calendar view.

The calendar component currently only supports one calendar per page.


Component variants

N/a