Svelte component

This page offers documentation for using the Schedule-X calendar in Svelte. For general documentation on configuring the calendar, refer to the rest of the documentation.

Installing

npm install @schedule-x/svelte @schedule-x/theme-default

If you're using a package manager that does not automatically download peer dependencies, you will additionally need to install @schedule-x/calendar, @preact/signals and preact. This is for example the case for yarn and npm < v7.

Basic usage

Example

<div>
	<ScheduleXCalendar calendarApp="{calendarApp}" />
</div>
 
<script lang="ts">
	import { ScheduleXCalendar } from '@schedule-x/svelte';
	import { createCalendar, createViewDay, createViewWeek } from '@schedule-x/calendar';
	import '@schedule-x/theme-default/dist/index.css';
 
	const calendarApp = createCalendar({
		views: [createViewDay(), createViewWeek()],
		events: [
			{
				id: '1',
				title: 'Event 1',
				start: '2024-07-06',
				end: '2024-07-06',
			},
			{
				id: '2',
				title: 'Event 2',
				start: '2024-07-06 02:00',
				end: '2024-07-06 04:00',
			},
		]
	})
</script>

Explanation

The calendar instance

The createCalendar function takes a configuration object as its single argument, and returns an instance of the calendar app. The calendar instance contains some methods that you can use to interact with the calendar events and toggle between light and dark mode. For more on this, refer to the rest of the calendar docs.

The component

The ScheduleXCalendar component then takes the calendar instance as a prop calendarApp and renders the calendar for you. This means you should not call the render method of the calendar instance yourself, as shown in other examples in the docs.

Styles

The Schedule-X calendar is a responsive component. To achieve this, it cannot be delivered with a fixed height or width of its own. You need to define the height and width of the wrapping element .sx-svelte-calendar-wrapper according to your needs. For a regular desktop application, something like this might do the trick for you:

.sx-svelte-calendar-wrapper {
  width: 1200px;
  max-width: 100vw;
  height: 800px;
  max-height: 90vh;
}

Slots & custom components

Schedule-X is built with customization in mind. Therefore, you can take control over many parts of the UI of the calendar, by passing your own Svelte components as props. Currently, these components can be customized:

Custom component example

// TimeGridEvent.svelte
<div>
	{calendarEvent.title}
</div>
 
<script lang="ts">
	export let calendarEvent;
</script>

// App.svelte
<div>
	<ScheduleXCalendar calendarApp="{calendarApp}" timeGridEvent="{TimeGridEvent}" />
</div>
 
<script lang="ts">
	import { ScheduleXCalendar } from '@schedule-x/svelte';
	import { createCalendar, createViewDay, createViewWeek } from '@schedule-x/calendar';
	import '@schedule-x/theme-default/dist/index.css';
	import TimeGridEvent from '$lib/TimeGridEvent.svelte';
 
	const calendarApp = createCalendar({
		views: [createViewWeek(), createViewDay()],
		events: [
			{
				id: '2',
				title: 'Event 2',
				start: '2024-07-06 02:00',
				end: '2024-07-06 04:00',
			},
		]
	})
</script>

Links

Svelte example: https://github.com/schedule-x/svelte-example (opens in a new tab)