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>
  {#if event.extendedProps.description}
    <ModalBody>
      {#each event.extendedProps.description.split('\n') as line}
        <p>{line}</p>
      {/each}
    </ModalBody>
  {/if}

  <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" />
        <span class="ms-1">{timeFormat(event.start)} - {timeFormat(event.end)}</span>
      {/if}
    </span>
  </ModalFooter>
</Modal>