UX: improves calendar for holiday events (#7)

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

@@ -216,51 +216,87 @@ function initializeDiscourseCalendar(api) {
     calendar.setOption("eventMouseLeave", ({ jsEvent }) => {
       hidePopover(jsEvent);
     });
+
+    calendar.setOption("eventRender", data => {
+      const emojiImage = data.event.extendedProps.emojiImage;
+      if (emojiImage) {
+        const element = data.el.querySelector(".fc-title");
+        $(element).prepend(emojiImage);
+      }
+    });
+  }
+
+
+  function _buildEvent(detail) {
+    const event = _buildEventObject(
+      detail.from
+        ? {
+            dateTime: moment(detail.from),
+            weeklyRecurring: detail.recurring === "1.weeks"
+          }
+        : null,
+      detail.to
+        ? {
+            dateTime: moment(detail.to),
+            weeklyRecurring: detail.recurring === "1.weeks"
+          }
+        : null
+    );
+
+    event.extendedProps = {};
+
+    if (detail.post_number) {
+      event.extendedProps.postNumber = detail.post_number;
+    } else {
+      event.classNames = ["holiday"];
+    }
+
+    return event;
+  }
+
+  function _addStandaloneEvent(calendar, post, detail) {
+    const event = _buildEvent(detail);
+
+    const holidayCalendarTopicId = parseInt(
+      Discourse.SiteSettings.holiday_calendar_topic_id,
+      10
+    );
+
+    const excerpt = detail.message.split("\n").filter(e => e);
+    if (
+      excerpt.length &&
+      post.topic_id &&
+      holidayCalendarTopicId !== post.topic_id
+    ) {
+      event.title = excerpt[0];
+    } else {
+      event.title = detail.username;
+      event.backgroundColor = stringToHexColor(detail.username);
+    }
+
+    event.extendedProps.htmlContent = detail.message;
+    calendar.addEvent(event);
+  }
+
+  function _addGroupedEvent(calendar, post, detail) {
+    const event = _buildEvent(detail);
+    event.classNames = ["grouped-event"];
+    event.title = detail.name;
+    event.extendedProps.emojiImage = detail.emoji;
+    event.extendedProps.htmlContent = detail.usernames.join(", ");
+    calendar.addEvent(event);
   }
 
   function _setDynamicCalendarEvents(calendar, post) {
     (post.calendar_details || []).forEach(detail => {
-      let event = _buildEventObject(
-        detail.from
-          ? {
-              dateTime: moment(detail.from),
-              weeklyRecurring: detail.recurring === "1.weeks"
-            }
-          : null,
-        detail.to
-          ? {
-              dateTime: moment(detail.to),
-              weeklyRecurring: detail.recurring === "1.weeks"
-            }
-          : null
-      );
-
-      const holidayCalendarTopicId = parseInt(
-        Discourse.SiteSettings.holiday_calendar_topic_id,
-        10
-      );
-
-      const excerpt = detail.message.split("\n").filter(e => e);
-      if (
-        excerpt.length &&
-        post.topic_id &&
-        holidayCalendarTopicId !== post.topic_id
-      ) {
-        event.title = excerpt[0];
-      } else {
-        event.title = detail.username;
-        event.backgroundColor = stringToHexColor(detail.username);
+      switch (detail.type) {
+        case "grouped":
+          _addGroupedEvent(calendar, post, detail);
+          break;
+        case "standalone":
+          _addStandaloneEvent(calendar, post, detail);
+          break;
       }
-
-      event.extendedProps = { htmlContent: detail.message };
-
-      if (detail.post_number) {
-        event.extendedProps.postNumber = detail.post_number;
-      } else {
-        event.classNames = ["holiday"];
-      }
-
-      calendar.addEvent(event);
     });
   }
 }

assets/stylesheets/common/discourse-calendar.scss

@@ -71,6 +71,21 @@
   .fc-event-dot {
     background-color: $tertiary;
     border: 1px solid transparent;
+
+    .fc-time {
+      display: none;
+    }
+
+    &.grouped-event {
+      background-color: none;
+      background: $secondary;
+      border: 1px solid $primary-low;
+      color: $primary;
+
+      .emoji {
+        margin-right: 0.25em;
+      }
+    }
   }
 
   .fc-left {

plugin.rb

@@ -188,8 +188,9 @@ after_initialize do
     details = post_custom_fields[DiscourseCalendar::CALENDAR_DETAILS_CUSTOM_FIELD]
     Array(details).each do |post_number, (message, from, to, username, recurring)|
       result << {
+        type: :standalone,
         post_number: post_number.to_i,
-        message: message,
+        message: PrettyText.cook(message).sub(/\A<p>/, "").sub(/<\/p>/, ""),
         from: from,
         to: to,
         username: username,
@@ -197,14 +198,24 @@ after_initialize do
       }
     end
 
+    grouped_events = {}
     holidays = post_custom_fields[DiscourseCalendar::CALENDAR_HOLIDAYS_CUSTOM_FIELD]
     Array(holidays).each do |region, name, date, username|
-      emoji = REGION_TO_EMOJI_FLAG[region.split("_").first] || DEFAULT_EMOJI
-      message = PrettyText.cook(":#{emoji}: #{name}").sub(/\A<p>/, "").sub(/<\/p>/, "")
-      result << { message: message, from: date, username: username }
+      country_code = region.split("_").first
+      emoji = REGION_TO_EMOJI_FLAG[country_code] || DEFAULT_EMOJI
+      emoji_image = PrettyText.cook(":#{emoji}:").sub(/\A<p>/, "").sub(/<\/p>/, "")
+      identifier = "#{country_code}-#{name}"
+      grouped_events[identifier] ||= {
+        type: :grouped,
+        emoji: emoji ? emoji_image : nil,
+        name: name,
+        from: date,
+        usernames: []
+      }
+      grouped_events[identifier][:usernames] << username
     end
 
-    result
+    result.concat(grouped_events.values)
   end
 
   add_to_serializer(:post, :include_calendar_details?) do