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,