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

Last updated on September 9, 2024

Views Calendars