1. Understanding the calendar module

You have the opportunity to create and use calendars for any purpose across the website. To use the calendar builder properly, it’s important to understand and to follow the structure of the calendar module.

Creating and using Calendars, is an advanced feature. Especially, if you’re not yet familiar with using Contentstack, we recommend to concentrate on the prepared calendars in Support → Training and News Center → Events.

To avoid confusion in the administration, we strongly recommend to segment your work into these basic steps:

  1. Create the calendar and some appointment filter which belongs to the calendar (1.1. and 1.2.)

  2. Include the calendar into a web page (2.)

  3. Create appointments and reference them to appointment filter (1.3.)

1st Step: Create a calendar

If you want to have a Training, an Event Calendar or any other Calendar on your website, you have to start with the Calendar itself.

You can later create a Web Page (type: “calendar”) and embed the calendar.

To embed a calendar you create or open the Web Page Entry in Contentstack, set the page type to “calendar” and select the calendar below the page type selection.

If you want to create some content above and/or below the calendar, create in the Web Page a Content Block and add the “Dynamic Placeholder” module to the Content Block Entry at the desired position.

(tick) Use the Calendar Definition Content Type to create a calendar.

2nd Step: Add filter options to the calendar

The filter options appear at the top of the calendar and allow website users to filter the items in the calendar. If you aim at managing a training calendar, the filter options will be the different trainings you provide. In the 3rd step, you will create single appointments and add them to a filter option. In the CMS, the filters are called “Appointment Filter”.

(tick) Create an Entry in the Appointment Filter Content Type for each filter option you need, e.g. for each training and reference it to your calendar you created in the 1st step.

(tick) Add more Appointment Filter Entries at any time you need, e.g. if you introduce a new training.

3rd Step: Create items in the calendar

For each appointment, e.g. each training date, create an Entry in the Appointment Content Type and reference the appointment to a filter option (Appointment Filter) you created before.

In the appointments you can also reference to a location.

1.1. Calendar Definition

First of all you must create the calendar “container”. In this, you define the calendar’s internal name and decide which filter options the website users should have in this calendar. To include a filter option, just check the respective dimension:

1.2. Appointment Filter

At least one Appointment Filter is needed in a calendar to add appointments to it. The Appointment Filter mainly acts as a filter.

Go back to “3: Create a Calendar” to find the “Appointment Filter” Content Type.

1.3 Appointment

An appointment is the actual entry in which you define the details of a specific appointment and where you define to which appointment filter it belongs.

Steps to create an appointment

Locations are mostly basic information, e.g. the training locations should be known. If you create the locations beforehand, you can ease your work. Please keep in mind that also the locations can be used as a filter in a calendar. So, we strongly recommend to define them explicitly and do not “hide” them in a description text. To create an Appointment Location, use the “Appointment Location” Content Type. You must select to which Calendar Definition the location belongs.

The last two optional fields are internal administrational information only which might help you to manage your appointments in Contentstack, e.g. to sort the list view of the Appointments if you have to manage many appointments.

2. Include a calendar into a webpage

Once you have created a calendar (steps 1.1 and 1.2 above), you can create a new webpage or open an existing one to include the calendar into the web page.

  1. Create a new web page entry or open the web page entry you want to edit.

  2. Add a H1 headline and, if needed, manipulate the URL. More details how to do this you can find in Create a web page in Organize Content in Contentstack.

  3. Select from the list “What kind of webpage you want to create?” the option calendar.

  4. Scroll down to Calendar Configuration and select the calendar you created beforehand

This is enough to create a web page with a calendar in the main content area in the middle of the page. But you have two more options to enrich the appearance of the calendar:

  1. Place content above or below the dynamic calendar

  2. Place content above or below the the display of a single Appointment in the modal

(warning) For displaying a calendar or appointments, these options are not needed.

2.1 Advanced: Arrange content above or below the calendar

To arrange content above or below a calendar, you have to reference a content block to the web page.

For more information about how to create Content Blocks, please refer to the chapter Work with Content Blocks in Organize Content in Contentstack.

You must place a “Dynamic Content” Placeholder somewhere in the Content Block.

2.2 Advanced: Arrange content above or below the appointment detail view

Scroll down to the Dynamic Detail View setting and create or select a content block. Please follow the steps described above in 2.1.