From 473fe22fb10969a745552ba1787e35950161b2b1 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Fri, 14 Oct 2022 11:41:01 -0400
Subject: [PATCH] Replicate the structure of event content in week view

Keeps the classes/formatting
---
 package.json   |  1 +
 pnpm-lock.yaml |  2 ++
 src/index.ts   | 26 ++++++++++++++++++++++----
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 8ca23eb..57e7909 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a10f354..63051f8 100644
--- a/pnpm-lock.yaml
+++ b/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:
diff --git a/src/index.ts b/src/index.ts
index 38d0303..e76e5cd 100644
--- a/src/index.ts
+++ b/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}`
+            )
+          )
+        )
+      );
     }
   },
 };