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

[
  {
    "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

Event	Description
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.

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.

Set the visibility

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	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.