better reload of posts and improve display on mobile

assets/javascripts/discourse/components/full-calendar.gjs

@@ -137,7 +137,7 @@ export default class FullCalendar extends Component {
   <template>
     <div
       {{didInsert this.setupCalendar}}
-      {{didUpdate this.updateCalendar @events this.capabilities.viewport.sm}}
+      {{didUpdate this.updateCalendar @events this.capabilities.viewport.md}}
       ...attributes
     >
       {{! The calendar will be rendered inside this div by the library }}

assets/javascripts/discourse/components/post-calendar.gjs

@@ -1,7 +1,13 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 import { escapeExpression } from "discourse/lib/utilities";
+import Topic from "discourse/models/topic";
 import { colorToHex, contrastColor, stringToColor } from "../lib/colors";
 import FullCalendar from "./full-calendar";
 
@@ -9,6 +15,33 @@ export default class PostCalendar extends Component {
   @service currentUser;
   @service siteSettings;
   @service capabilities;
+  @service postCalendar;
+  @service store;
+
+  @tracked post = this.args.post;
+
+  @action
+  registerPostCalendar() {
+    this.postCalendar.registerComponent(this);
+  }
+
+  @action
+  teardownPostCalendar() {
+    this.postCalendar.teardownComponent();
+  }
+
+  @action
+  async refresh() {
+    try {
+      const post = await this.store.find("post", this.post.id);
+      const topic_json = await Topic.find(post.topic_id, {});
+      const topic = Topic.create(topic_json);
+      post.set("topic", topic);
+      this.post = post;
+    } catch (error) {
+      popupAjaxError(error);
+    }
+  }
 
   get isStatic() {
     return this.args.options.calendarType === "static";
@@ -47,7 +80,7 @@ export default class PostCalendar extends Component {
     const events = [];
     const groupedEvents = [];
 
-    (this.args.post.calendar_details || []).forEach((detail) => {
+    (this.post.calendar_details || []).forEach((detail) => {
       switch (detail.type) {
         case "grouped":
           if (this.isFullDay && detail.timezone) {
@@ -301,9 +334,29 @@ export default class PostCalendar extends Component {
     });
   }
 
+  get leftHeaderToolbar() {
+    return this.capabilities.viewport.sm
+      ? "prev,next today"
+      : "prev,next title";
+  }
+
+  get centerHeaderToolbar() {
+    return this.capabilities.viewport.sm ? "title" : "";
+  }
+
   <template>
-    <div class="post-calendar">
-      <FullCalendar @events={{this.events}} @height={{@height}} />
+    <div
+      {{didInsert this.registerPostCalendar}}
+      {{willDestroy this.teardownPostCalendar}}
+      class="post-calendar"
+    >
+      <FullCalendar
+        @leftHeaderToolbar={{this.leftHeaderToolbar}}
+        @centerHeaderToolbar={{this.centerHeaderToolbar}}
+        @rightHeaderToolbar="timeGridDay,timeGridWeek,dayGridMonth,listYear"
+        @events={{this.events}}
+        @height={{@height}}
+      />
     </div>
   </template>
 }

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

@@ -1,13 +1,10 @@
-import { escape } from "pretty-text/sanitizer";
-import { iconHTML } from "discourse/lib/icon-library";
 import { withPluginApi } from "discourse/lib/plugin-api";
-import DiscourseURL from "discourse/lib/url";
 import { i18n } from "discourse-i18n";
 import PostCalendar from "../components/post-calendar";
 
 function initializeDiscourseCalendar(api) {
-  let _topicController;
   const site = api.container.lookup("service:site");
+  const postCalendar = api.container.lookup("service:post-calendar");
   const isMobileView = site && site.mobileView;
 
   api.decorateCookedElement(
@@ -78,20 +75,9 @@ function initializeDiscourseCalendar(api) {
     return events;
   }
 
-  api.registerCustomPostMessageCallback(
-    "calendar_change",
-    (topicController) => {
-      console.log("CALENDAR CHANGE");
-      // const stream = topicController.get("model.postStream");
-      // const post = stream.findLoadedPost(stream.get("firstPostId"));
-      // const $op = $(".topic-post article#post_1");
-      // const $calendar = $op.find(".calendar").first();
-
-      // if (post && $calendar.length > 0) {
-      //   ajax(`/posts/${post.id}.json`).then(() => render($calendar, post));
-      // }
-    }
-  );
+  api.registerCustomPostMessageCallback("calendar_change", () => {
+    postCalendar.refresh();
+  });
 
   if (api.registerNotificationTypeRenderer) {
     api.registerNotificationTypeRenderer(

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

@@ -71,7 +71,6 @@ const groupTimezoneRule = {
 export function setup(helper) {
   helper.allowList([
     "div.calendar",
-    "div.discourse-calendar-header",
     "div.discourse-calendar-wrap",
     "select.discourse-calendar-timezone-picker",
     "span.discourse-calendar-timezone-wrap",

assets/javascripts/discourse/services/post-calendar.js

@@ -0,0 +1,21 @@
+import Service from "@ember/service";
+
+/**
+ * Discoure post event API service. Provides methods to refresh the current post calendar.
+ *
+ * @module PostCalendar
+ * @implements {@ember/service}
+ */
+export default class PostCalendar extends Service {
+  registerComponent(component) {
+    this.component = component;
+  }
+
+  teardownComponent() {
+    this.component = null;
+  }
+
+  refresh() {
+    this.component?.refresh?.();
+  }
+}

assets/stylesheets/common/discourse-calendar.scss

@@ -10,33 +10,6 @@ a.holiday {
   min-width: 15em;
 }
 
-.discourse-calendar-header {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 0.5em;
-  border-bottom: 1px solid var(--primary-low);
-  background: var(--primary-very-low);
-  min-height: 60px;
-
-  .discourse-calendar-timezone-picker {
-    font-size: 16px;
-    margin-bottom: 0;
-    max-width: 50vw;
-  }
-
-  h2.discourse-calendar-title {
-    margin: 0 !important;
-  }
-
-  .title {
-    font-weight: 700;
-    text-transform: capitalize;
-  }
-}
-
 .group-timezones {
   display: grid;
   width: 100%;

assets/stylesheets/common/full-calendar-ext.scss

@@ -40,27 +40,22 @@
   }
 }
 
-.fc-toolbar-title {
-  font-size: var(--font-up-1) !important;
+.fc-header-toolbar {
+  .fc-button,
+  .fc-toolbar-title {
+    font-size: var(--font-down-1) !important;
+  }
 }
 
 #upcoming-events-calendar {
   height: 100%;
 }
 
-@include viewport.until(sm) {
+@include viewport.until(md) {
   .fc-header-toolbar {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-
-    .fc-button {
-      font-size: var(--font-down-1) !important;
-    }
-  }
-
-  .fc-toolbar-title {
-    font-size: var(--font-down-1) !important;
   }
 
   .fc-toolbar-chunk {
@@ -69,4 +64,12 @@
     align-items: center;
     justify-content: space-between;
   }
+
+  .post-calendar {
+    .fc-toolbar-chunk:nth-child(3) {
+      .fc-button-group {
+        flex-grow: 1;
+      }
+    }
+  }
 }

assets/stylesheets/mobile/discourse-calendar.scss

@@ -1,24 +1,6 @@
 .discourse-calendar-wrap {
   border: 0;
 
-  .discourse-calendar-header {
-    padding: 0;
-    background: none;
-
-    h2.discourse-calendar-title {
-      font-size: var(--font-0);
-      flex-wrap: nowrap;
-      max-width: 75%;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .discourse-calendar-timezone-picker {
-      max-width: 40vw;
-    }
-  }
-
   .fc-view-container {
     .fc-day-header.fc-widget-header {
       text-align: center;