Calendar component

Overview

The Calendar component allows you to view and interact with events in a calendar layout within a flow. It supports displaying, selecting, and managing events across days and months, providing a responsive and intuitive interface for scheduling or event management use cases.

General settings

Configure the general settings for the component.

Setting	Description
Name	Enter a name for the component.
Label	Enter a label for the component. The label is displayed above the component by default. Do not enter a label if you do not require this text to be shown.
Help information about this component	Display help text directly below the component, for example to provide further information on how to use the component.

Data source

Choose the data source for the component.

Get the data from a Connector: Retrieve the tiles data from a connector.

Select the type for the data that you wish to display in the The Type of data to be provided field. This will determine the properties that you can select.
Select the type binding in the The Binding that should be used to get the data drop-down menu.
Add a Filter in the Data source filter section if required. See Type Bindings and Data action filters.

Get the data from a List Value: Retrieve the tiles data from a list value.

Click Select or create a new Value to choose an existing list value or create a new list value.

State

Select the value that you wish to save the user selection data into.

Set the Save the component state into field to your object value. Click Select or create a new value to select an existing value or create a new value.

Validation

Add client-side page validation to the component. You cannot add validation if you are saving state data into a boolean or object value.

Click Add Validation.
Select the validation Type.
Enter a valid Value for the validation type.
Enter a feedback Message to show to the user if the validation criteria is not met.
Click Update to add the validation item.

Setting	Description
Message	Enter a message to show to the user if the validation criteria is not met.
Value	Enter the validation criteria. • Minimum number: Enter a minimum number or character limit for the component. • Maximum number: Enter a maximum number or character limit for the component. • Regular expression pattern: Enter a valid Regular Expression (Regex) to validate the component.
Type	Select the type of validation to apply to the component. • Minimum number: A user must enter more than this value into the field. • Maximum number: A user is unable to enter more than this value into the field. • Regular expression pattern: Apply Regular Expression (Regex) validation to the component.
Required	Specify if the component requires user selection before the next step in the flow can be navigated to. For example, a user must use the file upload component before they are allowed to progress in the flow. • Switch on the toggle to set the component as requiring selection from a user before they can progress in the flow, for example to the next page. • Switch off the toggle to allow a user to progress in the flow, even if they have not used the component, for example if the field is optional.

Styles

Apply additional CSS styling to the component.

Enter space-delimited CSS classes/selectors into the CSS Classes field.

When you run the flow, these classes are appended to the main component class.

Calendar at Runtime

At runtime, the Calendar component displays in month or day view. By default, it opens to the current month, with the current date highlighted.

Use the Next and Previous buttons at the top right of the calendar to navigate between months.

Each event shows its title and start time.

Multi-day events span multiple cells in the calendar grid.
Events on the same day are stacked within the same cell and ordered by start time.

The calendar is responsive and adjusts automatically to different screen sizes.

Interacting with calendar events

You can click on an event to select it. To enable this interaction, configure an outcome for the Calendar component in your flow. This setup works similarly to selecting rows in a table.

For example, you can create an outcome that opens a form for editing the start and end times of the selected event.

Any outcomes configured to appear at the top of the component display in the top-right corner of the calendar.

Interacting with calendar dates

You can also click on specific dates in the calendar to trigger actions. To configure this, add an outcome to the Calendar component and set its Action kind to New.

This outcome is triggered when a user clicks on a date, such as when creating a new calendar event.