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;
</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 class="justify-content-start">
      <Icon name="geo" />
      <span>{event.extendedProps.location}</span>
    </ModalFooter>
  {/if}
</Modal>