Add links to google calendar/iCal

package.json

@@ -28,6 +28,7 @@
     "@babel/runtime": "^7.19.0",
     "@fullcalendar/core": "^5.11.3",
     "@fullcalendar/icalendar": "^5.11.3",
+    "@fullcalendar/resource-common": "^5.11.3",
     "@fullcalendar/resource-timegrid": "^5.11.3",
     "@fullcalendar/resource-timeline": "^5.11.3",
     "@fullcalendar/timegrid": "^5.11.3",

pnpm-lock.yaml

@@ -7,6 +7,7 @@ specifiers:
   '@babel/runtime': ^7.19.0
   '@fullcalendar/core': ^5.11.3
   '@fullcalendar/icalendar': ^5.11.3
+  '@fullcalendar/resource-common': ^5.11.3
   '@fullcalendar/resource-timegrid': ^5.11.3
   '@fullcalendar/resource-timeline': ^5.11.3
   '@fullcalendar/timegrid': ^5.11.3
@@ -29,6 +30,7 @@ dependencies:
   '@babel/runtime': 7.19.0
   '@fullcalendar/core': 5.11.3
   '@fullcalendar/icalendar': 5.11.3
+  '@fullcalendar/resource-common': 5.11.3
   '@fullcalendar/resource-timegrid': 5.11.3
   '@fullcalendar/resource-timeline': 5.11.3
   '@fullcalendar/timegrid': 5.11.3

src/common.ts

@@ -86,11 +86,14 @@ export const common_calendarOptions: CalendarOptions = {
     minute: '2-digit',
     hour12: false,
   },
-  resources: Object.entries(shops).map(([shop, tools]) => {
+  resources: Object.entries(shops).map(([shop_name, shop]) => {
     return {
-      id: shop,
-      title: shop,
-      children: tools.children?.map((tool) => {
+      id: shop_name,
+      title: shop_name,
+      extendedProps: {
+        calendar: shop.calendar,
+      },
+      children: shop.children?.map((tool) => {
         return {
           id: tool,
           title: tool,

src/index.ts

@@ -1,5 +1,6 @@
 import '@fullcalendar/core';
 import { CalendarOptions, EventContentArg } from '@fullcalendar/core';
+import { ResourceLabelContentArg } from '@fullcalendar/resource-common';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
 import { createElement } from 'preact';
@@ -24,6 +25,23 @@ const calendarOptions: CalendarOptions = {
     resourceTimeline: 'day',
   },
   initialView: 'resourceTimeline',
+  resourceLabelContent: (
+    arg: ResourceLabelContentArg,
+    h: typeof createElement
+  ) => {
+    const calendar = arg.resource.extendedProps.calendar;
+    if (calendar) {
+      const embed_link = `https://calendar.google.com/calendar/embed?ctz=America%2FNew_York&src=${calendar}`;
+      const ical_link = `https://calendar.google.com/calendar/ical/${calendar}/public/basic.ics`;
+      return h(
+        'span',
+        null,
+        h('a', { href: embed_link }, arg.resource.title),
+        ' ',
+        h('a', { href: ical_link }, ' [iCal 📅]')
+      );
+    }
+  },
   eventContent: (arg: EventContentArg, h: typeof createElement) => {
     if (arg.view.type != 'resourceTimeline') {
       let resources = arg.event