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)"

src/Views/Objects/miniatureDayView.tsx

@@ -33,6 +33,7 @@ export function MiniatureDayView(
     [dayInCalendar],
     () => dayInCalendar.value == dateString
   );
+  const isToday = new Date().toDateString() == dayToShow.toDateString();
 
   messageObjects.handleAddition(processObject);
 
@@ -45,7 +46,11 @@ export function MiniatureDayView(
     const hourInMinutes = parseInt(hour) * 60;
     const minutesTotal = parseInt(minute) + hourInMinutes;
 
-    const view = <b class="ellipsis">{chat.getObjectTitle(messageObject)}</b>;
+    const view = (
+      <span class="secondary ellipsis">
+        {chat.getObjectTitle(messageObject)}
+      </span>
+    );
     view.style.order = minutesTotal;
     return view;
   };
@@ -54,9 +59,11 @@ export function MiniatureDayView(
     <button
       on:click={select}
       toggle:selected={isSelected}
-      class="tile flex-column align-start"
+      toggle:today={isToday}
+      class="day-miniature tile flex-column align-start"
+      style="aspect-ratio: 1/1; overflow: hidden"
     >
-      <h3>{dayToShow.getDate()}</h3>
+      <h3 class="margin-0">{dayToShow.getDate()}</h3>
       <div
         class="flex-column gap"
         children:append={[objectsForDayView, objectConverter]}