Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 2 months 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 (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-09-14T15:27:04.000Z (over 1 year ago)
- Last Synced: 2024-11-08T11:15:55.746Z (2 months ago)
- Topics: calendar, component, fullcalendar, javascript, scheduler, svelte
- Language: JavaScript
- Size: 3.76 MB
- Stars: 197
- Watchers: 2
- Forks: 22
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Code of conduct: CODE-OF-CONDUCT.md
Awesome Lists containing this project
- 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.
## SetupFirst 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)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!