Calendar
Used to display dates and corresponding events in the application. Can be used in various types of organizations, especially when the events/tasks are the core part of the work culture.
Basic
Provide the JSON array of items that fill the calendar events. Each item must have the following properties and details.
id
The unique ID value for the item
title
The title text for the event. Recommended to keep it short
start
The timestamp value that specifies the start time of the event
end
The timestamp value that specifies the end time of the event
color
The hex-colour value that fills the event box on the calendar
[
{
"id": "1",
"title": "Coding",
"start": "2024-06-23 10:00:00",
"end": "2024-06-23 12:30:00",
"color": "#079968"
},
{
"id": "2",
"title": "Rest",
"start": "2024-06-24",
"end": "2024-06-25",
"allDay": true
}
]Interaction
License Key
The key code that was purchased as the license to use the 'Full calendar' library. Refer this for more info schedulerLicenseKey
Event Handlers
Change
The "Change" event is activated when the value of the widget is changed. When this event triggers, the associated action gets executed.
Advanced
Editable
Changes the calendar into an editable mode where the users can drag and drop the events as needed. The events can be edited when this mode is ON. Following are the properties the user can edit.
Event ID
This is a mandate value. This must be unique for the event.
Event Name
This is a mandate value. Recommended to keep it short to denote the event.
Event Color
Hex-color value to fill the event on the calendar.
Group ID
Group ID groups events for drag and resize together.
Default Date
Specify the initial date for the calendar to display after load. This value must be in the timestamp format. Example - "2024-06-23T06:19:18.884Z".
Default View
Loads the calendar into the view-type specified here. Types of view-
Month
Displays the default month and all the dates using the monthly calendar view
Week
Displays the default week and all the days as columns
Day
Displays the default day and splits the hours into rows to show the events
List
Shows the events of the day as the list. The day and date are shown in the header. Time and event titles are displayed as the details.
Start From
Mention the day on which the calendar should start the display. It can be set as any day among all the days of the week (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)
Show Event Times
Displays the time value of the event by default.
Show Weekends
Users can remove the weekend days off the calendar by toggling this OFF.
Show All-Day
Displays all-day slot in week and day views.
Display Max Events
Maximum number of events per day in month view. Specify '0' for cell height limit.
Event Max Stack
Maximum number of events to stack horizontally in week and day views. Specify '0' for no limit.
Layout
Hide
This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.
Style
Background
Users can change the colour of the calendar background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Border Color
Set the colour to the border lines. The border lines will be shown only if that is enabled.
Border Radius
This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.
Text
Set the colour of the text. Recommended to set in contrast with the background.
Button Background
Set the background colour for the header buttons.
Button Text
Set the font colour for the text of the header buttons.
Title
Specify the colour for the calendar title text
Selected Background
Set the background colour for the events that are selected by the user on the calendar.
Last updated