Utilise short_name

src/EventModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';
+  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon, Badge } from 'sveltestrap';
 
   export let event = undefined;
   export let open = undefined;
@@ -13,7 +13,14 @@
 </script>
 
 <Modal isOpen={open} {toggle} centered scrollable>
-  <ModalHeader {toggle}>{event.title}</ModalHeader>
+  <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}
       {#each event.extendedProps.description.split('\n') as line}

src/calendar.js

@@ -55,6 +55,7 @@ class Calendar {
   constructor(id, calendar) {
     const metadata = calendars[id]
     this.name = metadata.name
+    this.short_name = metadata.short_name
     this.color = metadata.color || calendar[1][4][3]
     this.events = calendar[2]
       .filter(item => item[0] === 'vevent')
@@ -75,12 +76,16 @@ function fcEventFromjCalEvent(cal) {
     const start = new Date(evt.dtstart)
     const end = new Date(evt.dtend)
     const fcEvent = {
-      title: `${cal.name}: ${evt.summary}`,
+      title: `${cal.short_name ?? cal.name} : ${evt.summary}`,
       start: evt.dtstart,
       end: evt.dtend,
       color: cal.color,
       duration: end - start // in ms
     }
+    console.log(cal)
+
+    fcEvent.calendar = cal.name
+    fcEvent.short_name = evt.summary
 
     if (evt.description) {
       fcEvent.description = evt.description