feat(integrations): add ICal (#3980)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-icons.ts

@@ -2,6 +2,7 @@ import {
   IconCode,
   IconGrid3x3,
   IconKey,
+  IconLink,
   IconMessage,
   IconPassword,
   IconPasswordUser,
@@ -21,6 +22,7 @@ export const integrationSecretIcons = {
   tokenId: IconGrid3x3,
   personalAccessToken: IconPasswordUser,
   topic: IconMessage,
+  url: IconLink,
   opnsenseApiKey: IconKey,
   opnsenseApiSecret: IconPassword,
   githubAppId: IconCode,

apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx

@@ -33,6 +33,8 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
       integration.secrets.every((secret) => secretKinds.includes(secret.kind)),
     ) ?? getDefaultSecretKinds(integration.kind);
 
+  const hasUrlSecret = secretsKinds.includes("url");
+
   const router = useRouter();
   const form = useZodForm(integrationUpdateSchema.omit({ id: true }), {
     initialValues: {
@@ -50,10 +52,14 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
 
   const handleSubmitAsync = async (values: FormType) => {
+    const url = hasUrlSecret
+      ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
+      : values.url;
     await mutateAsync(
       {
         id: integration.id,
         ...values,
+        url,
         secrets: values.secrets.map((secret) => ({
           kind: secret.kind,
           value: secret.value === "" ? null : secret.value,
@@ -92,7 +98,9 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
       <Stack>
         <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
 
-        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        {hasUrlSecret ? null : (
+          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        )}
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx

@@ -55,12 +55,19 @@ const formSchema = integrationCreateSchema.omit({ kind: true }).and(
 export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) => {
   const t = useI18n();
   const secretKinds = getAllSecretKindOptions(searchParams.kind);
+  const hasUrlSecret = secretKinds.some((kinds) => kinds.includes("url"));
   const router = useRouter();
   const [opened, setOpened] = useState(false);
+
+  let url = searchParams.url ?? getIntegrationDefaultUrl(searchParams.kind) ?? "";
+  if (hasUrlSecret) {
+    // Placeholder Url, replaced with origin of the secret Url on submit
+    url = "http://localhost";
+  }
   const form = useZodForm(formSchema, {
     initialValues: {
       name: searchParams.name ?? getIntegrationName(searchParams.kind),
-      url: searchParams.url ?? getIntegrationDefaultUrl(searchParams.kind) ?? "",
+      url,
       secrets: secretKinds[0].map((kind) => ({
         kind,
         value: "",
@@ -83,10 +90,14 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
   const [error, setError] = useState<null | AnyMappedTestConnectionError>(null);
 
   const handleSubmitAsync = async (values: FormType) => {
+    const url = hasUrlSecret
+      ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
+      : values.url;
     await createIntegrationAsync(
       {
         kind: searchParams.kind,
         ...values,
+        url,
       },
       {
         async onSuccess(data) {
@@ -114,10 +125,10 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
           await createAppAsync(
             {
               name: values.name,
-              href: hasCustomHref ? values.appHref : values.url,
+              href: hasCustomHref ? values.appHref : url,
               iconUrl: getIconUrl(searchParams.kind),
               description: null,
-              pingUrl: values.url,
+              pingUrl: url,
             },
             {
               async onSettled() {
@@ -149,7 +160,9 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
       <Stack>
         <TextInput withAsterisk label={t("integration.field.name.label")} autoFocus {...form.getInputProps("name")} />
 
-        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        {hasUrlSecret ? null : (
+          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        )}
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">

packages/common/src/fetch-agent.ts

@@ -12,7 +12,11 @@ export class LoggingAgent extends Agent {
   }
 
   dispatch(options: Dispatcher.DispatchOptions, handler: Dispatcher.DispatchHandler): boolean {
-    const url = new URL(`${options.origin as string}${options.path}`);
+    const path = options.path
+      .split("/")
+      .map((segment) => (segment.length >= 32 && !segment.startsWith("?") ? "REDACTED" : segment))
+      .join("/");
+    const url = new URL(`${options.origin as string}${path}`);
 
     // The below code should prevent sensitive data from being logged as
     // some integrations use query parameters for auth

packages/common/src/test/fetch-agent.spec.ts

@@ -66,6 +66,7 @@ describe("LoggingAgent should log all requests", () => {
     ["/?one=a1&two=b2&three=c3", `/?one=${REDACTED}&two=${REDACTED}&three=${REDACTED}`],
     ["/?numberWith13Chars=1234567890123", `/?numberWith13Chars=${REDACTED}`],
     [`/?stringWith13Chars=${"a".repeat(13)}`, `/?stringWith13Chars=${REDACTED}`],
+    [`/${"a".repeat(32)}/?param=123`, `/${REDACTED}/?param=123`],
   ])("should redact sensitive data in url https://homarr.dev%s", (path, expected) => {
     // Arrange
     const infoLogSpy = vi.spyOn(logger, "debug");

packages/definitions/src/integration.ts

@@ -13,6 +13,7 @@ export const integrationSecretKindObject = {
   topic: { isPublic: true, multiline: false },
   opnsenseApiKey: { isPublic: false, multiline: false },
   opnsenseApiSecret: { isPublic: false, multiline: false },
+  url: { isPublic: false, multiline: false },
   privateKey: { isPublic: false, multiline: true },
   githubAppId: { isPublic: true, multiline: false },
   githubInstallationId: { isPublic: true, multiline: false },
@@ -283,6 +284,13 @@ export const integrationDefs = {
     category: ["notifications"],
     documentationUrl: createDocumentationLink("/docs/integrations/ntfy"),
   },
+  ical: {
+    name: "iCal",
+    secretKinds: [["url"]],
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/ical.svg",
+    category: ["calendar"],
+    documentationUrl: createDocumentationLink("/docs/integrations/ical"),
+  },
   truenas: {
     name: "TrueNAS",
     secretKinds: [["username", "password"]],

packages/integrations/package.json

@@ -41,6 +41,7 @@
     "@homarr/validation": "workspace:^0.1.0",
     "@jellyfin/sdk": "^0.11.0",
     "@octokit/auth-app": "^8.1.0",
+    "ical.js": "^2.2.1",
     "maria2": "^0.4.1",
     "node-ical": "^0.20.1",
     "octokit": "^5.0.3",

packages/integrations/src/base/creator.ts

@@ -18,6 +18,7 @@ import { GitHubContainerRegistryIntegration } from "../github-container-registry
 import { GithubIntegration } from "../github/github-integration";
 import { GitlabIntegration } from "../gitlab/gitlab-integration";
 import { HomeAssistantIntegration } from "../homeassistant/homeassistant-integration";
+import { ICalIntegration } from "../ical/ical-integration";
 import { JellyfinIntegration } from "../jellyfin/jellyfin-integration";
 import { JellyseerrIntegration } from "../jellyseerr/jellyseerr-integration";
 import { LinuxServerIOIntegration } from "../linuxserverio/linuxserverio-integration";
@@ -112,6 +113,7 @@ export const integrationCreators = {
   codeberg: CodebergIntegration,
   linuxServerIO: LinuxServerIOIntegration,
   gitHubContainerRegistry: GitHubContainerRegistryIntegration,
+  ical: ICalIntegration,
   quay: QuayIntegration,
   ntfy: NTFYIntegration,
   mock: MockIntegration,

packages/integrations/src/ical/ical-integration.ts

@@ -0,0 +1,67 @@
+import ICAL from "ical.js";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/certificates/server";
+
+import type { IntegrationTestingInput } from "../base/integration";
+import { Integration } from "../base/integration";
+import { TestConnectionError } from "../base/test-connection/test-connection-error";
+import type { TestingResult } from "../base/test-connection/test-connection-service";
+import type { ICalendarIntegration } from "../interfaces/calendar/calendar-integration";
+import type { CalendarEvent } from "../interfaces/calendar/calendar-types";
+
+export class ICalIntegration extends Integration implements ICalendarIntegration {
+  async getCalendarEventsAsync(start: Date, end: Date): Promise<CalendarEvent[]> {
+    const response = await fetchWithTrustedCertificatesAsync(super.getSecretValue("url"));
+    const result = await response.text();
+    const jcal = ICAL.parse(result) as unknown[];
+    const comp = new ICAL.Component(jcal);
+
+    return comp.getAllSubcomponents("vevent").reduce((prev, vevent) => {
+      const event = new ICAL.Event(vevent);
+      const startDate = event.startDate.toJSDate();
+      const endDate = event.endDate.toJSDate();
+
+      if (startDate > end) return prev;
+      if (endDate < start) return prev;
+
+      return prev.concat({
+        title: event.summary,
+        subTitle: null,
+        description: event.description,
+        startDate,
+        endDate,
+        image: null,
+        location: event.location,
+        indicatorColor: "red",
+        links: [],
+      });
+    }, [] as CalendarEvent[]);
+  }
+
+  protected async testingAsync(input: IntegrationTestingInput): Promise<TestingResult> {
+    const response = await input.fetchAsync(super.getSecretValue("url"));
+    if (!response.ok) return TestConnectionError.StatusResult(response);
+
+    const result = await response.text();
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const jcal = ICAL.parse(result);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      const comp = new ICAL.Component(jcal);
+      return comp.getAllSubcomponents("vevent").length > 0
+        ? { success: true }
+        : TestConnectionError.ParseResult({
+            name: "Calendar parse error",
+            message: "No events found",
+            cause: new Error("No events found"),
+          });
+    } catch (error) {
+      return TestConnectionError.ParseResult({
+        name: "Calendar parse error",
+        message: "Failed to parse calendar",
+        cause: error as Error,
+      });
+    }
+  }
+}

packages/integrations/src/index.ts

@@ -23,6 +23,7 @@ export { PlexIntegration } from "./plex/plex-integration";
 export { ProwlarrIntegration } from "./prowlarr/prowlarr-integration";
 export { TrueNasIntegration } from "./truenas/truenas-integration";
 export { OPNsenseIntegration } from "./opnsense/opnsense-integration";
+export { ICalIntegration } from "./ical/ical-integration";
 
 // Types
 export type { IntegrationInput } from "./base/integration";

packages/integrations/src/interfaces/calendar/calendar-types.ts

@@ -1,24 +1,41 @@
 export const radarrReleaseTypes = ["inCinemas", "digitalRelease", "physicalRelease"] as const;
 export type RadarrReleaseType = (typeof radarrReleaseTypes)[number];
 
-export interface CalendarEvent {
+export interface RadarrMetadata {
-  name: string;
+  type: "radarr";
-  subName: string;
+  releaseType: RadarrReleaseType;
-  date: Date;
+}
-  dates?: { type: RadarrReleaseType; date: Date }[];
+
-  description?: string;
+export type CalendarMetadata = RadarrMetadata;
-  thumbnail?: string;
+
-  mediaInformation?: {
+export interface CalendarLink {
-    type: "audio" | "video" | "tv" | "movie";
+  name: string;
-    seasonNumber?: number;
+  isDark: boolean;
-    episodeNumber?: number;
+  href: string;
-  };
+  color?: string;
-  links: {
+  logo?: string;
-    href: string;
+}
-    name: string;
+
-    color: string | undefined;
+export interface CalendarImageBadge {
-    notificationColor?: string | undefined;
+  content: string;
-    isDark: boolean | undefined;
+  color: string;
-    logo: string;
+}
-  }[];
+
+export interface CalendarImage {
+  src: string;
+  badge?: CalendarImageBadge;
+  aspectRatio?: { width: number; height: number };
+}
+
+export interface CalendarEvent {
+  title: string;
+  subTitle: string | null;
+  description: string | null;
+  startDate: Date;
+  endDate: Date | null;
+  image: CalendarImage | null;
+  location: string | null;
+  metadata?: CalendarMetadata;
+  indicatorColor: string;
+  links: CalendarLink[];
 }

packages/integrations/src/media-organizer/lidarr/lidarr-integration.ts

@@ -8,7 +8,7 @@ import type { IntegrationTestingInput } from "../../base/integration";
 import { TestConnectionError } from "../../base/test-connection/test-connection-error";
 import type { TestingResult } from "../../base/test-connection/test-connection-service";
 import type { ICalendarIntegration } from "../../interfaces/calendar/calendar-integration";
-import type { CalendarEvent } from "../../interfaces/calendar/calendar-types";
+import type { CalendarEvent, CalendarLink } from "../../interfaces/calendar/calendar-types";
 import { mediaOrganizerPriorities } from "../media-organizer";
 
 export class LidarrIntegration extends Integration implements ICalendarIntegration {
@@ -44,22 +44,28 @@ export class LidarrIntegration extends Integration implements ICalendarIntegrati
     const lidarrCalendarEvents = await z.array(lidarrCalendarEventSchema).parseAsync(await response.json());
 
     return lidarrCalendarEvents.map((lidarrCalendarEvent): CalendarEvent => {
+      const imageSrc = this.chooseBestImage(lidarrCalendarEvent);
       return {
-        name: lidarrCalendarEvent.title,
+        title: lidarrCalendarEvent.title,
-        subName: lidarrCalendarEvent.artist.artistName,
+        subTitle: lidarrCalendarEvent.artist.artistName,
-        description: lidarrCalendarEvent.overview,
+        description: lidarrCalendarEvent.overview ?? null,
-        thumbnail: this.chooseBestImageAsURL(lidarrCalendarEvent),
+        startDate: lidarrCalendarEvent.releaseDate,
-        date: lidarrCalendarEvent.releaseDate,
+        endDate: null,
-        mediaInformation: {
+        image: imageSrc
-          type: "audio",
+          ? {
-        },
+              src: imageSrc.remoteUrl,
+              aspectRatio: { width: 7, height: 12 },
+            }
+          : null,
+        location: null,
+        indicatorColor: "cyan",
         links: this.getLinksForLidarrCalendarEvent(lidarrCalendarEvent),
       };
     });
   }
 
   private getLinksForLidarrCalendarEvent = (event: z.infer<typeof lidarrCalendarEventSchema>) => {
-    const links: CalendarEvent["links"] = [];
+    const links: CalendarLink[] = [];
 
     for (const link of event.artist.links) {
       switch (link.name) {
@@ -70,7 +76,6 @@ export class LidarrIntegration extends Integration implements ICalendarIntegrati
             color: "#f5c518",
             isDark: false,
             logo: "/images/apps/vgmdb.svg",
-            notificationColor: "cyan",
           });
           break;
         case "imdb":
@@ -80,7 +85,6 @@ export class LidarrIntegration extends Integration implements ICalendarIntegrati
             color: "#f5c518",
             isDark: false,
             logo: "/images/apps/imdb.png",
-            notificationColor: "cyan",
           });
           break;
         case "last":
@@ -90,7 +94,6 @@ export class LidarrIntegration extends Integration implements ICalendarIntegrati
             color: "#cf222a",
             isDark: false,
             logo: "/images/apps/lastfm.svg",
-            notificationColor: "cyan",
           });
           break;
       }

packages/integrations/src/media-organizer/radarr/radarr-integration.ts

@@ -1,15 +1,14 @@
 import { z } from "zod/v4";
 
 import { fetchWithTrustedCertificatesAsync } from "@homarr/certificates/server";
-import type { AtLeastOneOf } from "@homarr/common/types";
 import { logger } from "@homarr/log";
 
-import { Integration } from "../../base/integration";
 import type { IntegrationTestingInput } from "../../base/integration";
+import { Integration } from "../../base/integration";
 import { TestConnectionError } from "../../base/test-connection/test-connection-error";
 import type { TestingResult } from "../../base/test-connection/test-connection-service";
 import type { ICalendarIntegration } from "../../interfaces/calendar/calendar-integration";
-import type { CalendarEvent } from "../../interfaces/calendar/calendar-types";
+import type { CalendarEvent, CalendarLink } from "../../interfaces/calendar/calendar-types";
 import { radarrReleaseTypes } from "../../interfaces/calendar/calendar-types";
 import { mediaOrganizerPriorities } from "../media-organizer";
 
@@ -34,33 +33,44 @@ export class RadarrIntegration extends Integration implements ICalendarIntegrati
     });
     const radarrCalendarEvents = await z.array(radarrCalendarEventSchema).parseAsync(await response.json());
 
-    return radarrCalendarEvents.map((radarrCalendarEvent): CalendarEvent => {
+    return radarrCalendarEvents.flatMap((radarrCalendarEvent): CalendarEvent[] => {
-      const dates = radarrReleaseTypes
+      const imageSrc = this.chooseBestImageAsURL(radarrCalendarEvent);
-        .map((type) => (radarrCalendarEvent[type] ? { type, date: radarrCalendarEvent[type] } : undefined))
+
-        .filter((date) => date) as AtLeastOneOf<Exclude<CalendarEvent["dates"], undefined>[number]>;
+      return radarrReleaseTypes
-      return {
+        .map((releaseType) => ({ type: releaseType, date: radarrCalendarEvent[releaseType] }))
-        name: radarrCalendarEvent.title,
+        .filter((item) => item.date !== undefined)
-        subName: radarrCalendarEvent.originalTitle,
+        .map((item) => ({
-        description: radarrCalendarEvent.overview,
+          title: radarrCalendarEvent.title,
-        thumbnail: this.chooseBestImageAsURL(radarrCalendarEvent),
+          subTitle: radarrCalendarEvent.originalTitle,
-        date: dates[0].date,
+          description: radarrCalendarEvent.overview ?? null,
-        dates,
+          // Check is done above in the filter
-        mediaInformation: {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          type: "movie",
+          startDate: item.date!,
-        },
+          endDate: null,
-        links: this.getLinksForRadarrCalendarEvent(radarrCalendarEvent),
+          image: imageSrc
-      };
+            ? {
+                src: imageSrc,
+                aspectRatio: { width: 7, height: 12 },
+              }
+            : null,
+          location: null,
+          metadata: {
+            type: "radarr",
+            releaseType: item.type,
+          },
+          indicatorColor: "yellow",
+          links: this.getLinksForRadarrCalendarEvent(radarrCalendarEvent),
+        }));
     });
   }
 
   private getLinksForRadarrCalendarEvent = (event: z.infer<typeof radarrCalendarEventSchema>) => {
-    const links: CalendarEvent["links"] = [
+    const links: CalendarLink[] = [
       {
         href: this.url(`/movie/${event.titleSlug}`).toString(),
         name: "Radarr",
         logo: "/images/apps/radarr.svg",
         color: undefined,
-        notificationColor: "yellow",
         isDark: true,
       },
     ];

packages/integrations/src/media-organizer/readarr/readarr-integration.ts

@@ -8,7 +8,7 @@ import type { IntegrationTestingInput } from "../../base/integration";
 import { TestConnectionError } from "../../base/test-connection/test-connection-error";
 import type { TestingResult } from "../../base/test-connection/test-connection-service";
 import type { ICalendarIntegration } from "../../interfaces/calendar/calendar-integration";
-import type { CalendarEvent } from "../../interfaces/calendar/calendar-types";
+import type { CalendarEvent, CalendarLink } from "../../interfaces/calendar/calendar-types";
 import { mediaOrganizerPriorities } from "../media-organizer";
 
 export class ReadarrIntegration extends Integration implements ICalendarIntegration {
@@ -50,15 +50,22 @@ export class ReadarrIntegration extends Integration implements ICalendarIntegrat
     const readarrCalendarEvents = await z.array(readarrCalendarEventSchema).parseAsync(await response.json());
 
     return readarrCalendarEvents.map((readarrCalendarEvent): CalendarEvent => {
+      const imageSrc = this.chooseBestImageAsURL(readarrCalendarEvent);
+
       return {
-        name: readarrCalendarEvent.title,
+        title: readarrCalendarEvent.title,
-        subName: readarrCalendarEvent.author.authorName,
+        subTitle: readarrCalendarEvent.author.authorName,
-        description: readarrCalendarEvent.overview,
+        description: readarrCalendarEvent.overview ?? null,
-        thumbnail: this.chooseBestImageAsURL(readarrCalendarEvent),
+        startDate: readarrCalendarEvent.releaseDate,
-        date: readarrCalendarEvent.releaseDate,
+        endDate: null,
-        mediaInformation: {
+        image: imageSrc
-          type: "audio",
+          ? {
-        },
+              src: imageSrc,
+              aspectRatio: { width: 7, height: 12 },
+            }
+          : null,
+        location: null,
+        indicatorColor: "#f5c518",
         links: this.getLinksForReadarrCalendarEvent(readarrCalendarEvent),
       };
     });
@@ -72,9 +79,8 @@ export class ReadarrIntegration extends Integration implements ICalendarIntegrat
         isDark: false,
         logo: "/images/apps/readarr.svg",
         name: "Readarr",
-        notificationColor: "#f5c518",
       },
-    ] satisfies CalendarEvent["links"];
+    ] satisfies CalendarLink[];
   };
 
   private chooseBestImage = (

packages/integrations/src/media-organizer/sonarr/sonarr-integration.ts

@@ -8,7 +8,7 @@ import type { IntegrationTestingInput } from "../../base/integration";
 import { TestConnectionError } from "../../base/test-connection/test-connection-error";
 import type { TestingResult } from "../../base/test-connection/test-connection-service";
 import type { ICalendarIntegration } from "../../interfaces/calendar/calendar-integration";
-import type { CalendarEvent } from "../../interfaces/calendar/calendar-types";
+import type { CalendarEvent, CalendarLink } from "../../interfaces/calendar/calendar-types";
 import { mediaOrganizerPriorities } from "../media-organizer";
 
 export class SonarrIntegration extends Integration implements ICalendarIntegration {
@@ -33,33 +33,36 @@ export class SonarrIntegration extends Integration implements ICalendarIntegrati
         "X-Api-Key": super.getSecretValue("apiKey"),
       },
     });
-    const sonarCalendarEvents = await z.array(sonarrCalendarEventSchema).parseAsync(await response.json());
+    const sonarrCalendarEvents = await z.array(sonarrCalendarEventSchema).parseAsync(await response.json());
 
-    return sonarCalendarEvents.map(
+    return sonarrCalendarEvents.map((event): CalendarEvent => {
-      (sonarCalendarEvent): CalendarEvent => ({
+      const imageSrc = this.chooseBestImageAsURL(event);
-        name: sonarCalendarEvent.title,
+      return {
-        subName: sonarCalendarEvent.series.title,
+        title: event.title,
-        description: sonarCalendarEvent.series.overview,
+        subTitle: event.series.title,
-        thumbnail: this.chooseBestImageAsURL(sonarCalendarEvent),
+        description: event.series.overview ?? null,
-        date: sonarCalendarEvent.airDateUtc,
+        startDate: event.airDateUtc,
-        mediaInformation: {
+        endDate: null,
-          type: "tv",
+        image: imageSrc
-          episodeNumber: sonarCalendarEvent.episodeNumber,
+          ? {
-          seasonNumber: sonarCalendarEvent.seasonNumber,
+              src: imageSrc,
-        },
+              aspectRatio: { width: 7, height: 12 },
-        links: this.getLinksForSonarCalendarEvent(sonarCalendarEvent),
+            }
-      }),
+          : null,
-    );
+        location: null,
+        indicatorColor: "blue",
+        links: this.getLinksForSonarrCalendarEvent(event),
+      };
+    });
   }
 
-  private getLinksForSonarCalendarEvent = (event: z.infer<typeof sonarrCalendarEventSchema>) => {
+  private getLinksForSonarrCalendarEvent = (event: z.infer<typeof sonarrCalendarEventSchema>) => {
-    const links: CalendarEvent["links"] = [
+    const links: CalendarLink[] = [
       {
         href: this.url(`/series/${event.series.titleSlug}`).toString(),
         name: "Sonarr",
         logo: "/images/apps/sonarr.svg",
         color: undefined,
-        notificationColor: "blue",
         isDark: true,
       },
     ];

packages/integrations/src/mock/data/calendar.ts

@@ -8,32 +8,46 @@ export class CalendarMockService implements ICalendarIntegration {
   }
 }
 
-const homarrMeetup = (start: Date, end: Date): CalendarEvent => ({
+const homarrMeetup = (start: Date, end: Date): CalendarEvent => {
-  name: "Homarr Meetup",
+  const startDate = randomDateBetween(start, end);
-  subName: "",
+  const endDate = new Date(startDate.getTime() + 2 * 60 * 60 * 1000); // 2 hours later
-  description: "Yearly meetup of the Homarr community",
+  return {
-  date: randomDateBetween(start, end),
+    title: "Homarr Meetup",
-  links: [
+    subTitle: "",
-    {
+    description: "Yearly meetup of the Homarr community",
-      href: "https://homarr.dev",
+    startDate,
-      name: "Homarr",
+    endDate,
-      logo: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg",
+    image: null,
-      color: "#000000",
+    location: "Mountains",
-      notificationColor: "#fa5252",
+    indicatorColor: "#fa5252",
-      isDark: true,
+    links: [
-    },
+      {
-  ],
+        href: "https://homarr.dev",
-});
+        name: "Homarr",
+        logo: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg",
+        color: "#000000",
+        isDark: true,
+      },
+    ],
+  };
+};
 
 const titanicRelease = (start: Date, end: Date): CalendarEvent => ({
-  name: "Titanic",
+  title: "Titanic",
-  subName: "A classic movie",
+  subTitle: "A classic movie",
   description: "A tragic love story set on the ill-fated RMS Titanic.",
-  date: randomDateBetween(start, end),
+  startDate: randomDateBetween(start, end),
-  thumbnail: "https://image.tmdb.org/t/p/original/5bTWA20cL9LCIGNpde4Epc2Ijzn.jpg",
+  endDate: null,
-  mediaInformation: {
+  image: {
-    type: "movie",
+    src: "https://image.tmdb.org/t/p/original/5bTWA20cL9LCIGNpde4Epc2Ijzn.jpg",
+    aspectRatio: { width: 7, height: 12 },
   },
+  location: null,
+  metadata: {
+    type: "radarr",
+    releaseType: "inCinemas",
+  },
+  indicatorColor: "cyan",
   links: [
     {
       href: "https://www.imdb.com/title/tt0120338/",
@@ -41,22 +55,26 @@ const titanicRelease = (start: Date, end: Date): CalendarEvent => ({
       color: "#f5c518",
       isDark: false,
       logo: "/images/apps/imdb.svg",
-      notificationColor: "cyan",
     },
   ],
 });
 
 const seriesRelease = (start: Date, end: Date): CalendarEvent => ({
-  name: "The Mandalorian",
+  title: "The Mandalorian",
-  subName: "A Star Wars Series",
+  subTitle: "A Star Wars Series",
   description: "A lone bounty hunter in the outer reaches of the galaxy.",
-  date: randomDateBetween(start, end),
+  startDate: randomDateBetween(start, end),
-  thumbnail: "https://image.tmdb.org/t/p/original/ztvm7C7hiUpS3CZRXFmJxljICzK.jpg",
+  endDate: null,
-  mediaInformation: {
+  image: {
-    type: "tv",
+    src: "https://image.tmdb.org/t/p/original/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg",
-    seasonNumber: 1,
+    aspectRatio: { width: 7, height: 12 },
-    episodeNumber: 1,
+    badge: {
+      content: "S1:E1",
+      color: "red",
+    },
   },
+  location: null,
+  indicatorColor: "blue",
   links: [
     {
       href: "https://www.imdb.com/title/tt8111088/",
@@ -64,7 +82,6 @@ const seriesRelease = (start: Date, end: Date): CalendarEvent => ({
       color: "#f5c518",
       isDark: false,
       logo: "/images/apps/imdb.svg",
-      notificationColor: "blue",
     },
   ],
 });

packages/integrations/src/nextcloud/nextcloud.integration.ts

@@ -63,17 +63,20 @@ export class NextcloudIntegration extends Integration implements ICalendarIntegr
       );
 
       return {
-        name: veventObject.summary,
+        title: veventObject.summary,
-        date,
+        subTitle: null,
-        subName: "",
         description: veventObject.description,
+        startDate: date,
+        endDate: veventObject.end,
+        image: null,
+        location: veventObject.location || null,
+        indicatorColor: "#ff8600",
         links: [
           {
             href: url.toString(),
             name: "Nextcloud",
             logo: "/images/apps/nextcloud.svg",
             color: undefined,
-            notificationColor: "#ff8600",
             isDark: true,
           },
         ],

packages/translation/src/lang/en.json

@@ -945,6 +945,10 @@
           "label": "Topic",
           "newLabel": "New topic"
         },
+        "url": {
+          "label": "Url",
+          "newLabel": "New url"
+        },
         "opnsenseApiKey": {
           "label": "API Key (Key)",
           "newLabel": "New API Key (Key)"

packages/widgets/src/calendar/calendar-event-list.tsx

@@ -11,9 +11,10 @@ import {
   Text,
   useMantineColorScheme,
 } from "@mantine/core";
-import { IconClock } from "@tabler/icons-react";
+import { IconClock, IconPin } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
+import { isNullOrWhitespace } from "@homarr/common";
 import type { CalendarEvent } from "@homarr/integrations/types";
 import { useI18n } from "@homarr/translation/client";
 
@@ -40,85 +41,108 @@ export const CalendarEventList = ({ events }: CalendarEventListProps) => {
       <Stack>
         {events.map((event, eventIndex) => (
           <Group key={`event-${eventIndex}`} align={"stretch"} wrap="nowrap">
-            <Box pos={"relative"} w={70} h={120}>
+            {event.image !== null && (
-              <Image
+              <Box pos="relative">
-                src={event.thumbnail}
+                <Image
-                w={70}
+                  src={event.image.src}
-                h={120}
+                  w={70}
-                radius={"sm"}
+                  mah={150}
-                fallbackSrc={"https://placehold.co/400x600?text=No%20image"}
+                  style={{
-              />
+                    aspectRatio: event.image.aspectRatio
-              {event.mediaInformation?.type === "tv" && (
+                      ? `${event.image.aspectRatio.width} / ${event.image.aspectRatio.height}`
-                <Badge
+                      : "1/1",
-                  pos={"absolute"}
+                  }}
-                  bottom={-6}
+                  radius="sm"
-                  left={"50%"}
+                  fallbackSrc="https://placehold.co/400x400?text=No%20image"
-                  w={"inherit"}
+                />
-                  className={classes.badge}
+                {event.image.badge !== undefined && (
-                >{`S${event.mediaInformation.seasonNumber} / E${event.mediaInformation.episodeNumber}`}</Badge>
+                  <Badge pos="absolute" bottom={-6} left="50%" w="90%" className={classes.badge}>
-              )}
+                    {event.image.badge.content}
-            </Box>
+                  </Badge>
+                )}
+              </Box>
+            )}
             <Stack style={{ flexGrow: 1 }} gap={0}>
-              <Group justify={"space-between"} align={"start"} mb={"xs"} wrap="nowrap">
+              <Group justify="space-between" align="start" mb="xs" wrap="nowrap">
                 <Stack gap={0}>
-                  {event.subName && (
+                  {event.subTitle !== null && (
                     <Text lineClamp={1} size="sm">
-                      {event.subName}
+                      {event.subTitle}
                     </Text>
                   )}
                   <Text fw={"bold"} lineClamp={1} size="sm">
-                    {event.name}
+                    {event.title}
                   </Text>
                 </Stack>
-                {event.dates ? (
+                {event.metadata?.type === "radarr" && (
                   <Group wrap="nowrap">
                     <Text c="dimmed" size="sm">
-                      {t(
+                      {t(`widget.calendar.option.releaseType.options.${event.metadata.releaseType}`)}
-                        `widget.calendar.option.releaseType.options.${event.dates.find(({ date }) => event.date === date)?.type ?? "inCinemas"}`,
-                      )}
-                    </Text>
-                  </Group>
-                ) : (
-                  <Group gap={3} wrap="nowrap" align={"center"}>
-                    <IconClock opacity={0.7} size={"1rem"} />
-                    <Text c={"dimmed"} size={"sm"}>
-                      {dayjs(event.date).format("HH:mm")}
                     </Text>
                   </Group>
                 )}
+
+                <Group gap={3} wrap="nowrap" align={"center"}>
+                  <IconClock opacity={0.7} size={"1rem"} />
+                  <Text c={"dimmed"} size={"sm"}>
+                    {dayjs(event.startDate).format("HH:mm")}
+                  </Text>
+
+                  {event.endDate !== null && (
+                    <>
+                      -{" "}
+                      <Text c={"dimmed"} size={"sm"}>
+                        {dayjs(event.endDate).format("HH:mm")}
+                      </Text>
+                    </>
+                  )}
+                </Group>
               </Group>
-              {event.description && (
+
+              {event.location !== null && (
+                <Group gap={4} mb={isNullOrWhitespace(event.description) ? 0 : "sm"}>
+                  <IconPin opacity={0.7} size={"1rem"} />
+                  <Text size={"xs"} c={"dimmed"} lineClamp={1}>
+                    {event.location}
+                  </Text>
+                </Group>
+              )}
+
+              {!isNullOrWhitespace(event.description) && (
                 <Text size={"xs"} c={"dimmed"} lineClamp={2}>
                   {event.description}
                 </Text>
               )}
+
               {event.links.length > 0 && (
                 <Group pt={5} gap={5} mt={"auto"} wrap="nowrap">
-                  {event.links.map((link) => (
+                  {event.links
-                    <Button
+                    .filter((link) => link.href)
-                      key={link.href}
+                    .map((link) => (
-                      component={"a"}
+                      <Button
-                      href={link.href.toString()}
+                        key={link.href}
-                      target={"_blank"}
+                        component={"a"}
-                      size={"xs"}
+                        href={link.href.toString()}
-                      radius={"xl"}
+                        target={"_blank"}
-                      variant={link.color ? undefined : "default"}
+                        size={"xs"}
-                      styles={{
+                        radius={"xl"}
-                        root: {
+                        variant={link.color ? undefined : "default"}
-                          backgroundColor: link.color,
+                        styles={{
-                          color: link.isDark && colorScheme === "dark" ? "white" : "black",
+                          root: {
-                          "&:hover": link.color
+                            backgroundColor: link.color,
-                            ? {
+                            color: link.isDark && colorScheme === "dark" ? "white" : "black",
-                                backgroundColor: link.isDark ? lighten(link.color, 0.1) : darken(link.color, 0.1),
+                            "&:hover": link.color
-                              }
+                              ? {
-                            : undefined,
+                                  backgroundColor: link.isDark ? lighten(link.color, 0.1) : darken(link.color, 0.1),
-                        },
+                                }
-                      }}
+                              : undefined,
-                      leftSection={link.logo ? <Image src={link.logo} w={20} h={20} /> : undefined}
+                          },
-                    >
+                        }}
-                      <Text>{link.name}</Text>
+                        leftSection={link.logo ? <Image src={link.logo} fit="contain" w={20} h={20} /> : undefined}
-                    </Button>
+                      >
-                  ))}
+                        <Text>{link.name}</Text>
+                      </Button>
+                    ))}
                 </Group>
               )}
             </Stack>

packages/widgets/src/calendar/calender-day.tsx

@@ -79,7 +79,7 @@ interface NotificationIndicatorProps {
 }
 
 const NotificationIndicator = ({ events, isSmall }: NotificationIndicatorProps) => {
-  const notificationEvents = [...new Set(events.map((event) => event.links[0]?.notificationColor))].filter(String);
+  const notificationEvents = [...new Set(events.map((event) => event.indicatorColor))].filter(String);
   /* position bottom is lower when small to not be on top of number*/
   return (
     <Flex w="75%" pos={"absolute"} bottom={isSmall ? 4 : 10} left={"12.5%"} p={0} direction={"row"} justify={"center"}>

packages/widgets/src/calendar/component.tsx

@@ -10,7 +10,6 @@ import dayjs from "dayjs";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
-import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";
 
 import type { WidgetComponentProps } from "../definition";
@@ -124,13 +123,11 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
       }}
       renderDay={(tileDate) => {
         const eventsForDate = events
-          .map((event) => ({
+          .filter((event) => dayjs(event.startDate).isSame(tileDate, "day"))
-            ...event,
+          .filter(
-            date: (event.dates?.filter(({ type }) => options.releaseType.includes(type)) ?? [event]).find(({ date }) =>
+            (event) => event.metadata?.type !== "radarr" || options.releaseType.includes(event.metadata.releaseType),
-              dayjs(date).isSame(tileDate, "day"),
+          )
-            )?.date,
+          .sort((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime());
-          }))
-          .filter((event): event is CalendarEvent => Boolean(event.date));
 
         return (
           <CalendarDay

pnpm-lock.yaml

@@ -1477,6 +1477,9 @@ importers:
       '@octokit/auth-app':
         specifier: ^8.1.0
         version: 8.1.0
+      ical.js:
+        specifier: ^2.2.1
+        version: 2.2.1
       maria2:
         specifier: ^0.4.1
         version: 0.4.1
@@ -6925,6 +6928,9 @@ packages:
     resolution: {integrity: sha512-/1/GPCpDUCCYwlERiYjxoczfP0zfvZMU/OWgQPMya9AbAE24vseigFdhAMObpc8Q4lc/kjutPfUddDYyAmejnA==}
     engines: {node: '>=18.18.0'}
 
+  ical.js@2.2.1:
+    resolution: {integrity: sha512-yK/UlPbEs316igb/tjRgbFA8ZV75rCsBJp/hWOatpyaPNlgw0dGDmU+FoicOcwX4xXkeXOkYiOmCqNPFpNPkQg==}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -15991,6 +15997,8 @@ snapshots:
 
   human-signals@8.0.0: {}
 
+  ical.js@2.2.1: {}
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2