Calendar Widget

1 Description
2 Attributes
3 Actions
4 Example

Description

The Calendar widget allows you to display multiple calendar entries or events in an interactive calendar view. Users can view events in month, week, or day views, and interact with events through edit and delete actions.

Attributes

initialView: Enum (day | week | month) - The initial view of the calendar to display

height: Number - The height of the calendar eg: 600

events: Array - An array of event objects to display on the calendar

title: String - The title or name of the event displayed on the calendar

start: String - A valid date-time string ( 2011-10-10T14:48:00 )

end: String - A valid date-time string ( 2011-10-10T14:48:00 )

color: String - The color of the event displayed on the calendar. Can be a named color (e.g., "blue", "green", "red", "orange") or a hex color code (e.g., "#333333", "#FF5733")

description: String - The description of the event

displayEdit: Boolean - Used to show or hide the edit button when viewing an event

displayDelete: Boolean - Used to show or hide the delete button when viewing an event

allDay: Boolean - Used to make the event an all day event

Actions

addEvent: Triggered when clicking on a specific date

{
    action: 'addEvent',
    date: '2025-02-21'
  }

editEvent: Triggered when clicking the edit button within the event modal

{
    action: 'editEvent',
    event: {
			"title": "Test Event",
			"start": "2025-01-24T08:00:00",
			"end": "2025-01-24T17:00:00",
			"color": "green",
			"description": "This is an event description",
			"displayEdit": true
		}
  }

deleteEvent: Triggered when clicking the delete button within the event modal

{
    action: 'deleteEvent',
    event: {
			"title": "Test Event",
			"start": "2025-01-24T08:00:00",
			"end": "2025-01-24T17:00:00",
			"color": "green",
			"description": "This is an event description",
			"displayEdit": true,
            "displayDelete": true
		}
  }

Example

{
    "initialView": "week",
    "height": 600,
	"events": [
		{
			"title": "Test Event",
			"start": "2025-01-24T08:00:00",
			"end": "2025-01-24T17:00:00",
			"color": "green",
			"description": "This is an event description",
			"displayEdit": true
		},
		{
			"title": "Meeting",
			"start": "2025-01-22T10:00:00",
			"end": "2025-01-22T11:30:00",
			"color": "red",
			"description": "Discuss this meeting in more detail",
			"displayEdit": false
		},
		{
			"title": "Dentist",
			"start": "2025-01-22T13:00:00",
			"end": "2025-01-22T14:00:00",
			"color": "orange",
			"description": "This is an event description",
			"displayEdit": true
		},
		{
			"title": "Inspection",
			"start": "2025-01-23T09:00:00",
			"end": "2025-01-23T12:00:00",
			"color": "blue",
			"description": null,
			"displayEdit": true,
            "allDay": true
		}
	]
}