fullcalendar-svelte

A SvelteKit wrapper for FullCalendar

Installation

To get started, install the required dependencies for FullCalendar and Svelte integration:

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

Install any additional plugins you need for your calendar:

npm install @fullcalendar/daygrid

• Note: At least one plugin providing a view is required for the calendar to function.

Usage

Here’s an example of how to use the <FullCalendar> component in a SvelteKit project:

<script lang="ts">
  import FullCalendar from 'fullcalendar-svelte';
  import dayGridPlugin from '@fullcalendar/daygrid';

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

<FullCalendar {options} />

Props and Events

All FullCalendar options, props, and events are passed through the options object. For example, you can define events and handle a dateClick event like this:

<script>
  let options = {
    dateClick: (event) => alert('Date clicked: ' + event.dateStr),
    events: [
      { title: 'Event 1', date: '2025-03-30' },
      { title: 'Event 2', date: '2025-03-31' },
    ],
    initialView: 'dayGridMonth',
    plugins: [dayGridPlugin],
  };
</script>

<FullCalendar {options} />

Updating Options Dynamically

You can update the calendar options dynamically by reassigning the options object. For example, toggling the weekends option:

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

  let options = {
    initialView: 'dayGridMonth',
    plugins: [dayGridPlugin],
    weekends: true,
  };

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

<button on:click="{toggleWeekends}">Toggle Weekends</button>
<FullCalendar {options} />

Accessing the Calendar API

To access the underlying FullCalendar API, bind the component to a reference and use the getApi method:

<script>
  let calendarRef;

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

<FullCalendar bind:this="{calendarRef}" {options} />
<button on:click="{goToNextMonth}">Next Month</button>

Using Premium Plugins

To use premium plugins like FullCalendar Scheduler, install the required plugin and include your license key:

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

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

<FullCalendar {options} />

• Note: A valid license key is required to use premium plugins. You can obtain a license key by purchasing a subscription from the FullCalendar website.