Replicate the structure of event content in week view

Keeps the classes/formatting

package.json

@@ -33,6 +33,7 @@
     "@fullcalendar/timegrid": "^5.11.3",
     "core-js": "^3.25.5",
     "intl": "^1.2.5",
+    "preact": "^10.11.1",
     "unique-colors": "^1.0.1"
   }
 }

pnpm-lock.yaml

@@ -16,6 +16,7 @@ specifiers:
   css-loader: ^6.7.1
   file-loader: ^6.2.0
   intl: ^1.2.5
+  preact: ^10.11.1
   style-loader: ^3.3.1
   ts-loader: ^9.4.1
   typescript: ^4.8.4
@@ -33,6 +34,7 @@ dependencies:
   '@fullcalendar/timegrid': 5.11.3
   core-js: 3.25.5
   intl: 1.2.5
+  preact: 10.11.1
   unique-colors: 1.0.1
 
 devDependencies:

src/index.ts

@@ -1,7 +1,8 @@
 import '@fullcalendar/core';
-import { CalendarOptions } from '@fullcalendar/core';
+import { CalendarOptions, EventContentArg } from '@fullcalendar/core';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
+import { createElement } from 'preact';
 
 import { common_calendarOptions, main } from './common';
 
@@ -23,13 +24,30 @@ const calendarOptions: CalendarOptions = {
     resourceTimeline: 'day',
   },
   initialView: 'resourceTimeline',
-  eventContent: (arg) => {
+  eventContent: (arg: EventContentArg, h: typeof createElement) => {
     if (arg.view.type != 'resourceTimeline') {
       let resources = arg.event
         .getResources()
-        .map((resource) => resource.id)
+        .map((resource) => resource.id.trim())
         .join('; ');
-      return `${resources}: ${arg.event.title} ${arg.timeText}`;
+      return h(
+        'div',
+        { class: 'fc-event-main' },
+        h(
+          'div',
+          { class: 'fc-event-main-frame' },
+          h('div', { class: 'fc-event-time' }, arg.timeText),
+          h(
+            'div',
+            { class: 'fc-event-title-container' },
+            h(
+              'div',
+              { class: 'fc-event-title fc-sticky' },
+              `${resources}: ${arg.event.title}`
+            )
+          )
+        )
+      );
     }
   },
 };