Calendar Module Guide


#1

Using the Calendar Module to Display calendar events with Xibo

Please note: If you are using the 1.8 series of the CMS, please use the following link: Calendar Module - 1.8.

Introduction

The Calendar Module is a feature that is designed to pull in data from an iCAL feed to display in Layouts.

This tutorial will walk you through the process of how to produce a Layout that will show information held in a calendar which supports the iCal format.

With a huge variety of available iCAL feeds and many variations of how this Module can be utilised in Xibo, I am going to use Google Calendar populated with events for my fictional Leisure Centre ‘Spring Leisure’ so I can include an iCAL URL to demonstrate how useful and easy this Widget is!

TIP: Make sure that you have ‘current events’ in your calendar and have included the appropriate merge fields from the available Snippets in your Layout.

TIP: Ensure that the ICS feed URL is available to the CMS. If the feed loads in a browser without authentication then the feed should display in the CMS without issue.

For Google Calendar feeds please take a look at the link with regards to ‘See your calendar (view only)’

Create your Layout

Click on Layouts under the Design section of the CMS main menu:

  1. Add Layout and once created Checkout to enable editing.
  2. Add an Image or choose a coloured background (I have downloaded a background image from the Xibo Layout Exchange to use in this tutorial)
  3. Click on the Edit icon in the top right corner of the Layout Navigator window and resize and position your Region.
  4. Click on Widgets on the bottom toolbar and drag or click to add the Calendar Widget to the empty Region.
  5. Save .

Use the Edit Calendar form to suit your specific needs:

  1. Optionally give this Widget a name.
  2. Tick ‘Set a duration’ to change the default time to a value that is more appropriate for your Layout.

edit_calendar

Click on the tab headers to configure:

Configuration

  1. An iCAL feed URL (Google Calendar feed used for this example).
  2. Set an Interval of 1 day (as I only wish to show ‘today’s events’).
  3. Number of Items - 2 (this is how many events I would like to show per page).
  4. Save .

Appearance

  1. Specify the Date Format as H:i (as I just want to display the times of my events) see the Calendar Manual page for all allowed date formats.
  2. Effect - Fade Out (how the display will show the change of pages).
  3. Items per page - 2 (the number of pages to split my events).
  4. Save.

Templates

Click on Main and toggle On the Visual editor. Click in the preview window to open the inline editor.
Include merge fields under Snippets as well as your own text and format to look attractive in the layout.

main_template

Current Event
Tick in the Set an alternative template for events that are current? to tell Xibo to use your Players date/time to work out if the event showing is current. This will also present an additional Template giving you the option to include text, Snippets and formatting for your ‘current events’

No Data
Enter a message using the No Data Template to display a message when there is no information returned from the source to ensure that your audience is not left with a blank screen.

Provide an Update Interval (in minutes) as high as possible, on the Caching tab. I have set this to 60 which will mean that the Widget will check for new entries in the iCAL feed every hour.

Click anywhere on the background of the Layout Navigator and click on the play button on the Preview window.

If everything is displaying in the Preview as intended the Layout can be set to Publish using the button on the bottom toolbar and then schedule to Displays or Display Groups.

Additional help available:
Troubleshooting


Calendar Module Guide - Xibo CMS 1.8.10