Events
Properties
Property | Type | Description | Required |
---|---|---|---|
id | string or number | A unique identifier for the event. | Yes |
start | string | The start time of the event. | Yes |
end | string | The end time of the event. | Yes |
title | string | The title of the event. | No |
description | string | A description of the event. | No |
location | string | The location of the event. | No |
people | string[] | Names of the participants | No |
calendarId | string | id of the calendar. See "calendars" section | No |
_options | See "_options" section | Configuration for the event. | No |
_customContent.timeGrid | string | Custom HTML to display in the time grid of week/day views. | No |
_customContent.dateGrid | string | Custom HTML to display in the date grid of week/day views. | No |
_customContent.monthGrid | string | Custom HTML to display in the month view. | No |
_customContent.monthAgenda | string | Custom HTML to display in the month agenda view. | No |
Other properties
Since you may want to add additional properties to your events, that carry meaning in the business logic of your application, you are free to do so. The calendar will simply ignore the existence of them and return them back to you upon interacting with the events.
Event time
The timestamps of an event can have two different formats: YYYY-MM-DD
or YYYY-MM-DD HH:mm
. These cannot be mixed
within the same event. For example:
- Timed events - Events that have a start and end time such as:
const timedEvent = {
id: 1,
start: '2025-10-01 20:15',
end: '2025-10-01 21:15',
}
- Full day events - Events that span the entire day such as:
const fullDayEvent = {
id: 2,
start: '2025-10-01',
end: '2025-10-01',
}
Both of these types have the possibility to be either a single day event or a multi day event.
Though a planned future feature, the calendar does not yet support time zones. All times are assumed to be in the same time zone. If this feature is important to you, feel free to open an issue on the GitHub repository to help prioritize this feature.
_options
Configure the behavior of individual events by adding an _options
object to the event. All the following
properties are optional:
Property | Type | Description | Default |
---|---|---|---|
disableDND | boolean | Disables drag and drop for the event. | undefined |
disableResize | boolean | Disables resizing for the event. | undefined |
additionalClasses | string[] | Additional classes to add to the event. | undefined |
Updating events
If you want to get, update or remove events after rendering the calendar, you need to use the events service plugin.
Example
import { createCalendar } from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'
const calendar = createCalendar({
// ... other config
events: [
{
id: 1,
title: 'Coffee with John',
start: '2023-11-04 10:05',
end: '2023-11-04 10:35',
},
{
id: 2,
title: 'Ski trip',
start: '2023-12-04',
end: '2023-12-06',
},
],
})
calendar.render(document.getElementById('calendar'))