Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
import FullCalendar, { Draggable } from 'svelte-fullcalendar';
import dayGridPlugin from '@fullcalendar/daygrid@4.4.2';
import timeGridPlugin from '@fullcalendar/timegrid@4.4.2';
import interactionPlugin from '@fullcalendar/interaction@4.4.2'; // needed for dayClick
let plugins = [dayGridPlugin, timeGridPlugin, interactionPlugin];
let calendarComponentRef;
let calendarWeekends = true;
let calendarEvents = [
// initial event data
{ title: 'Event Now', start: new Date() },
];
let eventData = { title: 'my event', duration: '02:00' };
function toggleWeekends() {
calendarWeekends = !calendarWeekends;
}
function gotoPast() {
let calendarApi = calendarComponentRef.getAPI();
calendarApi.gotoDate('2000-01-01'); // call a method on the Calendar object
}
function handleDateClick(arg) {
if (
confirm('Would you like to add an event to ' + arg.dateStr + ' ?')
) {
calendarEvents = [
...calendarEvents,
{
title: 'New Event',
start: arg.date,
allDay: arg.allDay,
},
];
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */