metis/src/EventModal.svelte

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

  const md = new Remarkable({ breaks: true });

  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}>
    <span class="pe-3">
      <Badge color="custom" style="background-color:{event.backgroundColor}"
        >{event.extendedProps.calendar}</Badge
      >
    </span>
    <b>{event.extendedProps.short_name}</b>
  </ModalHeader>
  <ModalBody>
    {#if event.extendedProps.description}
      {@html md.render(event.extendedProps.description)}
    {:else}
      <i>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>