add month grid

src/Model/Chat/chatModel.ts

@@ -9,7 +9,10 @@ import {
   parseValidObject,
   stringify,
 } from "../Utility/utility";
-import StorageModel, { StorageModelSubPath, filePaths } from "../Global/storageModel";
+import StorageModel, {
+  StorageModelSubPath,
+  filePaths,
+} from "../Global/storageModel";
 import { decryptString, encryptString } from "../Utility/crypto";
 
 import ChatListModel from "./chatListModel";
@@ -39,19 +42,31 @@ export default class ChatModel {
 
   // paths
   getBasePath = (): string[] => {
-    return StorageModel.getPath(StorageModelSubPath.Chat, filePaths.chat.chatBase(this.id));
+    return StorageModel.getPath(
+      StorageModelSubPath.Chat,
+      filePaths.chat.chatBase(this.id)
+    );
   };
 
   getInfoPath = (): string[] => {
-    return StorageModel.getPath(StorageModelSubPath.Chat, filePaths.chat.info(this.id));
+    return StorageModel.getPath(
+      StorageModelSubPath.Chat,
+      filePaths.chat.info(this.id)
+    );
   };
 
   getColorPath = (): string[] => {
-    return StorageModel.getPath(StorageModelSubPath.Chat, filePaths.chat.color(this.id));
+    return StorageModel.getPath(
+      StorageModelSubPath.Chat,
+      filePaths.chat.color(this.id)
+    );
   };
 
   getMessageDirPath = (): string[] => {
-    return StorageModel.getPath(StorageModelSubPath.Chat, filePaths.chat.messages(this.id));
+    return StorageModel.getPath(
+      StorageModelSubPath.Chat,
+      filePaths.chat.messages(this.id)
+    );
   };
 
   getMessagePath = (id: string): string[] => {
@@ -236,7 +251,7 @@ export default class ChatModel {
     this.loadColor();
     this.subscribe();
 
-    this.fileModel = new FileModel(this, this.storageModel);
+    this.fileModel = new FileModel(this.storageModel, this.settingsModel, this);
   }
 
   // utility

src/Model/Files/boardsAndTasksModel.ts

@@ -6,17 +6,22 @@ import {
 } from "../Utility/typeSafety";
 import FileModel, { FileContent, FileModelSubPath } from "./fileModel";
 
+import CalendarModel from "./calendarModel";
 import ChatModel from "../Chat/chatModel";
 import { Color } from "../../colors";
 import { HandlerManager } from "../Utility/utility";
+import SettingsModel from "../Global/settingsModel";
 import StorageModel from "../Global/storageModel";
 import { v4 } from "uuid";
 
 export default class BoardsAndTasksModel {
   storageModel: StorageModel;
+  settingsModel: SettingsModel;
   chatModel: ChatModel;
   fileModel: FileModel;
 
+  calendarModel: CalendarModel;
+
   // data
   boardHandlerManager: HandlerManager<BoardInfoFileContent> =
     new HandlerManager();
@@ -153,8 +158,6 @@ export default class BoardsAndTasksModel {
   };
 
   storeTask = (taskFileContent: TaskFileContent): void => {
-    console.log(taskFileContent);
-
     // store info
     this.fileModel.storeFileContent(taskFileContent);
 
@@ -164,6 +167,9 @@ export default class BoardsAndTasksModel {
       taskFileContent.fileId
     );
     this.storageModel.write(taskReferencePath, "");
+
+    // add to calendar
+    this.calendarModel.storeTaskReference(taskFileContent);
   };
 
   listTaskIds = (boardId: string): string[] => {
@@ -214,12 +220,20 @@ export default class BoardsAndTasksModel {
   // init
   constructor(
     storageModel: StorageModel,
+    settingsModel: SettingsModel,
     chatModel: ChatModel,
     fileModel: FileModel
   ) {
+    this.storageModel = storageModel;
+    this.settingsModel = settingsModel;
     this.chatModel = chatModel;
     this.fileModel = fileModel;
-    this.storageModel = storageModel;
+
+    this.calendarModel = new CalendarModel(
+      this.storageModel,
+      this.settingsModel,
+      this.fileModel
+    );
   }
 
   // utility

src/Model/Files/calendarModel.ts

@@ -1,18 +1,15 @@
-// this file extends the BoardsAndTasksModel regarding calendar features.
 // it is responsible for managing calendar-realted reference files for tasks.
 
-import BoardsAndTasksModel, {
-  TaskFileContent,
-  TaskFileContentReference,
-} from "./boardsAndTasksModel";
-import FileModel, { FileContent, FileModelSubPath } from "./fileModel";
+import FileModel, { FileModelSubPath } from "./fileModel";
 
+import SettingsModel from "../Global/settingsModel";
 import StorageModel from "../Global/storageModel";
-import { checkMatchesObjectStructure } from "../Utility/typeSafety";
+import { TaskFileContent } from "./boardsAndTasksModel";
 
 export default class CalendarModel {
   storageModel: StorageModel;
   fileModel: FileModel;
+  settingsModel: SettingsModel;
 
   // paths
   getBasePath = (): string[] => {
@@ -31,18 +28,10 @@ export default class CalendarModel {
     return [...this.getMonthContainerPath(), monthString];
   };
 
-  // handlers
-  handleFileContent = (fileContent: FileContent<string>): void => {
-    if (
-      checkMatchesObjectStructure(fileContent, TaskFileContentReference) ==
-      false
-    )
-      return;
-  };
-
   // main
   storeTaskReference = (taskFileContent: TaskFileContent): void => {
     if (taskFileContent.date == undefined) return;
+
     const monthString: string = CalendarModel.isoToMonthString(
       taskFileContent.date
     );
@@ -58,21 +47,73 @@ export default class CalendarModel {
     return this.storageModel.list(monthPath);
   };
 
+  generateMonthGrid = <T>(
+    year: number,
+    month: number,
+    defaultValueCreator: () => T
+  ): MonthGrid<T> => {
+    // get first day of month
+    const date: Date = new Date();
+    date.setFullYear(year);
+    date.setMonth(month - 1);
+    date.setDate(1);
+
+    // get offset
+    const offset: number =
+      date.getDay() - parseInt(this.settingsModel.firstDayOfWeek);
+
+    // get total day count
+    date.setMonth(month);
+    date.setDate(-1);
+    const daysInMonth: number = date.getDate() + 1;
+
+    const grid: MonthGrid<T> = {
+      offset,
+      days: {},
+    };
+
+    for (let i = 0; i < daysInMonth; i++) {
+      grid.days[i + 1] = defaultValueCreator();
+    }
+
+    return grid;
+  };
+
   // init
   constructor(
     storageModel: StorageModel,
-    fileModel: FileModel,  ) {
+    settingsModel: SettingsModel,
+    fileModel: FileModel
+  ) {
     this.storageModel = storageModel;
+    this.settingsModel = settingsModel;
     this.fileModel = fileModel;
   }
 
   // utility
   static isoToMonthString = (dateISOString: string): string => {
     const [year, month, _] = dateISOString.split("-");
-    return `${year}-${month}`;
+    return CalendarModel.getMonthString(year, month);
+  };
+
+  static isoToDateString = (dateISOString: string): string | undefined => {
+    const [year, month, date, _] = dateISOString.split("-");
+    return date;
+  };
+
+  static getMonthString = (year: string = "", month: string = ""): string => {
+    const paddedYear: string = year.padStart(4, "0");
+    const paddedMonth: string = month.padStart(2, "0");
+    return `${paddedYear}-${paddedMonth}`;
   };
 }
 
 export enum CalendarModelSubPaths {
   Months = "months",
 }
+
+// types
+export interface MonthGrid<T> {
+  offset: number;
+  days: { [date: string]: T };
+}

src/Model/Files/fileModel.ts

@@ -1,26 +1,28 @@
 // this file is responsible for managing files within chats.
 
 import { DATA_VERSION, ValidObject } from "../Utility/typeSafety";
+import StorageModel, {
+  StorageModelSubPath,
+  filePaths,
+} from "../Global/storageModel";
 import {
-  HandlerManager,
   StringEntryObject,
   createTimestamp,
   parseValidObject,
   stringify,
 } from "../Utility/utility";
-import StorageModel, { StorageModelSubPath, filePaths } from "../Global/storageModel";
 
 import BoardsAndTasksModel from "./boardsAndTasksModel";
-import CalendarModel from "./calendarModel";
 import ChatModel from "../Chat/chatModel";
+import SettingsModel from "../Global/settingsModel";
 import { v4 } from "uuid";
 
 export default class FileModel {
-  chatModel: ChatModel;
   storageModel: StorageModel;
+  settingsModel: SettingsModel;
 
+  chatModel: ChatModel;
   boardsAndTasksModel: BoardsAndTasksModel;
-  calendarModel: CalendarModel;
 
   // paths
   getBasePath = (): string[] => {
@@ -34,9 +36,7 @@ export default class FileModel {
     return [...this.getBasePath(), FileModelSubPath.Data];
   };
 
-  getModelContainerPath = (
-    modelName: FileModelSubPath
-  ): string[] => {
+  getModelContainerPath = (modelName: FileModelSubPath): string[] => {
     return [...this.getBasePath(), FileModelSubPath.Model, modelName];
   };
 
@@ -65,7 +65,6 @@ export default class FileModel {
     if (didStore == false) return;
 
     this.boardsAndTasksModel.handleFileContent(fileContent);
-    this.calendarModel.handleFileContent(fileContent);
   };
 
   // methods
@@ -135,14 +134,23 @@ export default class FileModel {
     );
     return fileContent;
   };
-  
+
   // init
-  constructor(chatModel: ChatModel, storageModel: StorageModel) {
+  constructor(
+    storageModel: StorageModel,
+    settingsModel: SettingsModel,
+    chatModel: ChatModel
+  ) {
     this.chatModel = chatModel;
+    this.settingsModel = settingsModel;
     this.storageModel = storageModel;
 
-    this.boardsAndTasksModel = new BoardsAndTasksModel(this.storageModel, chatModel, this);
-    this.calendarModel = new CalendarModel(this.storageModel, this);
+    this.boardsAndTasksModel = new BoardsAndTasksModel(
+      this.storageModel,
+      this.settingsModel,
+      chatModel,
+      this
+    );
   }
 
   // utility
@@ -175,10 +183,12 @@ export enum FileModelSubPath {
   ModelView = "view",
   ModelTask = "tasks",
   ModelCalendar = "calendar",
-};
+}
 
 // types
-export interface FileContent<T extends string> extends ValidObject, StringEntryObject {
+export interface FileContent<T extends string>
+  extends ValidObject,
+    StringEntryObject {
   fileId: string;
   fileContentId: string;
   creationDate: string;

src/View/ChatPages/boardPage.tsx

@@ -119,7 +119,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
         boardViewModel.taskViewModels,
         boardViewModel.filteredTaskViewModels,
         TaskViewModelToEntry,
-        boardViewModel.getStringsFromTaskViewModel,
+        TaskViewModel.getStringsForFilter,
         boardViewModel.isPresentingFilterModal
       )}
       <div children:set={taskSettingsModal}></div>

src/View/ChatPages/calendarPage.css

@@ -0,0 +1,61 @@
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper {
+  display: flex;
+
+  padding: var(--gap-between-tiles);
+  gap: var(--gap-between-tiles);
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > input {
+  min-height: unset;
+  height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+#calendar-page .input-wrapper > input::-webkit-outer-spin-button,
+#calendar-page .input-wrapper > input::-webkit-innner-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+
+  margin: 0px;
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > .year-input {
+  width: 4.4rem;
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > .month-input {
+  width: 3.1rem;
+}

src/View/ChatPages/calendarPage.tsx

@@ -1,9 +1,101 @@
+import "./calendarPage.css";
+
 import * as React from "bloatless-react";
 
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
+import { MonthGrid } from "../Components/monthGrid";
+import { TaskViewModelToEntry } from "../Components/taskEntry";
+import { createPropertyValueIndexState } from "../Components/propertyValueList";
+import { translations } from "../translations";
 
 export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
   calendarPageViewModel.loadData();
 
-  return <div id="calendar-page"></div>;
+  const mainContent = React.createProxyState(
+    [calendarPageViewModel.monthGrid],
+    () => {
+      if (calendarPageViewModel.monthGrid.value == undefined) {
+        return <div></div>;
+      } else {
+        return MonthGrid(calendarPageViewModel.monthGrid.value);
+      }
+    }
+  );
+
+  return (
+    <div id="calendar-page">
+      <div class="pane-wrapper">
+        <div class="pane">
+          <div class="toolbar">
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.todayButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showToday}
+              >
+                <span class="icon">today</span>
+              </button>
+            </span>
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.previousMonthButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showPreviousMonth}
+              >
+                <span class="icon">arrow_back</span>
+              </button>
+              <span class="input-wrapper">
+                <input
+                  class="year-input"
+                  type="number"
+                  aria-label={
+                    translations.chatPage.calendar.yearInputAudioLabel
+                  }
+                  placeholder={
+                    translations.chatPage.calendar.yearInputPlaceholder
+                  }
+                  bind:value={calendarPageViewModel.selectedYear}
+                ></input>
+                <input
+                  class="month-input"
+                  type="number"
+                  aria-label={
+                    translations.chatPage.calendar.monthInputAudioLabel
+                  }
+                  placeholder={
+                    translations.chatPage.calendar.monthInputPlaceholder
+                  }
+                  bind:value={calendarPageViewModel.selectedMonth}
+                ></input>
+              </span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.nextMonthButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showNextMonth}
+              >
+                <span class="icon">arrow_forward</span>
+              </button>
+            </span>
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.task.createTaskButtonAudioLabel
+                }
+              >
+                <span class="icon">add</span>
+              </button>
+            </span>
+          </div>
+          <div class="content" children:set={mainContent}></div>
+        </div>
+      </div>
+    </div>
+  );
 }

src/View/Components/monthGrid.css

@@ -0,0 +1,25 @@
+.month-grid-wrapper {
+  display: grid;
+  gap: var(--gap-between-tiles);
+
+  height: 100%;
+
+  animation: slide-up var(--animation-duration);
+
+  grid-template-columns: repeat(7, minmax(0px, 1fr));
+  grid-auto-rows: 1fr;
+}
+
+.month-grid-wrapper .tile > div {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    width: 100%;
+}
+
+@media (max-width: 640px) {
+  .month-grid-wrapper .tile {
+    padding: 4px;
+  }
+}

src/View/Components/monthGrid.tsx

@@ -0,0 +1,39 @@
+import "./monthGrid.css";
+
+import * as React from "bloatless-react";
+import { MonthGrid } from "../../Model/Files/calendarModel";
+import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
+
+export function MonthGrid<T>(monthGrid: MonthGrid<React.MapState<T>>) {
+  const offsetElements: HTMLElement[] = [];
+  for (let i = 0; i < monthGrid.offset; i++) {
+    offsetElements.push(<div></div>);
+  }
+
+  const converter: React.StateItemConverter<TaskViewModel> = (
+    taskViewModel
+  ) => {
+    return <span class="ellipsis secondary">{taskViewModel.task.name}</span>;
+  };
+
+  return (
+    <div class="month-grid-wrapper">
+      {...offsetElements}
+      {...Object.entries(monthGrid.days).map((entry) => {
+        const [date, mapState] = entry;
+
+        return (
+          <button class="tile">
+            <div>
+              <b>{date}</b>
+              <div
+                class="flex-column gap clip"
+                children:append={[mapState, converter]}
+              ></div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/View/Components/textSpan.tsx

@@ -0,0 +1,7 @@
+import * as React from "bloatless-react";
+
+export const StringToTextSpan: React.StateItemConverter<string> = (
+  string: string
+) => {
+  return <span>{string}</span>
+};

src/View/chatPage.css

@@ -195,6 +195,11 @@ body[showing-chat] #chat-page-wrapper {
   padding: 0px;
 }
 
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
+  display: flex;
+  align-items: center;
+}
+
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }

src/View/translations.ts

@@ -185,6 +185,19 @@ const englishTranslations = {
 
       renameCategoryInputPlaceholder: "Rename category,"
     },
+
+    calendar: {
+      todayButtonAudioLabel: "go to today",
+
+      previousMonthButtonAudioLabel: "previous month",
+      nextMonthButtonAudioLabel: "next month",
+
+      yearInputAudioLabel: "year",
+      monthInputAudioLabel: "month",
+
+      yearInputPlaceholder: "2000",
+      monthInputPlaceholder: "01",
+    }
   },
 };
 

src/ViewModel/Chat/chatListViewModel.ts

@@ -23,9 +23,9 @@ export default class ChatListViewModel {
   newChatPrimaryChannel: React.State<string> = new React.State("");
   chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
 
-  selectedChat: React.State<ChatViewModel | undefined> = new React.State<
-    ChatViewModel | undefined
-  >(undefined);
+  selectedChat: React.State<ChatViewModel | undefined> = new React.State<any>(
+    undefined
+  );
 
   // guards
   cannotCreateChat = React.createProxyState(

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -14,11 +14,11 @@ export default class ChatMessageViewModel {
   sender: string;
   dateSent: string;
   body: React.State<string> = new React.State("");
-  status: React.State<ChatMessageStatus | any> = new React.State<
-    ChatMessageStatus | undefined
-  >(undefined);
+  status: React.State<ChatMessageStatus | any> = new React.State<any>(
+    undefined
+  );
   sentByUser: boolean;
-  
+
   // state
   isPresentingInfoModal: React.State<boolean> = new React.State(false);
 
@@ -36,11 +36,11 @@ export default class ChatMessageViewModel {
   // view
   showInfoModal = (): void => {
     this.isPresentingInfoModal.value = true;
-  }
+  };
 
   hideInfoModal = (): void => {
     this.isPresentingInfoModal.value = false;
-  }
+  };
 
   // load
   loadData = (): void => {

src/ViewModel/Chat/chatViewModel.ts

@@ -27,8 +27,8 @@ export default class ChatViewModel {
   settingsPageViewModel: SettingsPageViewModel;
 
   // state
-  displayedColor: React.State<Color> = new React.State<Color>(Color.Standard);
-  selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
+  displayedColor: React.State<Color> = new React.State<any>(Color.Standard);
+  selectedPage: React.State<ChatPageType> = new React.State<any>(
     ChatPageType.Messages
   );
 
@@ -99,7 +99,7 @@ export default class ChatViewModel {
     this.calendarViewModel = new CalendarPageViewModel(
       coreViewModel,
       this.storageModel,
-      this.chatModel.fileModel.calendarModel,
+      this.chatModel.fileModel.boardsAndTasksModel.calendarModel,
       this.chatModel.fileModel.boardsAndTasksModel
     );
     this.taskPageViewModel = new TaskPageViewModel(

src/ViewModel/Pages/boardViewModel.ts

@@ -27,15 +27,15 @@ export default class BoardViewModel {
 
   // state
   name: React.State<string> = new React.State("");
-  color: React.State<Color> = new React.State<Color>(Color.Standard);
+  color: React.State<Color> = new React.State<any>(Color.Standard);
 
   index: React.State<number> = new React.State(0);
 
-  selectedPage: React.State<BoardPageType> = new React.State<BoardPageType>(
+  selectedPage: React.State<BoardPageType> = new React.State<any>(
     BoardPageType.List
   );
   selectedTaskViewModel: React.State<TaskViewModel | undefined> =
-    new React.State<TaskViewModel | undefined>(undefined);
+    new React.State<any>(undefined);
 
   isSelected: React.State<boolean>;
   isPresentingSettingsModal: React.State<boolean> = new React.State(false);
@@ -190,19 +190,6 @@ export default class BoardViewModel {
     }
   };
 
-  // filter
-  getStringsFromTaskViewModel = (taskViewModel: TaskViewModel): string[] => {
-    return [
-      taskViewModel.task.name,
-      taskViewModel.task.description ?? "",
-      taskViewModel.task.category ?? "",
-      taskViewModel.task.status ?? "",
-      taskViewModel.task.priority ?? "",
-      taskViewModel.task.date ?? "",
-      taskViewModel.task.time ?? "",
-    ];
-  };
-
   // load
   loadListRelevantData = (): void => {
     this.name.value = this.boardInfo.name;

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -3,8 +3,8 @@ import * as React from "bloatless-react";
 import BoardsAndTasksModel, {
   TaskFileContent,
 } from "../../Model/Files/boardsAndTasksModel";
+import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel";
 
-import CalendarModel from "../../Model/Files/calendarModel";
 import CoreViewModel from "../Global/coreViewModel";
 import StorageModel from "../../Model/Global/storageModel";
 import TaskViewModel from "./taskViewModel";
@@ -12,7 +12,15 @@ import TaskViewModel from "./taskViewModel";
 export default class CalendarPageViewModel {
   storageModel: StorageModel;
   calendarModel: CalendarModel;
-  boardAndTasksModel: BoardsAndTasksModel;
+  boardsAndTasksModel: BoardsAndTasksModel;
+
+  // data
+  get monthString(): string {
+    return CalendarModel.getMonthString(
+      this.selectedYear.value.toString(),
+      this.selectedMonth.value.toString()
+    );
+  }
 
   // paths
   getBasePath = (): string[] => {
@@ -20,35 +28,106 @@ export default class CalendarPageViewModel {
   };
 
   // state
-  taskViewModels: React.MapState<TaskViewModel> = new React.MapState();
+  selectedYear: React.State<number> = new React.State(0);
+  selectedMonth: React.State<number> = new React.State(0);
+
+  monthGrid: React.State<MonthGrid<React.MapState<TaskViewModel>> | undefined> =
+    new React.State<any>(undefined);
 
   // view
+  getTaskMapState = (
+    taskFileContent: TaskFileContent
+  ): React.MapState<TaskViewModel> | null => {
+    if (this.monthGrid.value == null) return null;
+
+    const dateString: string | undefined = CalendarModel.isoToDateString(
+      taskFileContent.date ?? ""
+    );
+    if (dateString == undefined) return null;
+    return this.monthGrid.value.days[dateString];
+  };
+
   showTask = (taskFileContent: TaskFileContent): void => {
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
-      this.boardAndTasksModel,
+      this.boardsAndTasksModel,
       null,
       this,
       taskFileContent
     );
-    this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
+    const mapState: React.MapState<TaskViewModel> | null =
+      this.getTaskMapState(taskFileContent);
+    mapState?.set(taskFileContent.fileId, taskViewModel);
+  };
+
+  removeTaskFromList = (taskFileContent: TaskFileContent): void => {
+    const mapState: React.MapState<TaskViewModel> | null =
+      this.getTaskMapState(taskFileContent);
+    mapState?.remove(taskFileContent.fileId);
+  };
+
+  showToday = (): void => {
+    const today: Date = new Date();
+    this.selectedYear.value = today.getFullYear();
+    this.selectedMonth.value = today.getMonth() + 1;
+  };
+
+  showPreviousMonth = (): void => {
+    this.selectedMonth.value -= 1;
+
+    if (this.selectedMonth.value <= 0) {
+      this.selectedYear.value -= 1;
+      this.selectedMonth.value = 12;
+    }
+  };
+
+  showNextMonth = (): void => {
+    this.selectedMonth.value += 1;
+
+    if (this.selectedMonth.value >= 13) {
+      this.selectedYear.value += 1;
+      this.selectedMonth.value = 1;
+    }
   };
 
   // storage
 
   // load
-  loadData = (): void => {}
+  loadTasks = (): void => {
+    this.monthGrid.value = this.calendarModel.generateMonthGrid(
+      this.selectedYear.value,
+      this.selectedMonth.value,
+      () => new React.MapState()
+    );
+    const taskIds: string[] = this.calendarModel.listTaskIds(this.monthString);
+
+    for (const taskId of taskIds) {
+      const taskFileContent: TaskFileContent | null =
+        this.boardsAndTasksModel.getLatestTaskFileContent(taskId);
+      if (taskFileContent == null) continue;
+      this.showTask(taskFileContent);
+    }
+  };
+
+  loadData = (): void => {
+    this.loadTasks();
+    this.showToday();
+  };
 
   // init
   constructor(
     public coreViewModel: CoreViewModel,
     storageModel: StorageModel,
     calendarModel: CalendarModel,
-    boardAndTasksModel: BoardsAndTasksModel,
+    boardAndTasksModel: BoardsAndTasksModel
   ) {
     this.storageModel = storageModel;
     this.calendarModel = calendarModel;
-    this.boardAndTasksModel = boardAndTasksModel;
+    this.boardsAndTasksModel = boardAndTasksModel;
+
+    React.bulkSubscribe([this.selectedYear, this.selectedMonth], () => {
+      this.loadTasks();
+    });
   }
 }
 

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -21,7 +21,7 @@ export default class SettingsPageViewModel {
       this.shouldShowEncryptionKey.value == true ? "text" : "password"
     );
 
-  color: React.State<Color> = new React.State<Color>(Color.Standard);
+  color: React.State<Color> = new React.State<any>(Color.Standard);
 
   // guards
   cannotSetPrimaryChannel: React.State<boolean> = React.createProxyState(

src/ViewModel/Pages/taskPageViewModel.ts

@@ -39,9 +39,9 @@ export default class TaskPageViewModel {
 
   boardViewModels: React.MapState<BoardViewModel> = new React.MapState();
 
-  selectedBoardId: React.State<string | undefined> = new React.State<
-    string | undefined
-  >(undefined);
+  selectedBoardId: React.State<string | undefined> = new React.State<any>(
+    undefined
+  );
 
   // guards
   cannotCreateBoard: React.State<boolean> = React.createProxyState(

src/ViewModel/Pages/taskViewModel.ts

@@ -200,4 +200,17 @@ export default class TaskViewModel {
       this.switchVersion(selectedVersionId);
     });
   }
+  
+  // utility
+  static getStringsForFilter = (taskViewModel: TaskViewModel): string[] => {
+    return [
+      taskViewModel.task.name,
+      taskViewModel.task.description ?? "",
+      taskViewModel.task.category ?? "",
+      taskViewModel.task.status ?? "",
+      taskViewModel.task.priority ?? "",
+      taskViewModel.task.date ?? "",
+      taskViewModel.task.time ?? "",
+    ];
+  };
 }