https://github.com/YogliB/svelte-fullcalendar

A Svelte component wrapper around FullCalendar
https://github.com/YogliB/svelte-fullcalendar

calendar component fullcalendar javascript scheduler svelte

Last synced: about 1 month ago
JSON representation

A Svelte component wrapper around FullCalendar

• Host: GitHub
• URL: https://github.com/YogliB/svelte-fullcalendar
• Owner: YogliB
• License: mit
• Archived: true
• Created: 2019-09-11T13:39:55.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-09-14T15:27:04.000Z (9 months ago)
• Last Synced: 2024-05-05T16:44:58.092Z (about 2 months ago)
• Topics: calendar, component, fullcalendar, javascript, scheduler, svelte
• Language: JavaScript
• Size: 3.76 MB
• Stars: 198
• Watchers: 2
• Forks: 20
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Code of conduct: CODE-OF-CONDUCT.md

Lists

• awesome-svelte-resources - svelte-fullcalendar - (components and libraries / time and date)
• awesome-svelte - svelte-fullcalendar - A component wrapper around FullCalendar. (UI Components / Calendar)

README

        
# 🔍 looking for a new mainteiner...

## interested? [ping me](mailto:[email protected])

[![Known Vulnerabilities](https://snyk.io/test/github/YogliB/svelte-fullcalendar/badge.svg)](https://snyk.io/test/github/YogliB/svelte-fullcalendar)

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

[![install size](https://badgen.net/packagephobia/install/svelte-fullcalendar)](https://packagephobia.now.sh/result?p=svelte-fullcalendar)

[![npm package version](https://badgen.net/npm/v/svelte-fullcalendar)](https://npm.im/svelte-fullcalendar)

[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v1.4%20adopted-ff69b4.svg)](CODE-OF-CONDUCT.md)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/YogliB/svelte-fullcalendar)

# svelte-fullcalendar

A Svelte 3 component-wrapper for [FullCalendar](https://fullcalendar.io).

> Please @mention me for any issue (I'm unwatching for [renovate](https://renovatebot.com) reasons)

FullCalendar (almost) seamlessly integrates with the [Svelte](https://svelte.dev) JavaScript compiler and the [SvelteKit](https://kit.svelte.dev/) JavaScript framework. This wrapper provides a component that matches the functionality of FullCalendar's standard API.

## Setup

First install the wrapper and related dependencies:

```bash

npm install --save-dev svelte-fullcalendar

npm install --save-dev @fullcalendar/core

```

Then install any additional FullCalendar plugins you plan to use:

```bash

npm install --save-dev @fullcalendar/daygrid

```

## Usage

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

```html

  import FullCalendar, { type CalendarOptions } from 'svelte-fullcalendar';

  import daygridPlugin from '@fullcalendar/daygrid';

  let options: CalendarOptions = {

    initialView: 'dayGridMonth',

    plugins: [daygridPlugin]

  };

```

**Note:** You must initialize the calendar with _at least one_ plugin which provides a view.

## Example

[Here you can find a working SvelteKit example](https://github.com/YogliB/svelte-fullcalendar/tree/master/examples/kit).

## 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:

```html

  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: [...],

  };

```

## 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:

```html

  import FullCalendar from 'svelte-fullcalendar';

  let options = {

    initialView: dayGridMonth,

    plugins: [...],

    weekends: false,

  };

  function toggleWeekends() {

    options = {

      ...options,

      weekends: !options.weekends

    };

  }

toggle weekends

```

## 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](https://fullcalendar.io/docs/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](https://fullcalendar.io/docs/date-navigation).

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

```html

```

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

```html

  let calendarRef;

  function next() {

    const calendarApi = calendarRef.getAPI();

    calendarApi.next();

  }

```

## Scheduler

How do you use [FullCalendar Scheduler's](https://fullcalendar.io/docs/premium) 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`:

```html

  import FullCalendar from 'svelte-fullcalendar';

  import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

  let options = {

    plugins: [resourceTimelinePlugin],

    schedulerLicenseKey: 'your-license-key',

  };

```

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

```bash

npm install --save-dev @fullcalendar/interaction

```

See the [official docs](https://fullcalendar.io/docs/external-dragging) for all available props.

Here is a simple usage example:

```html

  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

  };

  Drag me!

```

## License

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

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
vhs
📖

      
Ben McCann
📖 💻

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!