New modal event
This commit is contained in:
parent
03e284b7dc
commit
c2f3158b6f
2 changed files with 36 additions and 10 deletions
|
@ -8,8 +8,7 @@
|
||||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||||
import listPlugin from '@fullcalendar/list';
|
import listPlugin from '@fullcalendar/list';
|
||||||
import frLocale from '@fullcalendar/core/locales/fr';
|
import frLocale from '@fullcalendar/core/locales/fr';
|
||||||
import Modal, { bind } from 'svelte-simple-modal';
|
import EventModal from './EventModal.svelte';
|
||||||
import EventDetails from './EventDetails.svelte';
|
|
||||||
import FilterBar from './FilterBar.svelte';
|
import FilterBar from './FilterBar.svelte';
|
||||||
import { refreshEvents, calendarTree } from './calendar';
|
import { refreshEvents, calendarTree } from './calendar';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
|
@ -18,7 +17,11 @@
|
||||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||||
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
|
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
|
||||||
|
|
||||||
const modal = writable(null);
|
const event = writable(null);
|
||||||
|
|
||||||
|
let openModal = false;
|
||||||
|
const toggle = () => (openModal = !openModal);
|
||||||
|
|
||||||
let calendar;
|
let calendar;
|
||||||
|
|
||||||
let options = writable({
|
let options = writable({
|
||||||
|
@ -42,7 +45,8 @@
|
||||||
nowIndicator: true,
|
nowIndicator: true,
|
||||||
now: new Date(),
|
now: new Date(),
|
||||||
eventClick: info => {
|
eventClick: info => {
|
||||||
modal.set(bind(EventDetails, { event: info.event }));
|
openModal = true;
|
||||||
|
event.set(info.event);
|
||||||
},
|
},
|
||||||
events: [],
|
events: [],
|
||||||
themeSystem: 'bootstrap5'
|
themeSystem: 'bootstrap5'
|
||||||
|
@ -79,12 +83,11 @@
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
|
<h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
|
||||||
<div style="height: 100%; display: flex;">
|
<div style="height: 100%; display: flex;">
|
||||||
<Modal show={$modal}>
|
<FilterBar {calendarTree} bind:selected={selectedCalendars} />
|
||||||
<FilterBar {calendarTree} bind:selected={selectedCalendars} />
|
<div style="flex: 1;">
|
||||||
<div style="flex: 1;">
|
<FullCalendar bind:this={calendar} options={$options} />
|
||||||
<FullCalendar bind:this={calendar} options={$options} />
|
</div>
|
||||||
</div>
|
<EventModal event={$event} open={openModal} {toggle} />
|
||||||
</Modal>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
23
src/EventModal.svelte
Normal file
23
src/EventModal.svelte
Normal 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>
|
Loading…
Reference in a new issue