Show day (timeline) and week view in non-wall-display view

package.json

@@ -29,6 +29,8 @@
     "@fullcalendar/core": "^5.11.3",
     "@fullcalendar/icalendar": "^5.11.3",
     "@fullcalendar/resource-timegrid": "^5.11.3",
+    "@fullcalendar/resource-timeline": "^5.11.3",
+    "@fullcalendar/timegrid": "^5.11.3",
     "core-js": "^3.25.5",
     "intl": "^1.2.5",
     "unique-colors": "^1.0.1"

pnpm-lock.yaml

@@ -8,6 +8,8 @@ specifiers:
   '@fullcalendar/core': ^5.11.3
   '@fullcalendar/icalendar': ^5.11.3
   '@fullcalendar/resource-timegrid': ^5.11.3
+  '@fullcalendar/resource-timeline': ^5.11.3
+  '@fullcalendar/timegrid': ^5.11.3
   '@types/intl': ^1.2.0
   babel-loader: ^8.2.5
   core-js: ^3.25.5
@@ -27,6 +29,8 @@ dependencies:
   '@fullcalendar/core': 5.11.3
   '@fullcalendar/icalendar': 5.11.3
   '@fullcalendar/resource-timegrid': 5.11.3
+  '@fullcalendar/resource-timeline': 5.11.3
+  '@fullcalendar/timegrid': 5.11.3
   core-js: 3.25.5
   intl: 1.2.5
   unique-colors: 1.0.1
@@ -1282,6 +1286,25 @@ packages:
       tslib: 2.4.0
     dev: false
 
+  /@fullcalendar/resource-timeline/5.11.3:
+    resolution: {integrity: sha512-iYIXZPfqtiN/qizpGDCYlFVssdDTZv6lU/5N1v0FzvGMZfU2LkHLhCkouQeBQHja8ZCbJisy4sK3kUR9mXh2cg==}
+    dependencies:
+      '@fullcalendar/common': 5.11.3
+      '@fullcalendar/premium-common': 5.11.3
+      '@fullcalendar/resource-common': 5.11.3
+      '@fullcalendar/scrollgrid': 5.11.3
+      '@fullcalendar/timeline': 5.11.3
+      tslib: 2.4.0
+    dev: false
+
+  /@fullcalendar/scrollgrid/5.11.3:
+    resolution: {integrity: sha512-JTWDmejPmit65pCoQafUPeplI2+iogXG/3TNbusXMSWYaaMrINHDQiBZ/6EAt46hO2eWyEglmgS0BwVXZNSlGg==}
+    dependencies:
+      '@fullcalendar/common': 5.11.3
+      '@fullcalendar/premium-common': 5.11.3
+      tslib: 2.4.0
+    dev: false
+
   /@fullcalendar/timegrid/5.11.3:
     resolution: {integrity: sha512-SjIj2ZQ7nTyL1RxZkCPvNbuUQ0xHT+gfYJdUL3FT4bPjPJCxWtQ2CL8hxaeNmVozYYuy0yrGTW5Oup2+9IplbA==}
     dependencies:
@@ -1290,6 +1313,15 @@ packages:
       tslib: 2.4.0
     dev: false
 
+  /@fullcalendar/timeline/5.11.3:
+    resolution: {integrity: sha512-nbMJ2gG9mLGUZgGUB2O726u3D8EFxJkZsKA/O1053j5QiQ7C8Wca1rh8UX+bed/s+wmkWwKV5pB0CiOax4f3gQ==}
+    dependencies:
+      '@fullcalendar/common': 5.11.3
+      '@fullcalendar/premium-common': 5.11.3
+      '@fullcalendar/scrollgrid': 5.11.3
+      tslib: 2.4.0
+    dev: false
+
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}

src/index.ts

@@ -1,5 +1,37 @@
+import '@fullcalendar/core';
+import { CalendarOptions } from '@fullcalendar/core';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
+
 import { common_calendarOptions, main } from './common';
 
 import './index.html';
 
-main(common_calendarOptions);
+const calendarOptions: CalendarOptions = {
+  ...common_calendarOptions,
+  plugins: [
+    ...(common_calendarOptions.plugins ?? []),
+    timeGridPlugin,
+    resourceTimelinePlugin,
+  ],
+  headerToolbar: {
+    start: 'resourceTimeline,timeGridWeek',
+    center: 'title',
+    end: 'prev,next today',
+  },
+  buttonText: {
+    resourceTimeline: 'day',
+  },
+  initialView: 'resourceTimeline',
+  eventContent: (arg) => {
+    if (arg.view.type != 'resourceTimeline') {
+      let resources = arg.event
+        .getResources()
+        .map((resource) => resource.id)
+        .join('; ');
+      return `${resources}: ${arg.event.title} ${arg.timeText}`;
+    }
+  },
+};
+
+main(calendarOptions, true);