Use Resource TimeGrid view; we can use it for free since we are a non-profit

package.json

@@ -25,7 +25,7 @@
   "dependencies": {
     "@fullcalendar/core": "^5.10.0",
     "@fullcalendar/icalendar": "^5.10.1",
-    "@fullcalendar/timegrid": "^5.6.0",
+    "@fullcalendar/resource-timegrid": "^5.10.1",
     "core-js": "^3.19.1",
     "ical.js": "github:ekreative/ical.js#var-ical",
     "intl": "^1.2.5",

src/index.ts

@@ -8,9 +8,8 @@ if (!window.Intl) {
 }
 
 import { EventInput, Calendar, CalendarOptions } from '@fullcalendar/core';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import timeGridPlugin from '@fullcalendar/timegrid';
 import iCalendarPlugin from '@fullcalendar/icalendar';
+import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
 
 import { unique_colors } from 'unique-colors';
 
@@ -27,28 +26,30 @@ const calendars: { [key: string]: string } = {
 const colors: string[] = unique_colors(Object.keys(calendars).length);
 
 const urlParams = new URLSearchParams(window.location.search);
-const toolFilter: string | null = urlParams.get('tool');
+const toolFilter: string[] | undefined = urlParams.get('tool')?.split(';');
 
-function eventDataTransform(eventData: EventInput): EventInput | false {
+function eventDataTransform(eventData: EventInput): EventInput {
   // clear the url to prevent clicking on the event
   delete eventData.url;
 
   const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
   if (match) {
     const [, member, shop, tool] = match;
-    eventData.title = `${tool} - ${member}`;
-    if (toolFilter === null || tool.includes(toolFilter)) {
-      return eventData;
+    eventData.title = `${member}`;
+    eventData.resourceId = tool;
+    if (!toolFilter) {
+      calendar.addResource({ id: tool, title: tool }, false);
     }
   }
-  return false;
+  return eventData;
 }
 
 const calendarOptions: CalendarOptions = {
-  plugins: [timeGridPlugin, dayGridPlugin, iCalendarPlugin],
+  schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
+  plugins: [iCalendarPlugin, resourceTimeGridPlugin],
   allDaySlot: false,
   nowIndicator: true,
-  initialView: 'timeGridWeek',
+  initialView: 'resourceTimeGrid',
   height: 'auto',
   slotMinTime: '8:00',
   slotMaxTime: '22:00',
@@ -75,6 +76,14 @@ const calendarOptions: CalendarOptions = {
     minute: '2-digit',
     hour12: false,
   },
+  resources: toolFilter
+    ? toolFilter.map((tool) => {
+        return {
+          id: tool,
+          title: tool,
+        };
+      })
+    : [],
 };
 
 const calendarEl = document.getElementById('calendar');