Svelte Fullcalendar

<script>

import FullCalendar from "svelte-fullcalendar";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import BaseHeader from "../../components/BaseHeader.svelte";
import BaseButton from "../../components/BaseButton.svelte";
import RouteBreadcrumb from "../../components/Breadcrumb/RouteBreadcrumb.svelte";
import Card from "../../components/Cards/Card.svelte";
import Modal from "../../components/Modal.svelte";
import BaseInput from "../../components/Inputs/BaseInput.svelte";
import "~@fullcalendar/core/main.css";
import "~@fullcalendar/core/main.css";
import "~@fullcalendar/daygrid/main.css";
import "~@fullcalendar/timegrid/main.css";
import "~@fullcalendar/interaction/main.css";

export let name = "Calendar";
export let parent = "";
let calendarPlugins = [dayGridPlugin, timeGridPlugin, interactionPlugin];
let defaultView = "dayGridMonth";
const today = new Date();
const y = today.getFullYear();
const m = today.getMonth();
const d = today.getDate();
let yearAndMonth;
if (m + 1 < 10) {
  yearAndMonth = `${y}-0${m + 1}`;
} else {
  yearAndMonth = `${y}-${m + 1}`;
}

let events = [
  {
    title: "Call with Dave",
    start: `${yearAndMonth}-18`,
    end: `${yearAndMonth}-18`,
    className: "bg-red",
    allDay: true
  },

  {
    title: "Lunch meeting",
    start: `${yearAndMonth}-21`,
    end: `${yearAndMonth}-22`,
    className: "bg-orange",
    allDay: true
  },

  {
    title: "All day conference",
    start: `${yearAndMonth}-29`,
    end: `${yearAndMonth}-29`,
    className: "bg-green",
    allDay: true
  }
];

</script>

<Card noBody className="card-calendar card">
  <!-- Card header -->
  <div slot="header">
    <!-- Title -->
    <h5 class="h3 mb-0">Calendar</h5>
  </div>
  <!-- Card body -->
  <div class="card-body p-0 card-calendar-body">
    <FullCalendar
      bind:this={calendarRef}
      {events}
      defaultDate={today}
      plugins={calendarPlugins}
      editable="true"
      contentHeight="auto"
      theme="false"
      selectable="true"
      selectHelper="true"
      ref="fullCalendar"
      class="calendar"
      on:dateClick={event => onDateClick(event.detail)}
      on:eventClick={event => onEventClick(event.detail)}
      {defaultView} />
  </div>
</Card>