feat: support event details / description on click

This commit is contained in:
Raito Bezarius 2022-02-21 23:25:31 +01:00
parent 15f203426e
commit 6053feff3b
6 changed files with 32 additions and 4 deletions

5
package-lock.json generated
View file

@ -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",

View file

@ -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"
}
}

View file

@ -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(),

View file

@ -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: []
};
@ -33,7 +41,9 @@
<h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
<div style="height: 100%;">
<!-- <FilterBar {calendarTree} {selectedCalendars}> -->
<Modal show={$modal}>
<FullCalendar {options} />
</Modal>
</div>
</div>

11
src/EventDetails.svelte Normal file
View file

@ -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}

View file

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