add inputs and buttons to change month

src/Views/Objects/calendarView.tsx

@@ -5,6 +5,7 @@ import { Chat, MessageObject } from "../../Model/chatModel";
 import { DayView } from "./dayView";
 import { MiniatureDayView } from "./miniatureDayView";
 import { dayInCalendar } from "../../Model/model";
+import { translation } from "../../translations";
 
 export function CalendarView(
   chat: Chat,
@@ -12,45 +13,94 @@ export function CalendarView(
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  let monthGridCells = new React.State<HTMLElement[]>([]);
+  const selectedDate = new Date(dayInCalendar.value);
+  const selectedMonth = new React.State(selectedDate.getMonth());
+  const selectedYear = new React.State(selectedDate.getFullYear());
 
-  let previousMonth = 0;
+  React.bulkSubscribe([selectedMonth, selectedYear], () => {
+    selectedDate.setMonth(selectedMonth.value - 1);
+    selectedDate.setFullYear(selectedYear.value);
+    dayInCalendar.value = selectedDate.toISOString().split("T")[0];
+  });
+
+  function previousMonth() {
+    if (selectedMonth.value <= 1) {
+      selectedMonth.value = 12;
+      selectedYear.value -= 1;
+      return;
+    }
+    selectedMonth.value -= 1;
+  }
+
+  function nextMonth() {
+    if (selectedMonth.value >= 12) {
+      selectedMonth.value = 1;
+      selectedYear.value += 1;
+      return;
+    }
+    selectedMonth.value += 1;
+  }
+
+  let monthGridCells = new React.State<HTMLElement[]>([]);
   dayInCalendar.subscribe((newValue) => {
-    const selectedDate = new Date(newValue);
-    if (selectedDate.getMonth() == previousMonth) return;
-    
-    previousMonth = selectedDate.getMonth();
+    const newSelectedDate = new Date(newValue);
+
     const currentDate = new Date();
     monthGridCells.value = [];
 
     // initialize to first day of month
     currentDate.setDate(1);
-    currentDate.setMonth(selectedDate.getMonth());
+    currentDate.setMonth(newSelectedDate.getMonth());
+
+    // labels
+    for (let i = 0; i < 7; i++) {
+      monthGridCells.value.push(
+        <b class="secondary ellipsis width-100">{translation.weekdays[i]}</b>
+      );
+    }
 
     // create blank dates starting sunday
     const monthOffset = currentDate.getDay();
-    console.log(monthOffset);
     for (let i = 0; i < monthOffset; i++) {
-      monthGridCells.value.push(<div></div>)
+      monthGridCells.value.push(<div></div>);
     }
 
     // add day views
-    while (currentDate.getMonth() == selectedDate.getMonth()) {
+    while (currentDate.getMonth() == newSelectedDate.getMonth()) {
       monthGridCells.value.push(
-        MiniatureDayView(
-          chat,
-          messageObjects,
-          new Date(currentDate),
-        )
+        MiniatureDayView(chat, messageObjects, new Date(currentDate))
       );
       currentDate.setDate(currentDate.getDate() + 1);
     }
+
+    monthGridCells.callSubscriptions();
   });
 
   return (
     <div class="calendar-wrapper">
       <div class="month-grid padding scroll-v">
-        <input type="date" bind:value={dayInCalendar}></input>
+        <div class="flex-row justify-center gap">
+          <button
+            on:click={previousMonth}
+            aria-label={translation.previousMonth}
+          >
+            <span class="icon">arrow_back</span>
+          </button>
+          <input
+            style="width: 90px"
+            type="number"
+            bind:value={selectedMonth}
+          ></input>
+          <input
+            style="width: 110px"
+            type="number"
+            bind:value={selectedYear}
+          ></input>
+          <button on:click={nextMonth} aria-label={translation.nextMonth}>
+            <span class="icon">arrow_forward</span>
+          </button>
+        </div>
+        <hr></hr>
         <div
           class="grid gap"
           style="grid-template-columns: repeat(7, 1fr)"