New modal event

This commit is contained in:
Tom Hubrecht 2022-03-06 00:59:36 +01:00
parent 03e284b7dc
commit c2f3158b6f
2 changed files with 36 additions and 10 deletions

View file

@ -8,8 +8,7 @@
import dayGridPlugin from '@fullcalendar/daygrid';
import listPlugin from '@fullcalendar/list';
import frLocale from '@fullcalendar/core/locales/fr';
import Modal, { bind } from 'svelte-simple-modal';
import EventDetails from './EventDetails.svelte';
import EventModal from './EventModal.svelte';
import FilterBar from './FilterBar.svelte';
import { refreshEvents, calendarTree } from './calendar';
import { debounce } from 'lodash';
@ -18,7 +17,11 @@
import 'bootstrap-icons/font/bootstrap-icons.css';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
const modal = writable(null);
const event = writable(null);
let openModal = false;
const toggle = () => (openModal = !openModal);
let calendar;
let options = writable({
@ -42,7 +45,8 @@
nowIndicator: true,
now: new Date(),
eventClick: info => {
modal.set(bind(EventDetails, { event: info.event }));
openModal = true;
event.set(info.event);
},
events: [],
themeSystem: 'bootstrap5'
@ -79,12 +83,11 @@
<div class="app-container">
<h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
<div style="height: 100%; display: flex;">
<Modal show={$modal}>
<FilterBar {calendarTree} bind:selected={selectedCalendars} />
<div style="flex: 1;">
<FullCalendar bind:this={calendar} options={$options} />
</div>
</Modal>
<FilterBar {calendarTree} bind:selected={selectedCalendars} />
<div style="flex: 1;">
<FullCalendar bind:this={calendar} options={$options} />
</div>
<EventModal event={$event} open={openModal} {toggle} />
</div>
</div>

23
src/EventModal.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';
export let event = undefined;
export let open = undefined;
export let toggle = undefined;
</script>
<Modal isOpen={open} {toggle} centered scrollable>
<ModalHeader {toggle}>{event.title}</ModalHeader>
{#if event.extendedProps.description}
<ModalBody>
{#each event.extendedProps.description.split('\n') as line}
<p>{line}</p>
{/each}
</ModalBody>
{/if}
{#if event.extendedProps.location}
<ModalFooter>
<Icon name="geo" />
</ModalFooter>
{/if}
</Modal>