What is the calendar component? 

The calendar component enables you to view records from a data table that contains a date type field on a calendar. 

Why use calendar?

When working with date and times you can display these records in a calendar to see all your appointments at a glance. 

When should you use calendars?

Anytime you're working with dates you can likely use calendars. However, if you're working with dates in combination with resources you might be better off using the Calendar Resource component. The calendar componentn is a single dimension component which means you can see all your events with some details about the event and the date and time the event is scheduled for. To track more than one dimension for example, the date time, details as well as the resource the Calendar resource would be more beneficial. 

Adding calendars

To add a calendar choose the calendar component and then choose the data table to be used for this calendar. 

Only tables which contain date or date/time field field will be displayed in the list of tables. This includes: Date, Date/Time and Date Range. 

Once you've chosen the table, you can choose Quick Add which will add the calendar with some default settings. Alternatively, you can choose Customize to configure all the settings manually. 

Choosing QuickAdd is simply a shortcut, you can always go right back into the component to make any changes necessary. 


Inside the calendar component you'll see have some standard options available in other components, as well as unique settings only available in the calendar component. 

  1. Data Source
  2. Calendar Options

Data Source

The Data Source tab is where you can filter which records will be displayed in this component with some 'server-side' filtering. Since this is universal to all components you can view it as its own article here. Learn more about Data Source. 

Calendar Options

Under General options you'll have 4 basic options: 

  • Title
  • Description
  • Date Field
  • Label Field


The title will be the title displayed on top of the calendar. 


A description for your reference. 

Date Field

The date field to be used for placing your events on the calendar. There are 3 types of date fields each one will look differently on the calendar. 

  • Date - This will display all events as a full day event
  • Date/Time - This will display all events at the given time with a default time of 30 minutes
  • Date Range - This will display events with start and end date/time given in the field. 

Label Field

This will be the field used to be displayed inside the calendar to reference the record in the calendar. 


Under the Interactive Options there are 3 options to enable this calendar to be more interactive. 

  • Enable Drag/Drop
  • Enable Detail View in Pop up
  • Enable Form to Add additional Records

Enable Drag and Drop

Enabling this will allow users to drag and drop events to move them to new dates and times. 

Enable Detail View in Popup

Enabling this option will make each value in the calendar clickable. When clicked the record details will appear in a pop up window. You can customize which fields are displayed in the Detail View Section. 

Enable Form to Add Additional Records

Enabling this will open a new form any time a blank space in the calendar is pressed. You can customize which fields are displayed here int he Form View. 


Under the Default Options you can choose some default options to be used when the calendar initially loads. 

  • Default Display Mode
  • Default Display Range
  • Default Event Color
  • Starting Date of the Week

Default Display Mode

This will determine if the default display should be the calendar or list. 


Default Display Range

This will determine the date range to be used when the calendar first loads. 



Default Event Color

This will be the default color used on the label in the calendars. If you'd like to create custom record colors you can do so with Label Color Rules. 

Label Color Rules

Add rules to change the colors for each record based on pre-defined criteria.