+
{eventsByDay.map((eventsDay, i) => (
{eventsDay.map((event, j) => (
))}
diff --git a/src/widgets/calendar/component.jsx b/src/widgets/calendar/component.jsx
index e99b97a7..d1ab2b4b 100644
--- a/src/widgets/calendar/component.jsx
+++ b/src/widgets/calendar/component.jsx
@@ -40,6 +40,7 @@ export default function Component({ service }) {
const { widget } = service;
const { i18n } = useTranslation();
const [showDate, setShowDate] = useState(null);
+ const [events, setEvents] = useState({});
const currentDate = DateTime.now().setLocale(i18n.language).startOf("day");
const { settings } = useContext(SettingsContext);
@@ -69,9 +70,9 @@ export default function Component({ service }) {
?.filter((integration) => integration?.type)
.map((integration) => ({
service: dynamic(() => import(`./integrations/${integration.type}`)),
- widget: integration,
+ widget: { ...widget, ...integration },
})) ?? [],
- [widget.integrations],
+ [widget],
);
return (
@@ -80,13 +81,14 @@ export default function Component({ service }) {
{integrations.map((integration) => {
const Integration = integration.service;
- const key = integration.widget.type + integration.widget.service_name + integration.widget.service_group;
+ const key = `integration-${integration.widget.type}-${integration.widget.service_name}-${integration.widget.service_group}-${integration.widget.name}`;
return (
@@ -95,8 +97,10 @@ export default function Component({ service }) {
{(!widget?.view || widget?.view === "monthly") && (
setHover(!hover)}
+ onMouseLeave={() => setHover(!hover)}
+ key={`event-${event.title}-${event.date}-${event.additional}`}
+ >
+ {showDateColumn && (
+
+
+ {(showDate || showTime) &&
+ event.date
+ .setLocale(i18n.language)
+ .toLocaleString(showTime ? DateTime.TIME_24_SIMPLE : { month: "short", day: "numeric" })}
+
+
+ )}
+
+
+
+
+
{hover && event.additional ? event.additional : event.title}
+
+ );
+}
diff --git a/src/widgets/calendar/integrations/ical.jsx b/src/widgets/calendar/integrations/ical.jsx
new file mode 100644
index 00000000..b3f1f781
--- /dev/null
+++ b/src/widgets/calendar/integrations/ical.jsx
@@ -0,0 +1,58 @@
+import { DateTime } from "luxon";
+import { parseString } from "cal-parser";
+import { useEffect } from "react";
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "../../../utils/proxy/use-widget-api";
+import Error from "../../../components/services/widget/error";
+
+export default function Integration({ config, params, setEvents, hideErrors }) {
+ const { t } = useTranslation();
+ const { data: icalData, error: icalError } = useWidgetAPI(config, config.name, {
+ refreshInterval: 300000, // 5 minutes
+ });
+
+ useEffect(() => {
+ let parsedIcal;
+
+ if (!icalError && icalData && !icalData.error) {
+ parsedIcal = parseString(icalData.data);
+ if (parsedIcal.events.length === 0) {
+ icalData.error = { message: `'${config.name}': ${t("calendar.noEventsFound")}` };
+ }
+ }
+
+ if (icalError || !parsedIcal) {
+ return;
+ }
+
+ const eventsToAdd = {};
+ const events = parsedIcal?.getEventsBetweenDates(
+ DateTime.fromISO(params.start).toJSDate(),
+ DateTime.fromISO(params.end).toJSDate(),
+ );
+
+ events?.forEach((event) => {
+ let title = `${event?.summary?.value}`;
+ if (config?.params?.showName) {
+ title = `${config.name}: ${title}`;
+ }
+
+ event.matchingDates.forEach((date) => {
+ eventsToAdd[event?.uid?.value] = {
+ title,
+ date: DateTime.fromJSDate(date),
+ color: config?.color ?? "zinc",
+ isCompleted: DateTime.fromJSDate(date) < DateTime.now(),
+ additional: event.location?.value,
+ type: "ical",
+ };
+ });
+ });
+
+ setEvents((prevEvents) => ({ ...prevEvents, ...eventsToAdd }));
+ }, [icalData, icalError, config, params, setEvents, t]);
+
+ const error = icalError ?? icalData?.error;
+ return error && !hideErrors &&
;
+}
diff --git a/src/widgets/calendar/integrations/lidarr.jsx b/src/widgets/calendar/integrations/lidarr.jsx
index 99ee77d7..d4a6edbe 100644
--- a/src/widgets/calendar/integrations/lidarr.jsx
+++ b/src/widgets/calendar/integrations/lidarr.jsx
@@ -1,12 +1,10 @@
import { DateTime } from "luxon";
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
import useWidgetAPI from "../../../utils/proxy/use-widget-api";
-import { EventContext } from "../../../utils/contexts/calendar";
import Error from "../../../components/services/widget/error";
-export default function Integration({ config, params, hideErrors = false }) {
- const { setEvents } = useContext(EventContext);
+export default function Integration({ config, params, setEvents, hideErrors = false }) {
const { data: lidarrData, error: lidarrError } = useWidgetAPI(config, "calendar", {
...params,
includeArtist: "false",
diff --git a/src/widgets/calendar/integrations/radarr.jsx b/src/widgets/calendar/integrations/radarr.jsx
index 22f6b1d3..945eadd9 100644
--- a/src/widgets/calendar/integrations/radarr.jsx
+++ b/src/widgets/calendar/integrations/radarr.jsx
@@ -1,14 +1,12 @@
import { DateTime } from "luxon";
-import { useEffect, useContext } from "react";
+import { useEffect } from "react";
import { useTranslation } from "next-i18next";
import useWidgetAPI from "../../../utils/proxy/use-widget-api";
-import { EventContext } from "../../../utils/contexts/calendar";
import Error from "../../../components/services/widget/error";
-export default function Integration({ config, params, hideErrors = false }) {
+export default function Integration({ config, params, setEvents, hideErrors = false }) {
const { t } = useTranslation();
- const { setEvents } = useContext(EventContext);
const { data: radarrData, error: radarrError } = useWidgetAPI(config, "calendar", {
...params,
...(config?.params ?? {}),
diff --git a/src/widgets/calendar/integrations/readarr.jsx b/src/widgets/calendar/integrations/readarr.jsx
index 8a9ba6b3..6ae919ef 100644
--- a/src/widgets/calendar/integrations/readarr.jsx
+++ b/src/widgets/calendar/integrations/readarr.jsx
@@ -1,12 +1,10 @@
import { DateTime } from "luxon";
-import { useEffect, useContext } from "react";
+import { useEffect } from "react";
import useWidgetAPI from "../../../utils/proxy/use-widget-api";
-import { EventContext } from "../../../utils/contexts/calendar";
import Error from "../../../components/services/widget/error";
-export default function Integration({ config, params, hideErrors = false }) {
- const { setEvents } = useContext(EventContext);
+export default function Integration({ config, params, setEvents, hideErrors = false }) {
const { data: readarrData, error: readarrError } = useWidgetAPI(config, "calendar", {
...params,
includeAuthor: "true",
diff --git a/src/widgets/calendar/integrations/sonarr.jsx b/src/widgets/calendar/integrations/sonarr.jsx
index d308ec6f..34cc679d 100644
--- a/src/widgets/calendar/integrations/sonarr.jsx
+++ b/src/widgets/calendar/integrations/sonarr.jsx
@@ -1,12 +1,10 @@
import { DateTime } from "luxon";
-import { useEffect, useContext } from "react";
+import { useEffect } from "react";
import useWidgetAPI from "../../../utils/proxy/use-widget-api";
-import { EventContext } from "../../../utils/contexts/calendar";
import Error from "../../../components/services/widget/error";
-export default function Integration({ config, params, hideErrors = false }) {
- const { setEvents } = useContext(EventContext);
+export default function Integration({ config, params, setEvents, hideErrors = false }) {
const { data: sonarrData, error: sonarrError } = useWidgetAPI(config, "calendar", {
...params,
includeSeries: "true",
diff --git a/src/widgets/calendar/monthly.jsx b/src/widgets/calendar/monthly.jsx
index e3c9e1fd..8a208bc1 100644
--- a/src/widgets/calendar/monthly.jsx
+++ b/src/widgets/calendar/monthly.jsx
@@ -1,10 +1,9 @@
-import { useContext, useMemo } from "react";
+import { useMemo } from "react";
import { DateTime, Info } from "luxon";
import classNames from "classnames";
import { useTranslation } from "next-i18next";
-import { IoMdCheckmarkCircleOutline } from "react-icons/io";
-import { EventContext } from "../../utils/contexts/calendar";
+import Event from "./event";
const cellStyle = "relative w-10 flex items-center justify-center flex-col";
const monthButton = "pl-6 pr-6 ml-2 mr-2 hover:bg-theme-100/20 dark:hover:bg-white/5 rounded-md cursor-pointer";
@@ -32,11 +31,11 @@ export function Day({ weekNumber, weekday, events, colorVariants, showDate, setS
// selected same day style
style +=
- displayDate.toFormat("MM-dd-yyyy") === showDate.toFormat("MM-dd-yyyy")
+ displayDate.startOf("day").ts === showDate.startOf("day").ts
? "text-black-500 bg-theme-100/20 dark:bg-white/10 rounded-md "
: "";
- if (displayDate.toFormat("MM-dd-yyyy") === currentDate.toFormat("MM-dd-yyyy")) {
+ if (displayDate.startOf("day").ts === currentDate.startOf("day").ts) {
// today style
style += "text-black-500 bg-theme-100/20 dark:bg-black/20 rounded-md ";
} else {
@@ -61,7 +60,7 @@ export function Day({ weekNumber, weekday, events, colorVariants, showDate, setS
.slice(0, 4)
.map((event) => (
))}
@@ -70,25 +69,6 @@ export function Day({ weekNumber, weekday, events, colorVariants, showDate, setS
);
}
-export function Event({ event }) {
- return (
-
-
- {event.title}
- {event.additional ? ` - ${event.additional}` : ""}
-
- {event.isCompleted && (
-
-
-
- )}
-
- );
-}
-
const dayInWeekId = {
monday: 1,
tuesday: 2,
@@ -99,10 +79,9 @@ const dayInWeekId = {
sunday: 7,
};
-export default function Monthly({ service, colorVariants, showDate, setShowDate }) {
+export default function Monthly({ service, colorVariants, events, showDate, setShowDate }) {
const { widget } = service;
const { i18n } = useTranslation();
- const { events } = useContext(EventContext);
const currentDate = DateTime.now().setLocale(i18n.language).startOf("day");
const dayNames = Info.weekdays("short", { locale: i18n.language });
@@ -161,7 +140,7 @@ export default function Monthly({ service, colorVariants, showDate, setShowDate