metis/src/EventModal.svelte

<script>
  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';

  export let event = undefined;
  export let open = undefined;
  export let toggle = undefined;

  const timeFormat = d =>
    d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

  const dateFormat = d =>
    d.toLocaleDateString('fr-FR', { month: '2-digit', day: '2-digit' });
</script>

<Modal isOpen={open} {toggle} centered scrollable>
  <ModalHeader {toggle}>{event.title}</ModalHeader>
  <ModalBody>
    {#if event.extendedProps.description}
      {#each event.extendedProps.description.split('\n') as line}
        <p>{line}</p>
      {/each}
    {:else}
      <i class="fs-6">Pas de description</i>
    {/if}
  </ModalBody>

  <ModalFooter class="justify-content-between">
    <span>
      {#if event.extendedProps.location}
        <Icon name="geo" />
        <span class="ms-1">{event.extendedProps.location}</span>
      {/if}
    </span>

    <span>
      {#if event.allDay}
        <Icon name="calendar-range" />
        <span class="ms-1">{dateFormat(event.start)} - {dateFormat(event.end)}</span>
      {:else}
        <Icon name="clock-history" />
        <span class="ms-1">{timeFormat(event.start)} - {timeFormat(event.end)}</span>
      {/if}
    </span>
  </ModalFooter>
</Modal>