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,7 +59,10 @@ class CalendarView extends TemplateView {
           ['\u276F']
         ),
       ]),
-      t.ol(
+      t.map(
+        (vm) => vm.date,
+        (date, t) => {
+          return t.ol(
             { className: { CalendarView_calendar: true } },
             [].concat(
               Object.keys(DAYS_OF_WEEK).map((dayKey) => {
@@ -94,6 +94,8 @@ class CalendarView extends TemplateView {
                 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: new CalendarViewModel({ date: new Date() }),
-        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;
-          },
-        },
       },
     },
   };