feat: support event details / description on click

package-lock.json

@@ -2532,6 +2532,11 @@
         "@fullcalendar/interaction": "^5.0.0"
       }
     },
+    "svelte-simple-modal": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/svelte-simple-modal/-/svelte-simple-modal-1.3.1.tgz",
+      "integrity": "sha512-xBeK7VkGBuvqIm1J5eqnLqGIRKDtnsYzu8yVCLuO4rIuv4BMj4S6r0PGMgd4EFMgZwhmmqZPdrsPCDlDC6HUCw=="
+    },
     "svgo": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "@nextcloud/cdav-library": "^1.0.0",
     "ical.js": "^1.5.0",
     "rrule": "^2.6.8",
-    "sirv-cli": "^1.0.0"
+    "sirv-cli": "^1.0.0",
+    "svelte-simple-modal": "^1.3.1"
   }
 }

rollup.config.js

@@ -60,7 +60,7 @@ export default {
 		// https://github.com/rollup/plugins/tree/master/packages/commonjs
 		resolve({
 			browser: true,
-			dedupe: ['svelte']
+			dedupe: ['svelte', 'svelte/transition', 'svelte/internal']
 		}),
 		commonjs(),
 

src/App.svelte

@@ -1,12 +1,17 @@
 <script>
   import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
   import FullCalendar from 'svelte-fullcalendar';
   import timeGridPlugin from '@fullcalendar/timegrid';
   import rrulePlugin from '@fullcalendar/rrule';
   import dayGridPlugin from '@fullcalendar/daygrid';
   import frLocale from '@fullcalendar/core/locales/fr';
+  import Modal, { bind } from 'svelte-simple-modal';
+  import EventDetails from './EventDetails.svelte';
   import { refreshEvents, calendarTree } from './calendar';
 
+  const modal = writable(null);
+
   let options = {
     initialView: 'timeGridWeek',
     plugins: [timeGridPlugin, dayGridPlugin, rrulePlugin],
@@ -15,6 +20,9 @@
     schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
     nowIndicator: true,
     now: new Date(),
+    eventClick: info => {
+      modal.set(bind(EventDetails, { event: info.event }));
+    },
     events: []
   };
 
@@ -32,8 +40,10 @@
 <div class="app-container">
   <h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
   <div style="height: 100%;">
-  <!-- <FilterBar {calendarTree} {selectedCalendars}> -->
+<!-- <FilterBar {calendarTree} {selectedCalendars}> -->
-    <FullCalendar {options} />
+      <Modal show={$modal}>
+        <FullCalendar {options} />
+      </Modal>
   </div>
 </div>
 

src/EventDetails.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let event = null;
+</script>
+
+<h1>{event.title}</h1>
+<hr />
+{#if event.extendedProps.description}
+  {#each event.extendedProps.description.split("\n") as line}
+    <p>{line}</p>
+  {/each}
+{/if}

src/calendar.js

@@ -52,6 +52,7 @@ function fcEventFromjCalEvent(cal) {
     const fcEvent = {
       title: `${cal.name}: ${evt.summary}`,
       start,
+      end,
       color: cal.color,
       duration: end - start // in ms
     };