svelte-fullcalendar

svelte-fullcalendar

A Svelte 3 component-wrapper for FullCalendar

Please @mention me for any issue (I'm unwatching for renovate reasons)

FullCalendar (almost) seamlessly integrates with the Svelte JavaScript compiler and the SvelteKit JavaScript framework. It provides a component that matches the functionality of FullCalendar's standard API.

This guide does not go into depth about initializing a Svelte/SvelteKit project. Please consult the example for that.

First steps

The first step is to install the FullCalendar-related dependencies. You'll need the Svelte adapter and some plugins to handle the styles.

npm install @fullcalendar/core @fullcalendar/common
npm install --save-dev svelte-preprocess svelte-fullcalendar

Then install any additional plugins you plan to use:

npm install @fullcalendar/daygrid

After that you should update your svelte.config.js:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(),
+++		vite: {
+++			resolve: {
+++				dedupe: ['@fullcalendar/common'],
+++			},
+++			optimizeDeps: {
+++				include: ['@fullcalendar/common'],
+++			},
		},
	},
};

export default config;

• This is crutial for the component to work with SvelteKit.

You may then begin to write a parent component that leverages the <FullCalendar> component:

<script lang="ts">
	import type { CalendarOptions } from 'svelte-fullcalendar';
	import FullCalendar from 'svelte-fullcalendar';
	import daygridPlugin from '@fullcalendar/daygrid';

	let options: CalendarOptions = {
		initialView: 'dayGridMonth',
		plugins: [daygridPlugin],
	};
</script>

<FullCalendar {options} />

• You must initialized your calendar with at least one plugin that provides a view!

Example

Here you can find a working example.

Props and Emitted Events

For the FullCalendar connector, there is no distinction between props and events. Everything is passed into the master options object as key-value pairs. Here is an example that demonstrates passing in an events array and a dateClick handler:

<script>
	let options = {
		dateClick: (event) => alert('date click! ' + event.dateStr),
		events: [
			{ title: 'event 1', date: '2019-04-01' },
			{ title: 'event 2', date: '2019-04-02' },
		],
		initialView: dayGridMonth,
		plugins: [...],
	};
</script>

<FullCalendar {options} />

Modifying Options

You can modify your calendar’s options after initialization by reassigning them within the options object and reassign the options object. This is an example of changing the weekends options:

<script>
	import FullCalendar from 'svelte-fullcalendar';

	let options = {
		initialView: dayGridMonth,
		plugins: [...],
		weekends: false,
	};

	function toggleWeekends() {
		options = {
				...options,
				weekends: !options.weekends
		};
	}
</script>

<button on:click="{toggleWeekends}">toggle weekends</button>
<FullCalendar {options} />

Calendar API

Hopefully you won’t need to do it often, but sometimes it’s useful to access the underlying Calendar object for raw data and methods.

This is especially useful for controlling the current date. The initialDate prop will set the initial date of the calendar, but to change it after that, you’ll need to rely on the date navigation methods.

To do something like this, you’ll need to get ahold of the component’s ref (short for “reference”). In the template:

<FullCalendar bind:this="{calendarRef}" {options} />

Once you have the ref, you can get the underlying Calendar object via the getApi method:

<script>
	let calendarRef;

	function next() {
		const calendarApi = calendarRef.getAPI();
		calendarApi.next();
	}
</script>

Scheduler

How do you use FullCalendar Scheduler's premium plugins with Svelte? They are no different than any other plugin. Just follow the same instructions as you did dayGridPlugin in the above example. Also, make sure to include your schedulerLicenseKey:

<script>
	import FullCalendar from 'svelte-fullcalendar';

	let options = {
		plugins: [(await import('@fullcalendar/resource-timeline')).default],
		schedulerLicenseKey: 'your-license-key',
	};
</script>

<FullCalendar {options} />

Draggable external events

You'll need to install the interactionPlugin:

npm install @fullcalendar/interaction

See the official docs for all available props.

Here is a simple usage example:

<script>
	import FullCalendar, { Draggable } from 'svelte-fullcalendar';
	import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
	import interactionPlugin from '@fullcalendar/interaction';

	let options = {
		schedulerLicenseKey: "XXX",
		plugins: [resourceTimelinePlugin, interactionPlugin],
		droppable: true
	};
</script>

<Draggable eventData={{ title: 'my event', duration: '02:00' }}>
	Drag me!
</Draggable>

<FullCalendar {options}/>

License

This component is released under the MIT license, same as the FullCalendar library.

Changelog

[3.0.0] 2023-05-07

Breaking changes

• @fullcalendar/core's version bumped to v6
• @fullcalendar/common is no longer a peerDependencies and can be removed

Fixes

• Integration with SvelteKit should be fixed