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. This wrapper provides a component that matches the functionality of FullCalendar's standard API.

Setup

First install the wrapper and related dependencies:

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

Then install any additional FullCalendar plugins you plan to use:

npm install --save-dev @fullcalendar/daygrid

After that, update your Vite configuration in svelte.config.js as shown here:

const config = {
  preprocess: preprocess(),

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

This config is required to workaround the 'isHiddenDay' of undefined issue upstream as noted by FullCalendar.

Usage

You may then begin to write a parent component that leverages the FullCalendar wrapper component, including type definitions if you're using TypeScript:

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

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

<FullCalendar {options} />

Note: You must initialize the calendar with at least one plugin which provides a view.

Example

Here you can find a working SvelteKit 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';
  import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

  let options = {
    plugins: [resourceTimelinePlugin],
    schedulerLicenseKey: 'your-license-key',
  };
</script>

<FullCalendar {options} />

Until server-side rendering of FullCalendar is fully supported upstream, implementations may decide to share the license key on the client and this is not uncommon. Please note, however, you can still fetch event data and from your own API server-side in order to speed up rendering of your calendar components.

Draggable external events

You'll need to install the interactionPlugin:

npm install --save-dev @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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

vhs 📖

This project follows the all-contributors specification. Contributions of any kind welcome!