跳到主要内容

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:

PropertiesDescription
Event iduniquely identifies each event in the calendar
Titletitle or name of the event
DescriptionThe description of the event
Startstart date and time of the event
Endend date and time of the event
Resource ididentifies the resource or entity associated with the event
Resource titletitle or name of the resource associated with the event
All daywhether the event is an all-day event or not
Draggablewhether the event can be dragged or moved within the calendar interface
ResizableWhether 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.

PropertiesDescription
Data sourceSet the data source of options
Event idA unique ID used to identify the event
TitleThe title of the event
DescriptionThe description of the event
StartStart time of the event
EndEnd time of the event
Resource idThe resource could be a person, a meeting room, etc. You can set a resource id and connect it to the event.
Resource titleThe resource name displayed in the resource view
All dayWhether it's an all-day event
DraggableWhether allow users to update the event time range by dragging to move the event
ResizableWhether 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

PropertiesDescription
Default datethe default date value
Resource gridWhether to show a resource grid
Default viewThe default view when launch the app
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Custome message when disabled draggingAfter dragging is disabled, the message will display when a user drags the event.
Custom message when disabled resizingAfter resizing is disabled, the message will display when a user resizes the event.
Show current timeSet whether to show the current time line
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Calendar Background ColorSet the background of the calendar
Calendar Text ColorSet color of the text
Event Background ColorSet the background of event card
Event Text ColorSet the text color of event card

Event handler

EventDescription
ChangeWhen a user changes the event value
SelectWhen a user selects the component
Drag or click no event areaWhen 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 nameDescription
borderColorspecifies the color of the border around the calendar component or the events displayed within it
dataSourcethe source of event data for the calendar component
defaultDatesets the initial date to be displayed when the calendar is loaded or rendered
defaultViewdetermines the default view or mode in which the calendar is displayed when initially loaded
displayNamethe name of this component (ie button1)
draggableenables or disables the ability to drag and move events within the calendar
eventsgenerated or triggered when certain actions or events occur within the number input component.
eventBackgroundspecifies the background color or styling for the event elements displayed in the calendar
eventConfigureModedetermines the configuration mode for events in the calendar
eventListthe list or collection of events to be displayed in a separate view or panel within the calendar component
eventTextColordetermines the color of the text or content within the event elements displayed in the calendar
hiddenwhether the event calendar component is hidden or not
manualOptionsmanual configuration or customization of various options or settings within the event calendar
mappedOptionsmapped or predefined options for the event calendar component
resizableenables or disables the ability to resize events in the calendar
resourceMapListdefines the mapping or association between events and resources within the calendar
selectEndTimedetermines the end time or date when selecting or creating a new event in the calendar
selectEventValuethe selected or currently active event value in the calendar
selectResourcedetermines the resource or entity associated with the selected or focused event in the calendar
selectStartTimedetermines the start time or date when selecting or creating a new event in the calendar
showCurrentTimedetermines whether the current time indicator or marker is displayed on the calendar
showResourcewhether the resource or entity associated with events is displayed or shown in the calendar
slotBackgroundspecifies the background color or styling for the time slots or cells in the calendar
titleColorthe 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.

event_data

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)

event_action_success

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.

event_layout

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.

event_modal_layout

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.

event_data_source

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

event_add_new_button

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.

event_modal

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

close_modal

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

event_db2

  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

close_modal

Step 4 Test

Now that we can test it as shown below.

event_test