With Kuika's Calendar element, you can divide time into segments for business planning, add events with clear start and end dates, or create daily schedules. In this tutorial, you will learn how to add events to the Calendar element.
Steps to Add Event to Calendar Element
Add Calendar Element to App
After logging into the Kuika platform, open the project you will work on from the "Apps" screen.
While in the "UI Design" module, open the "Elements" panel on the left side.
Drag and drop the "Calendar" element from the Data category to the screen.
Create Data Source
In order to use the Calendar element, you first need to create a data source.
Go to the “Datasource” module.
Click on the “+ ‘ icon next to the "Tables" heading on the left side.
Give a name to the table in the modal that opens and click the "Next" button.
You can create your table by examining the sample table.
Run the SELECT Query
In order to display the data in the table you created in the calendar component, you need to run the SELECT query you wrote in the “Page Init” phase. This query will display the events added to the calendar.
4. Adjust Calendar Element Settings
Click on the Calendar element on your screen and fill in the “Options” field in the ’Properties” panel on the right side as follows.some text
Actions: Allows you to define actions related to actions performed on the calendar (for example, adding, editing or deleting an event).
Event ID Fields: Allows you to define the event specific ID number.
Event Title: This is the field where you will define the event title.
Start Date: Allows you to show the start date and time of the event.
End Date: Allows you to show the end date and time of the event.
Event Color Hex: This is the color code field used to determine which color the event will be displayed on the calendar.
You need to add a “Save” action to save the entered information in the data table. This action will save the information and make it appear in the calendar.
You can add an event to the Calendar element by specifying the desired date range and get a view as above.
