Events

At the center of any calendar, lie the events that are planned into it. An event can have the following properties:

Event 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

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 calendar internally distinguishes between a few types of events. The most basic distinction between them, is whether they are timed events or full day events.

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',
}

Furthermore, both of these types then 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.

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'))

Views Calendars