Fix: calendar timezone performance improvements (#2668)

docs/widgets/services/calendar.md

@@ -16,6 +16,7 @@ widget:
   view: monthly # optional - possible values monthly, agenda
   maxEvents: 10 # optional - defaults to 10
   showTime: true # optional - show time for event happening today - defaults to false
+  timezone: America/Los_Angeles # optional and only when timezone is not detected properly (slightly slower performance) - force timezone for ical events (if it's the same - no change, if missing or different in ical - will be converted to this timezone)
   integrations: # optional
     - type: sonarr # active widget type that is currently enabled on homepage - possible values: radarr, sonarr, lidarr, readarr, ical
       service_group: Media # group name where widget exists
@@ -27,7 +28,6 @@ widget:
       url: https://domain.url/with/link/to.ics # URL with calendar events
       name: My Events # required - name for these calendar events
       color: zinc # optional - defaults to pre-defined color for the service (zinc for ical)
-      timezone: America/Los_Angeles # optional - force timezone for events (if it's the same - no change, if missing or different in ical - will be converted to this timezone)
       params: # optional - additional params for the service
         showName: true # optional - show name before event title in event line - defaults to false
 ```

src/utils/config/service-helpers.js

@@ -368,6 +368,7 @@ export function cleanServiceGroups(groups) {
           showTime,
           previousDays,
           view,
+          timezone,
 
           // coinmarketcap
           currency,
@@ -538,6 +539,7 @@ export function cleanServiceGroups(groups) {
           if (maxEvents) cleanedService.widget.maxEvents = maxEvents;
           if (previousDays) cleanedService.widget.previousDays = previousDays;
           if (showTime) cleanedService.widget.showTime = showTime;
+          if (timezone) cleanedService.widget.timezone = timezone;
         }
         if (type === "healthchecks") {
           if (uuid !== undefined) cleanedService.widget.uuid = uuid;

src/widgets/calendar/agenda.jsx

@@ -2,7 +2,7 @@ import { DateTime } from "luxon";
 import classNames from "classnames";
 import { useTranslation } from "next-i18next";
 
-import Event, { compareDateTimezoneAware } from "./event";
+import Event, { compareDateTimezone } from "./event";
 
 export default function Agenda({ service, colorVariants, events, showDate }) {
   const { widget } = service;
@@ -15,10 +15,8 @@ export default function Agenda({ service, colorVariants, events, showDate }) {
   const eventsArray = Object.keys(events)
     .filter(
       (eventKey) =>
-        showDate
+        showDate.minus({ days: widget?.previousDays ?? 0 }).startOf("day").ts <=
-          .setZone(events[eventKey].date.zoneName)
+        events[eventKey].date?.startOf("day").ts,
-          .minus({ days: widget?.previousDays ?? 0 })
-          .startOf("day").ts <= events[eventKey].date?.startOf("day").ts,
     )
     .map((eventKey) => events[eventKey])
     .sort((a, b) => a.date - b.date)
@@ -58,7 +56,7 @@ export default function Agenda({ service, colorVariants, events, showDate }) {
                 event={event}
                 colorVariants={colorVariants}
                 showDate={j === 0}
-                showTime={widget?.showTime && compareDateTimezoneAware(showDate, event)}
+                showTime={widget?.showTime && compareDateTimezone(showDate, event)}
               />
             ))}
           </div>

src/widgets/calendar/component.jsx

@@ -41,7 +41,8 @@ export default function Component({ service }) {
   const { i18n } = useTranslation();
   const [showDate, setShowDate] = useState(null);
   const [events, setEvents] = useState({});
-  const currentDate = DateTime.now().setLocale(i18n.language).startOf("day");
+  const nowDate = DateTime.now().setLocale(i18n.language);
+  const currentDate = widget?.timezone ? nowDate.setZone(widget?.timezone).startOf("day") : nowDate;
   const { settings } = useContext(SettingsContext);
 
   useEffect(() => {
@@ -93,6 +94,7 @@ export default function Component({ service }) {
                 params={params}
                 setEvents={setEvents}
                 hideErrors={settings.hideErrors}
+                timezone={widget?.timezone}
                 className="fixed bottom-0 left-0 bg-red-500 w-screen h-12"
               />
             );
@@ -106,6 +108,7 @@ export default function Component({ service }) {
             events={events}
             showDate={showDate}
             setShowDate={setShowDate}
+            currentDate={currentDate}
             className="flex"
           />
         )}

src/widgets/calendar/event.jsx

@@ -39,7 +39,4 @@ export default function Event({ event, colorVariants, showDate = false, showTime
     </div>
   );
 }
-
+export const compareDateTimezone = (date, event) => date.startOf("day").ts === event.date.startOf("day").ts;
-export function compareDateTimezoneAware(date, event) {
-  return date.setZone(event.date.zoneName).startOf("day").valueOf() === event.date.startOf("day").valueOf();
-}

src/widgets/calendar/integrations/ical.jsx

@@ -7,7 +7,7 @@ import { RRule } from "rrule";
 import useWidgetAPI from "../../../utils/proxy/use-widget-api";
 import Error from "../../../components/services/widget/error";
 
-export default function Integration({ config, params, setEvents, hideErrors }) {
+export default function Integration({ config, params, setEvents, hideErrors, timezone }) {
   const { t } = useTranslation();
   const { data: icalData, error: icalError } = useWidgetAPI(config, config.name, {
     refreshInterval: 300000, // 5 minutes
@@ -23,9 +23,8 @@ export default function Integration({ config, params, setEvents, hideErrors }) {
       }
     }
 
-    const zone = config?.timezone || null;
+    const startDate = DateTime.fromISO(params.start);
-    const startDate = DateTime.fromISO(params.start, { zone });
+    const endDate = DateTime.fromISO(params.end);
-    const endDate = DateTime.fromISO(params.end, { zone });
 
     if (icalError || !parsedIcal || !startDate.isValid || !endDate.isValid) {
       return;
@@ -33,6 +32,7 @@ export default function Integration({ config, params, setEvents, hideErrors }) {
 
     const eventsToAdd = {};
     const events = parsedIcal?.getEventsBetweenDates(startDate.toJSDate(), endDate.toJSDate());
+    const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
 
     events?.forEach((event) => {
       let title = `${event?.summary?.value}`;
@@ -44,8 +44,7 @@ export default function Integration({ config, params, setEvents, hideErrors }) {
         const duration = event.dtend.value - event.dtstart.value;
         const days = duration / (1000 * 60 * 60 * 24);
 
-        const now = DateTime.now().setZone(zone);
+        const eventDate = timezone ? DateTime.fromJSDate(date, { zone: timezone }) : DateTime.fromJSDate(date);
-        const eventDate = DateTime.fromJSDate(date, { zone });
 
         for (let j = 0; j < days; j += 1) {
           eventsToAdd[`${event?.uid?.value}${i}${j}${type}`] = {
@@ -72,7 +71,7 @@ export default function Integration({ config, params, setEvents, hideErrors }) {
     });
 
     setEvents((prevEvents) => ({ ...prevEvents, ...eventsToAdd }));
-  }, [icalData, icalError, config, params, setEvents, t]);
+  }, [icalData, icalError, config, params, setEvents, timezone, t]);
 
   const error = icalError ?? icalData?.error;
   return error && !hideErrors && <Error error={{ message: `${config.type}: ${error.message ?? error}` }} />;

src/widgets/calendar/monthly.jsx

@@ -3,16 +3,14 @@ import { DateTime, Info } from "luxon";
 import classNames from "classnames";
 import { useTranslation } from "next-i18next";
 
-import Event, { compareDateTimezoneAware } from "./event";
+import Event, { compareDateTimezone } 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";
 
-export function Day({ weekNumber, weekday, events, colorVariants, showDate, setShowDate }) {
+export function Day({ weekNumber, weekday, events, colorVariants, showDate, setShowDate, currentDate }) {
-  const currentDate = DateTime.now();
-
   const cellDate = showDate.set({ weekday, weekNumber }).startOf("day");
-  const filteredEvents = events?.filter((event) => compareDateTimezoneAware(cellDate, event));
+  const filteredEvents = events?.filter((event) => compareDateTimezone(cellDate, event));
 
   const dayStyles = (displayDate) => {
     let style = "h-9 ";
@@ -77,10 +75,9 @@ const dayInWeekId = {
   sunday: 7,
 };
 
-export default function Monthly({ service, colorVariants, events, showDate, setShowDate }) {
+export default function Monthly({ service, colorVariants, events, showDate, setShowDate, currentDate }) {
   const { widget } = service;
   const { i18n } = useTranslation();
-  const currentDate = DateTime.now().setLocale(i18n.language).startOf("day");
 
   const dayNames = Info.weekdays("short", { locale: i18n.language });
 
@@ -164,6 +161,7 @@ export default function Monthly({ service, colorVariants, events, showDate, setS
                 colorVariants={colorVariants}
                 showDate={showDate}
                 setShowDate={setShowDate}
+                currentDate={currentDate}
               />
             )),
           )}
@@ -171,7 +169,7 @@ export default function Monthly({ service, colorVariants, events, showDate, setS
 
         <div className="flex flex-col">
           {eventsArray
-            ?.filter((event) => compareDateTimezoneAware(showDate, event))
+            ?.filter((event) => compareDateTimezone(showDate, event))
             .slice(0, widget?.maxEvents ?? 10)
             .map((event) => (
               <Event
@@ -179,7 +177,7 @@ export default function Monthly({ service, colorVariants, events, showDate, setS
                 event={event}
                 colorVariants={colorVariants}
                 showDateColumn={widget?.showTime ?? false}
-                showTime={widget?.showTime && compareDateTimezoneAware(showDate, event)}
+                showTime={widget?.showTime && compareDateTimezone(showDate, event)}
               />
             ))}
         </div>