
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
svelte-fullcalendar
Advanced tools
FullCalendar (almost) seamlessly integrates with the Svelte JavaScript compiler and the SvelteKit JavaScript framework. It provides a component that matches the functionality of FullCalendar's standard API.
This guide does not go into depth about initializing a Svelte/SvelteKit project. Please consult the example for that.
The first step is to install the FullCalendar-related dependencies. You'll need the Svelte adapter and some plugins to handle the styles.
npm install @fullcalendar/core @fullcalendar/common
npm install --save-dev svelte-preprocess svelte-fullcalendar
Then install any additional plugins you plan to use:
npm install @fullcalendar/daygrid
After that you should update your svelte.config.js
:
import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
adapter: adapter(),
+++ vite: {
+++ resolve: {
+++ dedupe: ['@fullcalendar/common'],
+++ },
+++ optimizeDeps: {
+++ include: ['@fullcalendar/common'],
+++ },
},
},
};
export default config;
You may then begin to write a parent component that leverages the <FullCalendar>
component:
<script lang="ts">
import type { CalendarOptions } from 'svelte-fullcalendar';
import FullCalendar from 'svelte-fullcalendar';
import daygridPlugin from '@fullcalendar/daygrid';
let options: CalendarOptions = {
initialView: 'dayGridMonth',
plugins: [daygridPlugin],
};
</script>
<FullCalendar {options} />
Here you can find a working example.
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:
<script>
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: [...],
};
</script>
<FullCalendar {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:
<script>
import FullCalendar from 'svelte-fullcalendar';
let options = {
initialView: dayGridMonth,
plugins: [...],
weekends: false,
};
function toggleWeekends() {
options = {
...options,
weekends: !options.weekends
};
}
</script>
<button on:click="{toggleWeekends}">toggle weekends</button>
<FullCalendar {options} />
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 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.
To do something like this, you’ll need to get ahold of the component’s ref (short for “reference”). In the template:
<FullCalendar bind:this="{calendarRef}" {options} />
Once you have the ref, you can get the underlying Calendar object via the getApi method:
<script>
let calendarRef;
function next() {
const calendarApi = calendarRef.getAPI();
calendarApi.next();
}
</script>
How do you use FullCalendar Scheduler's 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
:
<script>
import FullCalendar from 'svelte-fullcalendar';
let options = {
plugins: [(await import('@fullcalendar/resource-timeline')).default],
schedulerLicenseKey: 'your-license-key',
};
</script>
<FullCalendar {options} />
You'll need to install the interactionPlugin
:
npm install @fullcalendar/interaction
See the official docs for all available props.
Here is a simple usage example:
<script>
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
};
</script>
<Draggable eventData={{ title: 'my event', duration: '02:00' }}>
Drag me!
</Draggable>
<FullCalendar {options}/>
This component is released under the MIT license, same as the FullCalendar library.
[3.0.0] 2023-05-07
@fullcalendar/core
's version bumped to v6@fullcalendar/common
is no longer a peerDependencies and can be removedFAQs
A Svelte component wrapper around FullCalendar
The npm package svelte-fullcalendar receives a total of 1,213 weekly downloads. As such, svelte-fullcalendar popularity was classified as popular.
We found that svelte-fullcalendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.