Calendar

The Calendar template displays a calendar grid of days for a given month or week, with days on which events take place highlighted. Selecting a highlighted day displays information about the events that occur on that day.

Page Title and Content

An article using the Calendar template displays its page title and content as per the Default template. This includes standard related assets and inline content.

Calendar Control

When a page using the Calendar template first loads, the calendar grid displays the start month or week set in the article extras. Left and right arrows either side of the current month allow a user to scroll through the months of the year or weeks of the month, within the limits also set in the article extras.

Calendar Body

The calendar body is a grid view of the days in the selected month or week. Each column in the grid is labelled with a day of the week. Saturday and Sunday are highlighted with an alternate colour to the other days of the week. Today's date is also highlighted. The first day of the week, set in the article extras, will appear as the heading of the leftmost column.

Scheduled Event Days

Days on which events are scheduled to take place are marked with a triangle. Clicking on a day that has scheduled events reveals those events. Clicking again on a selected day closes the event list.

The calendar includes controls that allow an administrator to automatically hide any events that are fully booked, excluding them from the calendar (see below).

Event List View

When a user clicks on a day on which events are occurring, the calendar switches to its event list view.

In this view the events of the selected day appear in a list beneath the week that includes that day. Events display their heading, which acts as a link to the event, introductory text and image (if present). The details of the event occurrences are listed using the standard list described in Event List Format.

Setting Up the Calendar Body

These settings are found in the article extras of the calendar article.

Display

Pick either a full month of days, or a single row representing a week.

Week Starts On

Select the day of the week on which the week starts. This day will appear in the left-most column of the calendar.

Start At

Choose which month is displayed when the page first loads. By default the calendar will display the current week or month, but you can uncheck the box and pick a different display start date.

Only Show Current/Future Events and Start Date

If checked the calendar will not scroll backwards to dates prior to the current month. If unchecked the calendar can be scrolled backwards to the date entered into the start date field.

Rolling End Date

You can choose whether the calendar will scroll forwards to a fixed end date, or to a rolling number of days into the future.

For example, if a monthly calendar had a rolling end date of 14 days, on the 1st of March you would see events up until the 14th with the 15th-31st empty. It would not be possible to scroll the calendar forwards into April. On the 28th of March you would see events through to the 10th of April with the rest of April empty.

Configuring the Events

These settings control which events appear in the calendar. 

Related Events

If "include related events" is checked, event articles which are related to the calendar appear in the event lists of each day. If unchecked, related event articles will appear in the standard related article block alongside non-event articles.

Child Events

If "include child events" is checked, child event articles of the calendar will appear in the event lists of each day.

Metadata Events

If "include events with common metadata" is checked, the event lists of each day will display event articles that have metadata values in common with the calendar article.

Exclude Full Events

If this box is checked, event instances that are fully booked will be hidden from the calendar. Events with multiple instances on the same day will only show instances that have availability. Events with only a single instance on a day, or events with multiple instances on a day that are all fully booked, will be hidden entirely.

Locations

As well as selecting the types of event that appear on the calendar, you can use this field to only display events at certain locations. Note that this filters the events that would otherwise appear, it doesn't display events at the chosen locations.

Responsive Behaviour

At narrow widths the calendar switches to a responsive layout.

Calendar Control

The calendar control behaves as it does at full width, with the current month and navigational arrows.

Day Entries

Beneath the calendar control the days of the month appear in a single column. Each row displays the date and day of the week. Weekends, current date and scheduled event days have the same highlighting as at full width. Selecting a day on which an event is scheduled to take place switches the calendar to its responsive event list view.

Responsive Event List View

When a user clicks on a day on which events take place, the calendar switches to its event list view.

In this view the calendar will split, with the events of the selected day appearing in a list beneath it. Events in this list display as they do at full width.

Clicking on the selected day will close the event list, returning the calendar to the single column view.

Article Extras