fullcalendar-svelte/README.md

A SvelteKit component for FullCalendar with Svelte 5

# fullcalendar-svelte

## A SvelteKit wrapper for [FullCalendar](https://fullcalendar.io)

## Installation

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

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

Install any additional plugins you need for your calendar:

```bash
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:

```html
<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:

```html
<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:

```html
<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:

```html
<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](https://fullcalendar.io/docs/premium), install the required plugin and include your license key:

```html
<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](https://fullcalendar.io/pricing).