UX: improved mobile view for calendars

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

@@ -279,7 +279,7 @@ function initializeDiscourseCalendar(api) {
 
     calendar.setOption("eventClick", ({ event, jsEvent }) => {
       hidePopover(jsEvent);
-      const { postNumber, postUrl } = event.extendedProps;
+      const { htmlContent, postNumber, postUrl } = event.extendedProps;
 
       if (postUrl) {
         DiscourseURL.routeTo(postUrl);
@@ -287,6 +287,8 @@ function initializeDiscourseCalendar(api) {
         _topicController =
           _topicController || api.container.lookup("controller:topic");
         _topicController.send("jumpToPost", postNumber);
+      } else if (document.querySelector(".mobile-view") && htmlContent) {
+        showPopover(jsEvent, { htmlContent });
       }
     });
 

assets/stylesheets/mobile/discourse-calendar.scss

@@ -1,5 +1,24 @@
-.calendar {
-  .fc-list-item-add-to-calendar {
-    display: block;
+.discourse-calendar-wrap {
+  border: 0;
+  margin-top: 1em;
+
+  .discourse-calendar-header {
+    padding: 0;
+    background: none;
+
+    h2.discourse-calendar-title {
+      font-size: $font-down-1;
+    }
+
+    .discourse-calendar-timezone-picker {
+      width: 120px;
+    }
+  }
+
+  .calendar {
+    padding: 0;
+    .fc-list-item-add-to-calendar {
+      display: block;
+    }
   }
 }