Event calendar

What is Event calendar?

The Event Calendar component in ILLA Cloud is a powerful tool for organizing and displaying events in a visually appealing and user-friendly manner. It allows users to create, manage, and showcase events with ease, providing features such as date navigation, event categorization, and detailed event information. The Event Calendar component offers customizable layouts, intuitive event creation interfaces, and options for integrating with other systems, making it an essential tool for businesses and organizations to effectively manage and promote their events.

Properties

Manual options

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

Properties	Description
Event id	uniquely identifies each event in the calendar
Title	title or name of the event
Description	The description of the event
Start	start date and time of the event
End	end date and time of the event
Resource id	identifies the resource or entity associated with the event
Resource title	title or name of the resource associated with the event
All day	whether the event is an all-day event or not
Draggable	whether the event can be dragged or moved within the calendar interface
Resizable	Whether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Mapped options

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

Properties	Description
Data source	Set the data source of options
Event id	A unique ID used to identify the event
Title	The title of the event
Description	The description of the event
Start	Start time of the event
End	End time of the event
Resource id	The resource could be a person, a meeting room, etc. You can set a resource id and connect it to the event.
Resource title	The resource name displayed in the resource view
All day	Whether it's an all-day event
Draggable	Whether allow users to update the event time range by dragging to move the event
Resizable	Whether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Other properties

Properties	Description
Default date	the default date value
Resource grid	Whether to show a resource grid
Default view	The default view when launch the app
Event Handler	Trigger queries, control components, or call other APIs in response to component events.
Custome message when disabled dragging	After dragging is disabled, the message will display when a user drags the event.
Custom message when disabled resizing	After resizing is disabled, the message will display when a user resizes the event.
Show current time	Set whether to show the current time line
Hidden	Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Calendar Background Color	Set the background of the calendar
Calendar Text Color	Set color of the text
Event Background Color	Set the background of event card
Event Text Color	Set the text color of event card

Event handler

Event	Description
Change	When a user changes the event value
Select	When a user selects the component
Drag or click no event area	When a user drag or click an area with no event

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property name	Description
borderColor	specifies the color of the border around the calendar component or the events displayed within it
dataSource	the source of event data for the calendar component
defaultDate	sets the initial date to be displayed when the calendar is loaded or rendered
defaultView	determines the default view or mode in which the calendar is displayed when initially loaded
displayName	the name of this component (ie button1)
draggable	enables or disables the ability to drag and move events within the calendar
events	generated or triggered when certain actions or events occur within the number input component.
eventBackground	specifies the background color or styling for the event elements displayed in the calendar
eventConfigureMode	determines the configuration mode for events in the calendar
eventList	the list or collection of events to be displayed in a separate view or panel within the calendar component
eventTextColor	determines the color of the text or content within the event elements displayed in the calendar
hidden	whether the event calendar component is hidden or not
manualOptions	manual configuration or customization of various options or settings within the event calendar
mappedOptions	mapped or predefined options for the event calendar component
resizable	enables or disables the ability to resize events in the calendar
resourceMapList	defines the mapping or association between events and resources within the calendar
selectEndTime	determines the end time or date when selecting or creating a new event in the calendar
selectEventValue	the selected or currently active event value in the calendar
selectResource	determines the resource or entity associated with the selected or focused event in the calendar
selectStartTime	determines the start time or date when selecting or creating a new event in the calendar
showCurrentTime	determines whether the current time indicator or marker is displayed on the calendar
showResource	whether the resource or entity associated with events is displayed or shown in the calendar
slotBackground	specifies the background color or styling for the time slots or cells in the calendar
titleColor	the color of the title or heading displayed for events in the calendar

Example: {{eventCalendar1.events}}

Use case

Next, we will demonstrate how to add new events displayed on event calendar with a button.

Step 1 Add an action

Let us create a table in Supabase called events. It has 9 columns: title, description, resource_id, resource_title, all_day, draggable, resizable, start_time, and end_time .

Then we can create a new action for Supabase from the action list, listing all the data with the code snippet below and called supabasedb1.

select * from events;

Change from Run action only when manually triggered to Run action automatically when inputs change in the upper right corner below Save button.

Click Save and Run to activate this action.

In order to add a new event, we also need another action. Choose the same Supabase resource from the action list called supabasedb2, and put the code snippet below.

INSERT INTO events (id, title, description, start_time, end_time, resource_id, resource_title, all_day, draggable, resizable)
VALUES ((SELECT MAX(id) + 1 FROM events), '{{input1.value}}', '{{input2.value}}', '{{dateTime1.value}}', '{{dateTime2.value}}', {{numberInput1.value}}, '{{input4.value}}', {{switch1.value}}, {{switch2.value}}, {{switch3.value}});

The input, numberInput, dateTime, and switch components are from the modal components. There are more detailed descriptions of those components below.

Step 2 Configure Actions

For supabasedb2, we want to show a notification when the new event info is successfully added to the database.

In the Actions, click supabasedb2, in the General page, scroll down to Event handler.

1. Click + New to add a new event handler.
2. In the Edit event handler, select Show notification in action, title "Success" and description "Successfully add new event. Choose Success for type, put {{2000}} for the duration (2 seconds)

Step 2 Add Components

Next, we can add an event calendar component, a button component, and a **modal** component to the canvas. Label the button component to Add new event.

In the modal component, we change the text on the upper left corner to "New Event". We then add the Title and Description input components, Start time and End time date time components, Resource ID number input, and Resource Title input components, All day, Draggable, and Resizable switch components, and label them as needed.

Step 3 Configure the component

For the **event calendar** component, we can map the data from supabasedb1 to display. We first choose mapped from options, then we put {{supabasedb1.data}} in the Data source and fill out the Mapped Option fields as shown below.

For the button component, we can configure it to open the modal when clicked.

1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
3. Choose the openModal method

For the modal component, we can configure it to refresh the events display in the **event calendar** when the modal is closed.

1. Click the modal component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Trigger action in action, and select the supabasedb component that you want to trigger for Action name. In our case, it's the supabasedb1.

For the "Cancel" button component, we can configure it to close the modal if clicked

1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
3. Choose the closeModal method

For the "Confirm" button, we want it to insert the new data filled out in the modal into the supabase events table and close modal.

1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Trigger action for action and choose supabasedb2 for action name

1. Click + New to add a new event handler.
2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
3. Choose the closeModal method

Step 4 Test

Now that we can test it as shown below.