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]}

src/styles.css

@@ -51,6 +51,8 @@
   padding-top: var(--content-padding);
 }
 
+
+
 [showingobjects][chatvisible] :is(.thread-view, footer) {
   display: flex;
 
@@ -116,6 +118,10 @@ main:has([showingobjects][chatopen]) #settings-tab {
   flex: 1;
 }
 
+.day-miniature[today] h3 {
+  color: var(--primary);
+}
+
 @media (min-width: 900px) {
   .calendar-wrapper:not([chatvisible] *) {
     flex-direction: row;
@@ -146,3 +152,17 @@ main:has([showingobjects][chatopen]) #settings-tab {
     max-width: var(--day-view-width);
   }
 }
+
+@media (max-width: 500px) {
+  .day-miniature {
+    padding: var(--control-padding) !important;
+  }
+
+  .day-miniature h3 {
+    font-size: 1rem;
+  }
+
+  .day-miniature > div {
+    display: none;
+  }
+}

src/translations.ts

@@ -10,6 +10,18 @@ const englishTranslations = {
   discard: "Discard",
   rename: "Rename",
 
+  weekdays: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+  previousMonth: "previous month",
+  nextMonth: "next month",
+
   // settings
   settings: "Settings",
   showSettings: "Show settings",
@@ -151,6 +163,16 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     discard: "Descartar",
     rename: "Renombrar",
 
+    weekdays: [
+      "Domingo",
+      "Lunes",
+      "Martes",
+      "Miércoles",
+      "Jueves",
+      "Viernes",
+      "Sábado",
+    ],
+
     // settings
     settings: "Configuración",
     showSettings: "Mostrar configuración",
@@ -289,6 +311,16 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     discard: "Verwerfen",
     rename: "Umbenennen",
 
+    weekdays: [
+      "Sonntag",
+      "Montag",
+      "Dienstag",
+      "Mittwoch",
+      "Donnerstag",
+      "Freitag",
+      "Samstag",
+    ],
+
     // settings
     settings: "Einstellungen",
     showSettings: "Einstellungen anzeigen",