Amend message, update docs

docs/widgets/services/calendar.md

@@ -27,7 +27,7 @@ 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 when they are shown at the wrong time
+      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/widgets/calendar/agenda.jsx

@@ -2,7 +2,7 @@ import { DateTime } from "luxon";
 import classNames from "classnames";
 import { useTranslation } from "next-i18next";
 
-import Event, { compareIfSameAsEventDateTime } from "./event";
+import Event, { compareDateTimezoneAware } from "./event";
 
 export default function Agenda({ service, colorVariants, events, showDate }) {
   const { widget } = service;
@@ -58,7 +58,7 @@ export default function Agenda({ service, colorVariants, events, showDate }) {
                 event={event}
                 colorVariants={colorVariants}
                 showDate={j === 0}
-                showTime={widget?.showTime && compareIfSameAsEventDateTime(showDate, event)}
+                showTime={widget?.showTime && compareDateTimezoneAware(showDate, event)}
               />
             ))}
           </div>

src/widgets/calendar/event.jsx

@@ -40,6 +40,6 @@ export default function Event({ event, colorVariants, showDate = false, showTime
   );
 }
 
-export function compareIfSameAsEventDateTime(date, event) {
+export function compareDateTimezoneAware(date, event) {
   return date.setZone(event.date.zoneName).startOf("day").valueOf() === event.date.startOf("day").valueOf();
 }

src/widgets/calendar/monthly.jsx

@@ -3,7 +3,7 @@ import { DateTime, Info } from "luxon";
 import classNames from "classnames";
 import { useTranslation } from "next-i18next";
 
-import Event, { compareIfSameAsEventDateTime } from "./event";
+import Event, { compareDateTimezoneAware } 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";
@@ -12,7 +12,7 @@ export function Day({ weekNumber, weekday, events, colorVariants, showDate, setS
   const currentDate = DateTime.now();
 
   const cellDate = showDate.set({ weekday, weekNumber }).startOf("day");
-  const filteredEvents = events?.filter((event) => compareIfSameAsEventDateTime(cellDate, event));
+  const filteredEvents = events?.filter((event) => compareDateTimezoneAware(cellDate, event));
 
   const dayStyles = (displayDate) => {
     let style = "h-9 ";
@@ -171,7 +171,7 @@ export default function Monthly({ service, colorVariants, events, showDate, setS
 
         <div className="flex flex-col">
           {eventsArray
-            ?.filter((event) => compareIfSameAsEventDateTime(showDate, event))
+            ?.filter((event) => compareDateTimezoneAware(showDate, event))
             .slice(0, widget?.maxEvents ?? 10)
             .map((event) => (
               <Event
@@ -179,7 +179,7 @@ export default function Monthly({ service, colorVariants, events, showDate, setS
                 event={event}
                 colorVariants={colorVariants}
                 showDateColumn={widget?.showTime ?? false}
-                showTime={widget?.showTime && compareIfSameAsEventDateTime(showDate, event)}
+                showTime={widget?.showTime && compareDateTimezoneAware(showDate, event)}
               />
             ))}
         </div>