UX: improves calendar for holiday events (#7)

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

@@ -216,11 +216,19 @@ 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 _setDynamicCalendarEvents(calendar, post) {
-    (post.calendar_details || []).forEach(detail => {
-      let event = _buildEventObject(
+
+  function _buildEvent(detail) {
+    const event = _buildEventObject(
       detail.from
         ? {
             dateTime: moment(detail.from),
@@ -235,6 +243,20 @@ function initializeDiscourseCalendar(api) {
         : 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
@@ -252,15 +274,29 @@ function initializeDiscourseCalendar(api) {
       event.backgroundColor = stringToHexColor(detail.username);
     }
 
-      event.extendedProps = { htmlContent: detail.message };
-
-      if (detail.post_number) {
-        event.extendedProps.postNumber = detail.post_number;
-      } else {
-        event.classNames = ["holiday"];
+    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 => {
+      switch (detail.type) {
+        case "grouped":
+          _addGroupedEvent(calendar, post, detail);
+          break;
+        case "standalone":
+          _addStandaloneEvent(calendar, post, detail);
+          break;
+      }
     });
   }
 }

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