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.
Property | Description |
---|---|
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 |
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
Event | Description |
---|---|
|
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.
Property | Description |
---|---|
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-
View | Description |
---|---|
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)
Properties | Description |
---|---|
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
Property | Description |
---|---|
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. |
Button Background | |
Button Text | |
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