Event Calendar
JQuery UI widget for a simple event calendar application.
When applied to a div, the widget creates a visual representation of a month-by-month calendar, with a block showing events underneath. Events are simple, having just a start and an end, a title, and a description.
For example:
{
start: new Date(2023, 0, 1, 0, 0, 0),
end: new Date(2023, 0, 1, 23, 59, 59),
title: "New Year's Day",
description: "A time for reflection"
}
The widget supports adding, removing and editing events.
Installation
$ npm install @cdot/event_calendar
At time of writing, recurring events are not supported.
Usage
Invoke the widget on a div in the normal way. e.g.
$("#selector").event_calendar({ title: "Public Holidays" })
Options
Options are passed to the widget in the usual way.
add
Function that will be called when an event is added to the calendar. Will be passed a structure describing the event { start: end: title: description: }
and should return a Promise. The event structure can be modified (e.g. to add a unique id for the event) and any modifications will be retained in the events
structure passed to the widget.
change
Function that will be called when an event is modified. Will be passed a structure descriping the event { start: end: title: description: }
and should return a Promise. The event structure can be modified (e.g. to add a unique id for the event) and any modifications will be retained in the events
structure passed to the widget.
delete
Function that will be called when an event is deleted. Should return a Promise.
events
Array of pre-existing events. Each entry in the array must be an object with fields as follows:
-
start
Date object giving the start time for the event. -
end
Date object giving the end time of the event. -
title
string title of the event -
description
string description of the event
future_only
If true
, dates in the past are shown greyed out.
title
Optional string title displayed above the calendar.
An example is given in the test
directory.