events

Array of events rendered by the calendar. Required.

Usage

events: CalendarEvent[];

interface CalendarEvent {
  id: string | number;
  start: Date;
  end: Date;
  allDay?: boolean;
  rrule?: string;
  masterEventId?: string | number;
  originalDate?: Date;
  exdates?: Date[];
  duration?: number;
  [key: string]: any;
}

Field	Type	Description
id	string | number	Unique identifier. Required.
start	Date	Event start. Required.
end	Date	Event end. Required.
allDay	boolean	Renders the event as an all-day bar in the multiday section.
rrule	string	iCalendar RRULE string. Used when recurring is true.
masterEventId	string | number	Links a recurrence exception to its master event.
originalDate	Date	Original occurrence date for an exception.
exdates	Date[]	Dates excluded from the recurrence.
duration	number	Duration in milliseconds. Computed internally.
[key: string]	any	Custom fields are preserved and forwarded to renderers and event handlers.

Example

<script>
  import { Calendar } from "@svar-ui/svelte-calendar";

  const events = [
    {
      id: 1,
      start: new Date("2026-05-05T09:00"),
      end: new Date("2026-05-05T10:00"),
      text: "Standup",
    },
    {
      id: 2,
      start: new Date("2026-05-06"),
      end: new Date("2026-05-07"),
      allDay: true,
      text: "Offsite",
    },
  ];
</script>

<Calendar {events} />

Related articles

• recurring — turn on RRULE expansion for events that carry an rrule field.
• eventContent — replace the markup rendered for each event.
• eventCss — return per-event CSS classes from the same data.
• getEvents — read the live event list back out of the calendar.
• Quick start — minimal calendar with an events array.