WIP: Filter calendar by groups

This will allow filtering a calendar's users by the
selected group. This dropdown will only show when
`showGroupSelector` is added to the calendar BBCode

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

@@ -118,7 +118,7 @@ function initializeDiscourseCalendar(api) {
       const [cooked, post] = await Promise.all([cookRaw, loadPost]);
 
       categoryCalendarNode.innerHTML = cooked.toString();
-      render($(".calendar"), post);
+      render($(".calendar"), post, site);
     } else {
       if (!categoryEventNode) {
         return;
@@ -297,13 +297,15 @@ function initializeDiscourseCalendar(api) {
     );
   }
 
-  function render($calendar, post) {
+  function render($calendar, post, site) {
     $calendar = $calendar.empty();
 
     const timezone = _getTimeZone($calendar, api.getCurrentUser());
     const calendar = _buildCalendar($calendar, timezone);
     const isStatic = $calendar.attr("data-calendar-type") === "static";
     const fullDay = $calendar.attr("data-calendar-full-day") === "true";
+    const showGroupSelector =
+      $calendar.attr("data-calendar-show-group-selector") !== "false";
 
     if (isStatic) {
       calendar.render();
@@ -322,6 +324,10 @@ function initializeDiscourseCalendar(api) {
 
     _setupTimezonePicker(calendar, timezone, resetDynamicEvents);
 
+    if (showGroupSelector) {
+      _setupGroupSelector(calendar, post, resetDynamicEvents, site);
+    }
+
     if (siteSettings.enable_timezone_offset_for_calendar_events) {
       _setupTimezoneOffsetButton(resetDynamicEvents);
     }
@@ -877,6 +883,25 @@ function initializeDiscourseCalendar(api) {
     }
   }
 
+  function _setupGroupSelector(calendar, post, resetDynamicEvents) {
+    const groupSelector = document.querySelector(
+      ".discourse-calendar-group-picker"
+    );
+
+    if (!groupSelector) {
+      return;
+    }
+
+    groupSelector.appendChild(new Option("All Groups", "all"));
+    site.groups.forEach((group) => {
+      groupSelector.appendChild(new Option(group.name, group.id));
+    });
+
+    groupSelector.addEventListener("change", function (event) {
+      resetDynamicEvents();
+    });
+  }
+
   function _setupTimezoneOffsetButton(resetDynamicEvents) {
     const timezoneWrapper = document.querySelector(
       ".discourse-calendar-timezone-wrap"
@@ -993,8 +1018,8 @@ function initializeDiscourseCalendar(api) {
       http://www.google.com/calendar/event?action=TEMPLATE&text=${encodeURIComponent(
         eventTitle
       )}&dates=${startDate}/${endDate}&details=${encodeURIComponent(
-        event.eventRange.def.extendedProps.description
-      )}`;
+      event.eventRange.def.extendedProps.description
+    )}`;
     link.target = "_blank";
     link.classList.add("fc-list-item-add-to-calendar");
     event.el.querySelector(".fc-list-item-title").appendChild(link);

assets/javascripts/discourse/lib/discourse-markdown/discourse-calendar.js

@@ -19,6 +19,10 @@ const calendarRule = {
     }
     state.push("span_close", "span", -1);
 
+    if (info.attrs.showGroupSelector) {
+      _renderGroupSelector(state);
+    }
+
     state.push("div_calendar_header", "div", -1);
 
     let mainCalendarDivToken = state.push("div_calendar", "div", 1);
@@ -46,6 +50,13 @@ const calendarRule = {
       ]);
     }
 
+    if (info.attrs.showGroupSelector) {
+      mainCalendarDivToken.attrs.push([
+        "data-calendar-show-group-selector",
+        info.attrs.showGroupSelector,
+      ]);
+    }
+
     if (info.attrs.fullDay) {
       mainCalendarDivToken.attrs.push([
         "data-calendar-full-day",
@@ -91,17 +102,26 @@ function _renderTimezonePicker(state) {
   state.push("select_close", "select", -1);
 }
 
+function _renderGroupSelector(state) {
+  const groupSelectToken = state.push("select_open", "select", 1);
+  groupSelectToken.attrs = [["class", "discourse-calendar-group-picker"]];
+
+  state.push("select_close", "select", -1);
+}
+
 export function setup(helper) {
   helper.allowList([
     "div.calendar",
     "div.discourse-calendar-header",
     "div.discourse-calendar-wrap",
     "select.discourse-calendar-timezone-picker",
+    "select.discourse-calendar-group-picker",
     "span.discourse-calendar-timezone-wrap",
     "h2.discourse-calendar-title",
     "div[data-calendar-type]",
     "div[data-calendar-default-view]",
     "div[data-calendar-default-timezone]",
+    "div[data-calendar-show-group-selector",
     "div[data-weekends]",
     "div[data-hidden-days]",
     "div.group-timezones",

assets/stylesheets/common/discourse-calendar.scss

@@ -177,7 +177,8 @@ a.holiday {
   background: var(--primary-very-low);
   min-height: 60px;
 
-  .discourse-calendar-timezone-picker {
+  .discourse-calendar-timezone-picker,
+  .discourse-calendar-group-picker {
     font-size: 16px;
     margin-bottom: 0;
     max-width: 50vw;

assets/stylesheets/mobile/discourse-calendar.scss

@@ -14,7 +14,8 @@
       overflow: hidden;
     }
 
-    .discourse-calendar-timezone-picker {
+    .discourse-calendar-timezone-picker,
+    .discourse-calendar-group-picker {
       max-width: 40vw;
     }
   }