Displaying calendar events

Introduction

This tutorial explains how to use a calendar widget to display the events of a calendar exported from Outlook. It is based on create a master playlist tutorial, that should already have been followed.

Tutorial

Displaying calendar event project

Version 1.0 (2015-12-04)

Difficulty: Easy.
Total duration: 10-15 minutes.
Requirements:
- Elementi 2015 or later. The latest version is recommended.
- One or more HMP devices using firmware 3.2.0 or later to display the project. The latest version is recommended.

For full screen, see this video on Vimeo.

Export your calendar

Calendar editing

First, let's create the calendar file to be displayed in the layout.

Open Office Outlook and go to the calendar view
- You can either create a new calendar (Open Calendar -> Create New Blank Calendar) or use an existing one. In this tutorial we will create a new calendar and call it "fitness";
- Note that exporting a calendar from Office Online is possible but is outside the scope of this tutorial.
Enter all the events that you want to appear on your calendar
- You can use any of the field of the events but formatting and inserted media will not be kept when exporting to an ics file.
Go File -> Save Calendar and select a location on your local hard drive to save the file. Enter "calendar.ics" for the file name
Select "iCalendar Format (*.ics) as document type.
Press the "Save" button.

Your calendar events are now ready to be imported in the Project.

Getting started

To get started, follow Create a master playlist tutorial. Once done, make a copy of that project, rename the copy to "Datafeed-calendar" and then open it.

Create a new layout and call it "Calendar", select a 16:9 format, a white background and make sure the last check-box is not checked.
Double-click on the layout icon to open it. Double click on the "index.svg" file to open it in the Preview panel.
Import the background image.
Drag & drop the image from the Browse panel into the preview panel (or into the Edit panel) to create a media layer. Click on the "Fit Screen" button on the toolbar to make sure the background layer occupies the entire screen.
Change the transparency of the background using the Edit panel and clicking on (the "Layer Properties" button) next to the text layer. This opens the Layer Properties dialog and let you change the Opacity of the layer to 0.3.
Lock the layer by clicking on the "Lock" icon within the edit panel.
Import the calendar file.
- The calendar file will be copied from your local hard drive into the project. If you update the calendar events using Outlook, it will need to be imported again.
- Importing a calendar file is done the same way as for any media file (See this video about importing media in case of need).

Import a table widget

Table widget

Next, let's import a table widget into the current layout.

Click on the "Widgets" tab within the Browse panel.
Open the "Calendars" folder and find the "Table.svg" widget.
Drag & drop the widget from the browse panel onto the Preview panel. A new media layer is added on top of the other layers. Note that the widget file was automatically copied into the current project upon import.
Go back to the project by clicking on the "Datafeed-calendar" tab in the Browse panel.
Position the widget to occupy all the layout using "Fit Screen".
Click the button next to the text layer. This opens the Layer Properties dialog.
Click on the "Box Format" tab.
Select the Padding option and set its value to 86.
Press on OK to leave the dialog.

Configure the data source

Data Properties

Configuring ICS Parser

Testing data feeds

Next, let's change the widget data source from the default one pointing to the SpinetiX server (i.e. displaying the "Lorem ipsum ..." # Double-click on the "Table.svg" layer within the edit panel. This opens the widget within the main layout context (i.e. without closing index.svg document).

Click twice on the "Data source" property. This opens the "Data Properties" dialog.
Enter the name of the calendar file to be displayed ("calendar.ics")
Click on the ICS parser tab
Configure the From and To filter on the calendar event.
- These options let you configure which events from the calendar need to be displayed at any time.
- You can use absolute or relative dates, both for the starting and ending limits. In this tutorial we will show only the events for today and tomorrow.
Click the "Test..." button to verify the results.
- All the available data from the calendar file are shown in the test box. The standards ones are "title", "description", "location", "startDate" and "endDate".
Click the "OK" button to save the changes to the data source.

Fine-tune the widget

Configuring table widget

Layout of the table widget

Next, let's modify the configuration of the widget.

Change the number of row to be displayed to 4
Add a Delay per cell of 0.1s to add some animation on the table.

Table widgets and slideshow widgets have a more complex structure than the other calendar widgets because it is possible to configure the layout of the data inside the widget like it is the case for any normal Layout.

Let's setup the layout of the table cell.

Click on the "Layer" tab in the Edit panel.
- Two default layers are present on this tab. The first one display a set of text entry from the calendar event, the second one an image whose link that may be present in the calendar event.
- Remove the second layer, as there are no images in our example.
Select the first layer in the Edit panel and click on the Copy and Paste on the toolbar.
- Instead of starting a new layer from scratch we will use the existing layers as a base for our work.
Click on the Preview panel.
- This will pause the playback of the content and enter into the "Edit mode"
- The content of the preview is replaced by a set of placeholders such as [[title]] or [[startDate>SHORT_DATE]] that will be replaced by the data of the calendar event, i.e to display the field "location" from the event, use the syntax "[[location]]". The names are case sensitive.
- Because we have change the number of line to be displayed, the current layout is not displayed correctly.
Select the first layer and open the "Layer Properties" using .
1. Set the coordinates of the layer to Left=0, Top=16, Width=640 and Height=144
2. Set the alignment of the text to "Top" and "Left"
3. Go to the "Edit Text" tab and keep only the [[title]] and [[location]].
4. Go to the "Box Format" tab and the the Opacity of the Mat to 0.6 and its color to #00417F.
5. Press OK to apply your changes.
Select the second layer and open the "Layer Properties" using .
1. Set the coordinates of the layer to Left=640, Top=16, Width=640 and Height=144
2. Set the alignment of the text to "Bottom" and "Right"
3. Go to the "Edit Text" tab and keep only the [[startDate>SHORT_DATE]] on the first line and [[startDate>SHORT_TIME]] - [[endDate>SHORT_TIME]].
4. Change the syntax of the date from [[startDate>SHORT_DATE]] to [[startDate>LONG_DATE]].
  See Data mapping and Date and time formats for detailed explanation on the date formatting.
5. Go to the "Box Format" tab and the the Opacity of the Mat to 0.6 and its color to #00417F.
6. Press OK to apply your changes.
Press the play button to see your formatting applied to the event data.

Save your work, the layout is completed.

Add it to the master playlist

Add to master playlist

Finally, let's add the new layout to the master playlist and insure that all the advice are displayed.

Go back to the root of the project by clicking on the "Datafeed-calendar" name in the breadcrumb.
Double click on the project master file "index.svg" to open it in the Preview panel.
Double-click on the playlist layer inside the preview panel (or edit panel) to open the playlist within the main layout context (i.e. without closing index.svg document). See more details about editing within layout.
Drag & drop the "Calendar" Layout from the browse panel into the edit panel.

Save your work.