Create a training events page using calendar assets

The following example will create a calendar page on your web site to display several training events. Each group of events will be displayed in a different color depending on the location. Users will be able to view events by month.

Remember that you must save any asset changes that you make.

Creating the calendar events

Folders for event locations

Create three folder assets underneath your site, titled Sydney, Canberra, and Brisbane. These folders will store each city’s events and allow us to display each group of events in different colors.

Single calendar event

We need to create a one-off training event for Sydney that occurs on the 4th of January 2010 and runs from 9:00 AM to 5:00 PM.

To do this:

  1. Create a single calendar event under the Sydney folder.

  2. Enter the information for the event on the Create new single calendar event screen.

    The create new single calendar event screen
  3. Click Save.
    The event will be added under the Sydney folder in the asset tree.

    Calendar events
  4. Repeat these steps to create additional one-off events to the Sydney, Canberra, and Brisbane folders.

Recurring calendar event

We need to create a recurring training event for Canberra that occurs on the 13th and 14th of January and runs from 9:00 AM to 5:00 PM.

To do this:

  1. Create a recurring calendar event under the Canberra folder.

  2. Enter the information for the event on the Create new recurring calendar event screen.

    The create new recurring calendar event screen
  3. Click Save.
    The event will be added under the Canberra folder in the asset tree.

We need to create another recurring training event for Sydney that occurs on the 4th of January and runs every second Monday from 9:00 AM to 5:00 PM.

To do this:

  1. Create a recurring calendar event under the Sydney folder.

  2. Enter the information for the event on the Create new recurring calendar event screen.

    The create new recurring calendar event screen
  3. Click Save

The event will be added under the Sydney folder in the asset tree.

Recurring event cancelation

As the event occurs every second Monday, it is scheduled to run on the 18th of January. However, the Sydney office is closed on that day. We need to cancel the event on this date.

To do this:

  1. Create a recurring event cancellation asset under the recurring calendar event.

  2. Enter the cancelation information on the Create new recurring event cancelation screen.

    The create new recurring event cancellation screen
  3. Click Save. The cancellation is added under the recurring calendar event in the asset tree.

    Calendar events

Repeat these steps to add recurring calendar events and recurring event cancelations under the Brisbane folder, as shown in the figure to the right.

Multi-date calendar event

We need to create two additional training events for Sydney. Both of these events are one-off events but are for the same course. The first event occurs on the 26th of January, and the second occurs on the 29th of January. Instead of creating two single calendar events, we can create a multi-date calendar event that contains the details for both these dates.

To do this:

  1. Create a multi-date calendar event under the Sydney folder.

  2. Enter the event’s information on the Create new multi-date calendar event screen.

    The create new multi-date calendar event screen
  3. Click Save. The event will be added under the Sydney folder in the asset tree.

We need to also create two training events for Canberra. The first event is a one-off event occurring on the 4th of January. The second is a recurring event that begins on the 8th of January and runs every Friday. We can use a multi-date calendar event to create both these events.

To do this:

  1. Create a multi-date calendar event under the Sydney folder.

  2. Enter the event’s information on the Create new multi-date calendar event screen.

    The create new multi-date calendar event screen
  3. Click Save.

The event will be added under the Canberra folder in the asset tree. The events status must be live for the them to appear on the calendar page.

Setting up the calendar page

Live calendar events

To display the events on the site, we need to create and configure a calendar page.

To do this:

  1. Create a calendar page under your site.

  2. Navigate to the event sources section of the Details screen of the calendar page.

  3. Select the Sydney, Canberra, and Brisbane event folders in the location to draw events from fields.

  4. For each event location specified, apply a color CSS class in the CSS class to apply to the events' display field.

This procedure will allow us to display the events of each location in a different color.

In this example, we have set the Sydney events in green, the Canberra events in red, and the Brisbane events in purple.

The event sources section

In the enabled views fields, select the (none) option for the year view, week view, and day view options.

This action will disable the year, week, and day view options on the calendar page. Users will only be able to view events by month. Users can also view the details of each event when clicked on in the calendar.

The enabled views fields

Defining the layout of the calendar

A default layout has been created for the calendar page. We need to modify this layout to add a title for the calendar and add additional information on the page.

To do this:

  1. Right-click on the page contents bodycopy in the asset tree and select the Edit contents screen.

  2. Enter the content shown in the figure below into the WYSIWYG editor.

The WYSIWYG editor on the page contents bodycopy

Previewing the calendar page

By default, the calendar page will display the current month, highlighting the events that have been scheduled, as shown in the figure below.

The calendar page

The events for Sydney appear in green, the events for Canberra in red, and Brisbane’s events in purple.

Canceled events (for example, the MATR 101 course for Sydney on Jan 18th) does not appear on the calendar page.

When a user clicks on an event in the calendar, the details of that event will be displayed.

The details of an event

© 2015-2020 Squiz Pty Ltd