Working calendar month navigation

shared/CalendarView.js

@@ -34,9 +34,6 @@ for (let i = 0; i < 7; i++) {
 
 class CalendarView extends TemplateView {
   render(t, vm) {
-    const date = vm.date;
-    console.log('CalendarView vm', vm);
-
     return t.div({ className: { CalendarView: true } }, [
       t.div({ className: { CalendarView_heading: true } }, [
         t.button(
@@ -62,38 +59,43 @@ class CalendarView extends TemplateView {
           ['\u276F']
         ),
       ]),
-      t.ol(
-        { className: { CalendarView_calendar: true } },
-        [].concat(
-          Object.keys(DAYS_OF_WEEK).map((dayKey) => {
-            return t.li({ className: { CalendarView_dayName: true } }, [DAYS_OF_WEEK[dayKey]]);
-          }),
-          (() => {
-            let dayNodes = [];
-            for (let i = 0; i < numDaysInMonthForDate(date); i++) {
-              // We only need to calculate the day offset for the first day of the month
-              let dayNumber;
-              if (i === 0) {
-                const dayNumberDate = new Date(date);
-                dayNumberDate.setDate(i + 1);
-                // day number from 0 (monday) to 6 (sunday)
-                dayNumber = dayNumberDate.getDay();
-              }
+      t.map(
+        (vm) => vm.date,
+        (date, t) => {
+          return t.ol(
+            { className: { CalendarView_calendar: true } },
+            [].concat(
+              Object.keys(DAYS_OF_WEEK).map((dayKey) => {
+                return t.li({ className: { CalendarView_dayName: true } }, [DAYS_OF_WEEK[dayKey]]);
+              }),
+              (() => {
+                let dayNodes = [];
+                for (let i = 0; i < numDaysInMonthForDate(date); i++) {
+                  // We only need to calculate the day offset for the first day of the month
+                  let dayNumber;
+                  if (i === 0) {
+                    const dayNumberDate = new Date(date);
+                    dayNumberDate.setDate(i + 1);
+                    // day number from 0 (monday) to 6 (sunday)
+                    dayNumber = dayNumberDate.getDay();
+                  }
 
-              dayNodes.push(
-                t.li(
-                  {
-                    className: { CalendarView_day: true },
-                    style: i === 0 ? `grid-column-start: ${dayNumber + 1};` : null,
-                  },
-                  [String(i + 1)]
-                )
-              );
-            }
+                  dayNodes.push(
+                    t.li(
+                      {
+                        className: { CalendarView_day: true },
+                        style: i === 0 ? `grid-column-start: ${dayNumber + 1};` : null,
+                      },
+                      [String(i + 1)]
+                    )
+                  );
+                }
 
-            return dayNodes;
-          })()
-        )
+                return dayNodes;
+              })()
+            )
+          );
+        }
       ),
     ]);
   }

shared/hydrogen-vm-render-script.js

@@ -13,6 +13,7 @@ const {
   TimelineView,
   RoomView,
   RoomViewModel,
+  ViewModel,
 } = require('hydrogen-view-sdk');
 
 const ArchiveView = require('matrix-public-archive-shared/ArchiveView');
@@ -179,29 +180,39 @@ async function mountHydrogen() {
     kind: 'none',
   };
 
+  class CalendarViewModel extends ViewModel {
+    constructor(options) {
+      super(options);
+      const { date } = options;
+      this._date = date;
+    }
+
+    get date() {
+      return this._date;
+    }
+
+    prevMonth() {
+      const prevMonthDate = new Date(this._date);
+      prevMonthDate.setMonth(this._date.getMonth() - 1);
+      this._date = prevMonthDate;
+      this.emitChange('date');
+    }
+
+    nextMonth() {
+      const nextMonthDate = new Date(this._date);
+      nextMonthDate.setMonth(this._date.getMonth() + 1);
+      this._date = nextMonthDate;
+      this.emitChange('date');
+    }
+  }
+
   const archiveViewModel = {
     roomViewModel,
     rightPanelModel: {
       activeViewModel: {
         type: 'custom',
         customView: RightPanelContentView,
-
-        calendarViewModel: {
-          date: new Date(),
-          prevMonth: function () {
-            console.log('prevMonth');
-            const prevMonthDate = new Date(this.date);
-            prevMonthDate.setMonth(this.date.getMonth() - 1);
-            console.log('prevMonthDate', prevMonthDate);
-            this.date = prevMonthDate;
-          },
-          nextMonth: function () {
-            console.log('nextMonth');
-            const nextMonthDate = new Date(this.date);
-            nextMonthDate.setMonth(this.date.getMonth() + 1);
-            this.date = nextMonthDate;
-          },
-        },
+        calendarViewModel: new CalendarViewModel({ date: new Date() }),
       },
     },
   };