FEATURE: Add user option to toggle timezone adjustment

assets/javascripts/discourse/initializers/discourse-calendar.js

@@ -13,6 +13,7 @@ import { createPopper } from "@popperjs/core";
 import { isNotFullDayEvent } from "../lib/guess-best-date-format";
 import { formatEventName } from "../helpers/format-event-name";
 import getURL from "discourse-common/lib/get-url";
+import { iconHTML } from "discourse-common/lib/icon-library";
 
 function loadFullCalendar() {
   return loadScript(
@@ -30,6 +31,8 @@ function initializeDiscourseCalendar(api) {
     return;
   }
 
+  let enableTimezoneOffset = siteSettings.default_timezone_offset_user_option;
+
   let _topicController;
   const outletName = siteSettings.calendar_categories_outlet;
 
@@ -119,7 +122,7 @@ function initializeDiscourseCalendar(api) {
 
       if (foundCategory) {
         loadFullCalendar().then(() => {
-          let calendar = new window.FullCalendar.Calendar(
+          let fullCalendar = new window.FullCalendar.Calendar(
             categoryEventNode,
             {}
           );
@@ -132,7 +135,7 @@ function initializeDiscourseCalendar(api) {
 
             events[Object.keys(events)[0]].forEach((event) => {
               const { starts_at, ends_at, post } = event;
-              calendar.addEvent({
+              fullCalendar.addEvent({
                 title: formatEventName(event),
                 start: starts_at,
                 end: ends_at || starts_at,
@@ -141,7 +144,7 @@ function initializeDiscourseCalendar(api) {
               });
             });
 
-            calendar.render();
+            fullCalendar.render();
           });
         });
       }
@@ -248,6 +251,10 @@ function initializeDiscourseCalendar(api) {
     };
 
     _setupTimezonePicker(calendar, timezone, resetDynamicEvents);
+
+    if (siteSettings.enable_timezone_offset_for_calendar_events) {
+      _setupTimezoneOffsetButton(resetDynamicEvents);
+    }
   }
 
   function attachCalendar($elem, helper) {
@@ -315,7 +322,10 @@ function initializeDiscourseCalendar(api) {
   }
 
   function _orderByTz(a, b) {
-    if (!siteSettings.enable_timezone_offset_for_calendar_events) {
+    if (
+      !siteSettings.enable_timezone_offset_for_calendar_events &&
+      !enableTimezoneOffset
+    ) {
       return 0;
     }
 
@@ -549,7 +559,9 @@ function initializeDiscourseCalendar(api) {
 
   function _addGroupedEvent(calendar, post, detail, fullDay, calendarTz) {
     const groupedEventData =
-      siteSettings.enable_timezone_offset_for_calendar_events && fullDay
+      siteSettings.enable_timezone_offset_for_calendar_events &&
+      enableTimezoneOffset &&
+      fullDay
         ? _splitGroupEventByTimezone(detail, calendarTz)
         : [detail];
 
@@ -696,7 +708,10 @@ function initializeDiscourseCalendar(api) {
             let from = moment.tz(detail.from, detail.timezone);
             let to = moment.tz(detail.to, detail.timezone);
 
-            if (siteSettings.enable_timezone_offset_for_calendar_events) {
+            if (
+              siteSettings.enable_timezone_offset_for_calendar_events &&
+              enableTimezoneOffset
+            ) {
               const eventUtcOffset = moment.tz(detail.timezone).utcOffset();
               const timezoneOffset = (calendarUtcOffset - eventUtcOffset) / 60;
               eventDetail.timezoneOffset = timezoneOffset;
@@ -792,8 +807,10 @@ function initializeDiscourseCalendar(api) {
     if (tzPicker) {
       tzPicker.addEventListener("change", function (event) {
         calendar.setOption("timeZone", event.target.value);
-        resetDynamicEvents();
-        _insertAddToCalendarLinks(calendar);
+        if (enableTimezoneOffset) {
+          resetDynamicEvents();
+          _insertAddToCalendarLinks(calendar);
+        }
       });
 
       moment.tz
@@ -810,6 +827,32 @@ function initializeDiscourseCalendar(api) {
     }
   }
 
+  function _setupTimezoneOffsetButton(resetDynamicEvents) {
+    const timezoneWrapper = document.querySelector(
+      ".discourse-calendar-timezone-wrap"
+    );
+    const timezoneButton = document.createElement("button");
+
+    timezoneButton.title = I18n.t(
+      "discourse_calendar.toggle_timezone_offset_title"
+    );
+    timezoneButton.classList.add(
+      "timezone-offset-button",
+      "btn",
+      "btn-default",
+      "btn-icon",
+      "no-text"
+    );
+    timezoneButton.innerHTML = iconHTML("globe");
+    timezoneWrapper.appendChild(timezoneButton);
+
+    timezoneButton.addEventListener("click", () => {
+      enableTimezoneOffset = !enableTimezoneOffset;
+      resetDynamicEvents();
+      timezoneButton.blur();
+    });
+  }
+
   function _insertAddToCalendarLinks(info) {
     if (info.view.type !== "listNextYear") {
       return;
@@ -826,6 +869,7 @@ function initializeDiscourseCalendar(api) {
   function _setTimezoneOffset(info) {
     if (
       !siteSettings.enable_timezone_offset_for_calendar_events ||
+      !enableTimezoneOffset ||
       info.view.type === "listNextYear"
     ) {
       return;

config/locales/client.en.yml

@@ -32,6 +32,7 @@ en:
         disabled_holidays_description: "Disabled holidays will be excluded from the staff holiday calendar."
       date: "Date"
       add_to_calendar: "Add to Google Calendar"
+      toggle_timezone_offset_title: "Toggle timezone offset"
       region:
         title: "Region"
         none: "None"

config/settings.yml

@@ -57,6 +57,10 @@ discourse_calendar:
     default: 0
     client: true
     hidden: true
+  default_timezone_offset_user_option:
+    default: false
+    client: true
+    hidden: true
 
 discourse_post_event:
   discourse_post_event_enabled:

test/javascripts/acceptance/timezone-offset-test.js

@@ -256,6 +256,7 @@ acceptance("Discourse Calendar - Timezone Offset", function (needs) {
   needs.settings({
     calendar_enabled: true,
     enable_timezone_offset_for_calendar_events: true,
+    default_timezone_offset_user_option: true,
   });
 
   needs.pretender((server, helper) => {
@@ -308,6 +309,7 @@ acceptance("Discourse Calendar - Splitted Grouped Events", function (needs) {
   needs.settings({
     calendar_enabled: true,
     enable_timezone_offset_for_calendar_events: true,
+    default_timezone_offset_user_option: true,
     split_grouped_events_by_timezone_threshold: 0,
   });
 
@@ -340,6 +342,7 @@ acceptance("Discourse Calendar - Grouped Events", function (needs) {
   needs.settings({
     calendar_enabled: true,
     enable_timezone_offset_for_calendar_events: true,
+    default_timezone_offset_user_option: true,
     split_grouped_events_by_timezone_threshold: 2,
   });