diff --git a/app/music-room/page.tsx b/app/music-room/page.tsx index c10dbb2..320424c 100644 --- a/app/music-room/page.tsx +++ b/app/music-room/page.tsx @@ -92,7 +92,13 @@ export default function Page() {

Booking calendar

diff --git a/components/common/calendar/Calendar.tsx b/components/common/calendar/Calendar.tsx index ce6c925..e7e873d 100644 --- a/components/common/calendar/Calendar.tsx +++ b/components/common/calendar/Calendar.tsx @@ -12,13 +12,20 @@ import { useEffect, useMemo, useState } from "react"; import { useLocalStorage } from "usehooks-ts"; import iCalendarPlugin from "./iCalendarPlugin"; +export type URLType = + | string + | { + url: string; + color?: string; + }; + function Calendar({ urls, initialView = "listMonth", viewId = "", ...props }: { - urls: string[]; + urls: URLType[]; initialView?: string; viewId?: string; }) { @@ -39,13 +46,25 @@ function Calendar({ const calendar = useMemo( () => ( ({ url: url, format: "ics" }))} // Load events by url + eventSources={urls.map((url) => + typeof url === "string" + ? { + url: url, + format: "ics", + } + : { + url: url.url, + format: "ics", + color: url.color, + }, + )} // Load events by url eventsSet={(events) => { // Remove duplicates. // Accumulate 'extendedProps.calendarURLs' to use it later. const unique: Record = {}; for (const event of events) { - const uniqueId = event.title + event.startStr + event.endStr; + const uniqueId = + event.id || event.title + event.startStr + event.endStr; if (!(uniqueId in unique)) { unique[uniqueId] = event; } else { diff --git a/components/common/calendar/iCalendarPlugin/event-source-def.ts b/components/common/calendar/iCalendarPlugin/event-source-def.ts index e4df230..cf859f4 100644 --- a/components/common/calendar/iCalendarPlugin/event-source-def.ts +++ b/components/common/calendar/iCalendarPlugin/event-source-def.ts @@ -13,6 +13,7 @@ interface ICalFeedMeta { url: string; format: "ics"; // for EventSourceApi internalState?: InternalState; // HACK. TODO: use classes in future + color: string; // Default color for events from this feed } interface InternalState { @@ -26,6 +27,7 @@ export const eventSourceDef: EventSourceDef = { return { url: refined.url, format: "ics", + color: refined.color, }; } return null; @@ -118,7 +120,7 @@ function buildNonDateProps( id: iCalEvent.uid, title: iCalEvent.summary, url: extractEventUrl(iCalEvent), - color: iCalEvent.color, + color: iCalEvent.color || meta.color, extendedProps: { location: iCalEvent.location, organizer: iCalEvent.organizer,