Mapping Calendar Event Fields to Display Page Templates

You can customize and display calendar event information by mapping calendar fields to display page templates. Highlight certain fields such as title, date, and location and hide others that are less relevant.

Additionally, use a collection display fragment on a content page to display a dynamically or manually generated collection of calendar events and direct users to each collection item’s display page template.

To do that, you can create calendar events using a Calendar widget, a collection to group events dynamically, a display page template to customize how you want to display the calendar events, a content page with a Collection Display fragment to show all items in the collection, and a button to send users to the display page template.

Calendar Events

Start by adding the Calendar widget to a page, navigating to the page, and creating an event:

1. Create a new page or start editing one.

2. In the Fragments and Widgets sidebar, look for the Calendar widget. Drag and drop it into the page and publish the page.

3. Navigate to the page and click Add Event. Fill in the information and click Publish.

4. Add a few more events.

   

Dynamic Collections to Group Calendar Events

Create a collection to group the calendar events. You can display this collection later using a collection display fragment.

1. Create a dynamic collection and name it Calendar Event Collection.

2. In the Item Type drop-down menu, select Calendar Event under Single Item Type.

   

3. (Optional) Configure the collection.

4. Click Save.

Every calendar event, including new ones, is added to the collection.

Calendar Events Display Page Template

Create a display page template and map calendar event fields to the elements. For this example, you’ll create a simple structure to display the event’s information.

1. Create a display page template, name it Calendar Event Display Page Template, and select Calendar Event as the content type.

   The display page template is now associated with calendar events.

2. From the Fragments and Widgets sidebar, drag the Container fragment onto the page.

3. Add another container to the existing container. In the browser, click the inner container once and select the Styles tab on the right. Add 14.5 rem right and left margins, a 4.5 rem top margin, and a 7.5 rem bottom margin.

4. Add a heading to the inner container. In the browser, click on the heading once and select the Styles tab on the right. Add a 1.5 rem bottom margin.

5. Click the heading again (you can use the browser or click on the actual element) and select the Mapping tab on the right. Under Field, choose Title. Read Mappable Fields to learn which calendar fields can be mapped.

   This maps the heading content to the title of the calendar event.

6. Repeat the steps to add a paragraph element, add a 1.5 rem bottom margin to it, and map it to the Description of the calendar event.

7. Repeat the steps to add a heading element. Under the General tab, set it as an H5 Heading Level. Under the Styles tab, add a 0.5 rem bottom margin to it. Map it to the Location of the calendar event.

8. Repeat the steps to add a heading element. Under the General tab, set it as an H5 Heading Level. Map it to the Start Date of the calendar event.

9. Repeat the steps to add a heading element. Under the General tab, set it as an H5 Heading Level. Map it to the End Date of the calendar event.

10. Click Publish

You should now have a simple structure that displays the calendar information: the title of the event at the top, followed by the description, place, and time. You can also add this information mixed with other content and customize it any way you want.

Mark the display page template as the default to use it with the collection display. Once you publish the page, the Page Templates application appears. Click Actions () next to the created template and select Mark as Default.

Content Page to Display the Calendar Event Collection

Create a content page and add a Collection Display fragment to show the calendar events and send users to the calendar event display page template.

For this example, you’ll create a simple structure to display the event’s title and a button that links to the display page template when clicked.

1. Create a new page and name it Calendar Event Collection Page.

2. In the Fragments and Widgets sidebar, look for the Collection Display fragment. Drag and drop it into the page.

3. Click on Collection Display once, click Add () next to Collection on the right, and select the Calendar Event Collection.

   The titles for the existing events appear as collection items in the collection display. Once you drop an element inside the collection item area, the same element is added to the other items also.

   

4. In the Fragments and Widgets sidebar, drag the Container fragment into the Collection Item area. In the browser, click the container once and select the Styles tab on the right. Add 14.5 rem right and left margins and a 3.0 rem top margin.

5. Add a heading in the container. In the browser, click the heading once and select the Styles tab on the right. Add a 1 rem bottom margin.

6. Click on the heading again (you can use the browser or click on the actual element) and select the Mapping tab on the right. Under Field, choose Title.

7. Add a Button to the container. Double-click on the button’s content to change it to Learn More.

   Click anywhere else or press ESC to apply the changes.

8. Click out of the button and double-click on the button area to see the Mapping and Link tabs on the right. Open the Link tab.

   You can use the browser to perform this action. Click the Button element to expand it and select the link element inside.

9. Under Link, select Mapped URL and, under field, select Default.

   

10. Click Publish

When you’re finished, check if everything is working. Navigate to the Calendar Event Collection page. Click on any Learn More button. You should be sent to a display page template showing the information about the event.

Mappable Fields

Here’s a list of calendar event fields that can be mapped to display page template elements.

Field	Description
Title	The event’s title.
Description	The event’s description.
Location	The event’s location.
Event URL	The event’s URL.
Start Date	The event’s start date.
End Date	The event’s end date.
All Day	Returns True if the All Day option is selected or False otherwise.
Calendar Name	The name of the calendar where the event is added.
Invitations	Shows Accepted, Declined, Pending, and Maybe statuses and the number of people in each category.
Repetitions	Returns False if the event is not repeatable or the repetition’s details otherwise.

Related Topics

• Using Collections
• Using Display Page Templates
• Using Multiple Display Page Templates to Create Multi-Step Applications
• Using Widgets