feat: support event details / description on click
This commit is contained in:
parent
15f203426e
commit
6053feff3b
5
package-lock.json
generated
5
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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(),
|
||||
|
||||
|
|
|
@ -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}> -->
|
||||
<FullCalendar {options} />
|
||||
<!-- <FilterBar {calendarTree} {selectedCalendars}> -->
|
||||
<Modal show={$modal}>
|
||||
<FullCalendar {options} />
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
11
src/EventDetails.svelte
Normal file
11
src/EventDetails.svelte
Normal 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}
|
|
@ -52,6 +52,7 @@ function fcEventFromjCalEvent(cal) {
|
|||
const fcEvent = {
|
||||
title: `${cal.name}: ${evt.summary}`,
|
||||
start,
|
||||
end,
|
||||
color: cal.color,
|
||||
duration: end - start // in ms
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue