Use luxon to set title format

package.json

@@ -28,9 +28,11 @@
     "@babel/runtime": "^7.19.0",
     "@fullcalendar/core": "^5.11.3",
     "@fullcalendar/icalendar": "^5.11.3",
+    "@fullcalendar/luxon2": "^5.11.3",
     "@fullcalendar/resource-timegrid": "^5.11.3",
     "core-js": "^3.25.5",
     "intl": "^1.2.5",
+    "luxon": "^3.0.4",
     "unique-colors": "^1.0.1"
   }
 }

pnpm-lock.yaml

@@ -7,6 +7,7 @@ specifiers:
   '@babel/runtime': ^7.19.0
   '@fullcalendar/core': ^5.11.3
   '@fullcalendar/icalendar': ^5.11.3
+  '@fullcalendar/luxon2': ^5.11.3
   '@fullcalendar/resource-timegrid': ^5.11.3
   '@types/intl': ^1.2.0
   babel-loader: ^8.2.5
@@ -14,6 +15,7 @@ specifiers:
   css-loader: ^6.7.1
   file-loader: ^6.2.0
   intl: ^1.2.5
+  luxon: ^3.0.4
   style-loader: ^3.3.1
   ts-loader: ^9.4.1
   typescript: ^4.8.4
@@ -26,9 +28,11 @@ dependencies:
   '@babel/runtime': 7.19.0
   '@fullcalendar/core': 5.11.3
   '@fullcalendar/icalendar': 5.11.3
+  '@fullcalendar/luxon2': 5.11.3_luxon@3.0.4
   '@fullcalendar/resource-timegrid': 5.11.3
   core-js: 3.25.5
   intl: 1.2.5
+  luxon: 3.0.4
   unique-colors: 1.0.1
 
 devDependencies:
@@ -1246,6 +1250,16 @@ packages:
       tslib: 2.4.0
     dev: false
 
+  /@fullcalendar/luxon2/5.11.3_luxon@3.0.4:
+    resolution: {integrity: sha512-facQYF87ovrw1dOaEDG/oQevV4sgrTWSAsV43upIY8FLKkgVQYT3JR6/aG99CL9ceMmOxdBiwF5pQEsVuGmb4A==}
+    peerDependencies:
+      luxon: ^2.0.0
+    dependencies:
+      '@fullcalendar/common': 5.11.3
+      luxon: 3.0.4
+      tslib: 2.4.0
+    dev: false
+
   /@fullcalendar/premium-common/5.11.3:
     resolution: {integrity: sha512-fvMU8OmIReBXoY1iOkRO+zGwbUHA1YB9xtkYbSL3ZeMQ008P0Lj6ar7Jv/lB5XDRgh50TRfFIgfDjdszESAc4w==}
     dependencies:
@@ -2753,6 +2767,11 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /luxon/3.0.4:
+    resolution: {integrity: sha512-aV48rGUwP/Vydn8HT+5cdr26YYQiUZ42NM6ToMoaGKwYfWbfLeRkEu1wXWMHBZT6+KyLfcbbtVcoQFCbbPjKlw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /make-dir/3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}

src/index.ts

@@ -7,6 +7,7 @@ window.Intl = Intl;
 
 import { Calendar, CalendarOptions } from '@fullcalendar/core';
 import iCalendarPlugin from '@fullcalendar/icalendar';
+import luxon2Plugin from '@fullcalendar/luxon2';
 import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
 
 import { unique_colors } from 'unique-colors';
@@ -31,10 +32,11 @@ const toolFilter: string[] | undefined = urlParams.get('tool')?.split(';');
 
 const calendarOptions: CalendarOptions = {
   schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
-  plugins: [iCalendarPlugin, resourceTimeGridPlugin],
+  plugins: [iCalendarPlugin, luxon2Plugin, resourceTimeGridPlugin],
   allDaySlot: false,
   nowIndicator: true,
   headerToolbar: { start: '', center: 'title', end: '' },
+  titleFormat: "'Reservations for ' cccc LLLL d, yyyy",
   initialView: 'resourceTimeGrid',
   height: 'auto',
   slotMinTime: '8:00',