{"id":13723565,"url":"https://github.com/YogliB/svelte-fullcalendar","last_synced_at":"2025-05-07T17:30:36.711Z","repository":{"id":35109796,"uuid":"207821889","full_name":"YogliB/svelte-fullcalendar","owner":"YogliB","description":"A Svelte component wrapper around FullCalendar","archived":true,"fork":false,"pushed_at":"2023-09-14T15:27:04.000Z","size":3940,"stargazers_count":198,"open_issues_count":4,"forks_count":21,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T04:37:43.839Z","etag":null,"topics":["calendar","component","fullcalendar","javascript","scheduler","svelte"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YogliB.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-11T13:39:55.000Z","updated_at":"2025-02-20T13:33:20.000Z","dependencies_parsed_at":"2024-06-20T02:48:33.056Z","dependency_job_id":"9df75c29-b7e0-4fd3-ac29-9ac3e1bb37ad","html_url":"https://github.com/YogliB/svelte-fullcalendar","commit_stats":{"total_commits":1016,"total_committers":11,"mean_commits":92.36363636363636,"dds":0.452755905511811,"last_synced_commit":"f9bc9d6b27bdcc51c54724854dafb0642bb4d640"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YogliB%2Fsvelte-fullcalendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YogliB%2Fsvelte-fullcalendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YogliB%2Fsvelte-fullcalendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YogliB%2Fsvelte-fullcalendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YogliB","download_url":"https://codeload.github.com/YogliB/svelte-fullcalendar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252926487,"owners_count":21826322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","component","fullcalendar","javascript","scheduler","svelte"],"created_at":"2024-08-03T01:01:42.930Z","updated_at":"2025-05-07T17:30:36.398Z","avatar_url":"https://github.com/YogliB.png","language":"JavaScript","funding_links":[],"categories":["components and libraries","UI Components"],"sub_categories":["time and date","Calendar"],"readme":"# 🔍 looking for a new mainteiner...\n## interested? [ping me](mailto:me@yogev.dev)\n\n[![Known Vulnerabilities](https://snyk.io/test/github/YogliB/svelte-fullcalendar/badge.svg)](https://snyk.io/test/github/YogliB/svelte-fullcalendar)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![install size](https://badgen.net/packagephobia/install/svelte-fullcalendar)](https://packagephobia.now.sh/result?p=svelte-fullcalendar)\n[![npm package version](https://badgen.net/npm/v/svelte-fullcalendar)](https://npm.im/svelte-fullcalendar)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v1.4%20adopted-ff69b4.svg)](CODE-OF-CONDUCT.md)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![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)\n\n# svelte-fullcalendar\n\nA Svelte 3 component-wrapper for [FullCalendar](https://fullcalendar.io).\n\n\u003e Please @mention me for any issue (I'm unwatching for [renovate](https://renovatebot.com) reasons)\n\nFullCalendar (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.\n## Setup\n\nFirst install the wrapper and related dependencies:\n\n```bash\nnpm install --save-dev svelte-fullcalendar\nnpm install --save-dev @fullcalendar/core\n```\n\nThen install any additional FullCalendar plugins you plan to use:\n\n```bash\nnpm install --save-dev @fullcalendar/daygrid\n```\n\n## Usage\n\nYou may then begin to write a parent component that leverages the `FullCalendar` wrapper component, including type definitions if you're using TypeScript:\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import FullCalendar, { type CalendarOptions } from 'svelte-fullcalendar';\n  import daygridPlugin from '@fullcalendar/daygrid';\n\n  let options: CalendarOptions = {\n    initialView: 'dayGridMonth',\n    plugins: [daygridPlugin]\n  };\n\u003c/script\u003e\n\n\u003cFullCalendar {options} /\u003e\n```\n\n**Note:** You must initialize the calendar with _at least one_ plugin which provides a view.\n\n## Example\n\n[Here you can find a working SvelteKit example](https://github.com/YogliB/svelte-fullcalendar/tree/master/examples/kit).\n\n## Props and Emitted Events\n\nFor 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:\n\n```html\n\u003cscript\u003e\n  let options = {\n    dateClick: (event) =\u003e alert('date click! ' + event.dateStr),\n    events: [\n      { title: 'event 1', date: '2019-04-01' },\n      { title: 'event 2', date: '2019-04-02' },\n    ],\n    initialView: dayGridMonth,\n    plugins: [...],\n  };\n\u003c/script\u003e\n\n\u003cFullCalendar {options} /\u003e\n```\n\n## Modifying Options\n\nYou 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:\n\n```html\n\u003cscript\u003e\n  import FullCalendar from 'svelte-fullcalendar';\n\n  let options = {\n    initialView: dayGridMonth,\n    plugins: [...],\n    weekends: false,\n  };\n\n  function toggleWeekends() {\n    options = {\n      ...options,\n      weekends: !options.weekends\n    };\n  }\n\u003c/script\u003e\n\n\u003cbutton on:click={toggleWeekends}\u003etoggle weekends\u003c/button\u003e\n\u003cFullCalendar {options} /\u003e\n```\n\n## Calendar API\n\nHopefully you won’t need to do it often, but sometimes it’s useful to access the underlying `Calendar` object for raw data and methods.\n\nThis 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).\n\nTo do something like this, you’ll need to get ahold of the component’s ref (short for “reference”). In the template:\n\n```html\n\u003cFullCalendar bind:this={calendarRef} {options} /\u003e\n```\n\nOnce you have the ref, you can get the underlying Calendar object via the getApi method:\n\n```html\n\u003cscript\u003e\n  let calendarRef;\n\n  function next() {\n    const calendarApi = calendarRef.getAPI();\n    calendarApi.next();\n  }\n\u003c/script\u003e\n```\n\n## Scheduler\n\nHow 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`:\n\n```html\n\u003cscript\u003e\n  import FullCalendar from 'svelte-fullcalendar';\n  import resourceTimelinePlugin from '@fullcalendar/resource-timeline';\n\n  let options = {\n    plugins: [resourceTimelinePlugin],\n    schedulerLicenseKey: 'your-license-key',\n  };\n\u003c/script\u003e\n\n\u003cFullCalendar {options} /\u003e\n```\n\nUntil 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.\n\n## Draggable external events\n\nYou'll need to install the `interactionPlugin`:\n\n```bash\nnpm install --save-dev @fullcalendar/interaction\n```\n\nSee the [official docs](https://fullcalendar.io/docs/external-dragging) for all available props.\n\nHere is a simple usage example:\n\n```html\n\u003cscript\u003e\n  import FullCalendar, { Draggable } from 'svelte-fullcalendar';\n  import resourceTimelinePlugin from '@fullcalendar/resource-timeline';\n  import interactionPlugin from '@fullcalendar/interaction';\n  \n  let options = {\n    schedulerLicenseKey: \"XXX\",\n    plugins: [resourceTimelinePlugin, interactionPlugin],\n    droppable: true\n  };\n\u003c/script\u003e\n\n\u003cDraggable eventData={{ title: 'my event', duration: '02:00' }}\u003e\n  Drag me!\n\u003c/Draggable\u003e\n\n\u003cFullCalendar {options}/\u003e\n```\n\n## License\n\nThis component is released under the MIT license, same as the FullCalendar library.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://vhs.codeberg.page\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/97140109?v=4?s=100\" width=\"100px;\" alt=\"vhs\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003evhs\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YogliB/svelte-fullcalendar/commits?author=vhscom\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://www.benmccann.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/322311?v=4?s=100\" width=\"100px;\" alt=\"Ben McCann\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBen McCann\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YogliB/svelte-fullcalendar/commits?author=benmccann\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/YogliB/svelte-fullcalendar/commits?author=benmccann\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYogliB%2Fsvelte-fullcalendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FYogliB%2Fsvelte-fullcalendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYogliB%2Fsvelte-fullcalendar/lists"}