UX: pass the current locale to FullCalendar (#458)

* UX: pass the current locale to FullCalendar * DEV: acceptance test
discourse · Oct 20, 2023 · e21f970 · e21f970
1 parent 6c65902
commit e21f970
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/assets/javascripts/discourse/initializers/discourse-calendar.js b/assets/javascripts/discourse/initializers/discourse-calendar.js
@@ -21,6 +21,20 @@ function loadFullCalendar() {
   );
 }
 
+function getCurrentBcp47Locale() {
+  return I18n.currentLocale().replace("_", "-");
+}
+
+function getCalendarButtonsText() {
+  return {
+    today: I18n.t("discourse_calendar.toolbar_button.today"),
+    month: I18n.t("discourse_calendar.toolbar_button.month"),
+    week: I18n.t("discourse_calendar.toolbar_button.week"),
+    day: I18n.t("discourse_calendar.toolbar_button.day"),
+    list: I18n.t("discourse_calendar.toolbar_button.list"),
+  };
+}
+
 let eventPopper;
 const EVENT_POPOVER_ID = "event-popover";
 
@@ -124,7 +138,10 @@ function initializeDiscourseCalendar(api) {
         loadFullCalendar().then(() => {
           let fullCalendar = new window.FullCalendar.Calendar(
             categoryEventNode,
-            {}
+            {
+              locale: getCurrentBcp47Locale(),
+              buttonText: getCalendarButtonsText(),
+            }
           );
           const loadEvents = ajax(
             `/discourse-post-event/events.json?category_id=${browsedCategory.id}`
@@ -284,6 +301,8 @@ function initializeDiscourseCalendar(api) {
     return new window.FullCalendar.Calendar($calendar[0], {
       timeZone,
       timeZoneImpl: "moment-timezone",
+      locale: getCurrentBcp47Locale(),
+      buttonText: getCalendarButtonsText(),
       nextDayThreshold: "06:00:00",
       displayEventEnd: true,
       height: 650,

diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
@@ -299,6 +299,12 @@ en:
           ve: "Venezuela"
           vi: "Virgin Islands (U.S.)"
           za: "South Africa"
+      toolbar_button:
+        today: "Today"
+        month: "Month"
+        week: "Week"
+        day: "Day"
+        list: "List"
     group_timezones:
       search: "Search..."
       group_availability: "%{group} availability"

diff --git a/test/javascripts/acceptance/category-events-calendar-test.js b/test/javascripts/acceptance/category-events-calendar-test.js
@@ -1,6 +1,7 @@
-import { acceptance } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance, queryAll } from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
 import { visit } from "@ember/test-helpers";
+import I18n from "discourse-i18n";
 
 acceptance("Discourse Calendar - Category Events Calendar", function (needs) {
   needs.user();
@@ -75,4 +76,18 @@ acceptance("Discourse Calendar - Category Events Calendar", function (needs) {
       .exists("Events calendar div exists.");
     assert.dom(".fc-view-container").exists("FullCalendar is loaded.");
   });
+
+  test("uses current locale to display calendar weekday names", async (assert) => {
+    I18n.locale = "pt_BR";
+
+    await visit("/c/bug/1");
+
+    assert.deepEqual(
+      [...queryAll(".fc-day-header span")].map((el) => el.innerText),
+      ["dom.", "seg.", "ter.", "qua.", "qui.", "sex.", "sáb."],
+      "Week days are translated in the calendar header"
+    );
+
+    I18n.locale = "en";
+  });
 });