Display notes of the week

src/components/Calendar/Calendar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import { Calendar as CalendarModel } from "obsidian-calendar-ui";
-import { getDateUID } from "obsidian-daily-notes-interface";
+import { IGranularity, getDateUID } from "obsidian-daily-notes-interface";
 import { SvelteComponentTyped } from "svelte";
 import { Signal, effect } from "@preact/signals";
 
@@ -10,9 +10,14 @@ type CalendarModelProps = CalendarModel extends SvelteComponentTyped<infer U>
 
 export interface CalendarProps extends Omit<CalendarModelProps, "selectedId"> {
   activeDay: Signal<moment.Moment | undefined>;
+  granularity: Signal<IGranularity>;
 }
 
-export default function Calendar({ activeDay, ...props }: CalendarProps) {
+export default function Calendar({
+  activeDay,
+  granularity,
+  ...props
+}: CalendarProps) {
   const elRef = useRef<HTMLDivElement | null>(null);
   const [calendar, setCalendar] = useState<CalendarModel>();
 
@@ -29,7 +34,7 @@ export default function Calendar({ activeDay, ...props }: CalendarProps) {
     const day = activeDay.value;
     if (!day) return;
 
-    calendar?.$set({ selectedId: getDateUID(day, "day") });
+    calendar?.$set({ selectedId: getDateUID(day, granularity.value) });
   });
 
   return <div ref={elRef}></div>;

src/notes-source.ts

@@ -22,8 +22,26 @@ const noteSource: ICalendarSource = {
       dots,
     };
   },
-  async getWeeklyMetadata() {
-    return {};
+  async getWeeklyMetadata(date) {
+    const file = app.vault
+      .getMarkdownFiles()
+      .find((f) => date.isSame(f.stat.ctime, "week"));
+
+    const dots: IDot[] = [];
+    const classes: string[] = [];
+
+    if (file) {
+      dots.push({
+        className: "hola",
+        color: "default",
+        isFilled: true,
+      });
+    }
+
+    return {
+      classes,
+      dots,
+    };
   },
 };
 

src/store.ts

@@ -2,11 +2,14 @@ import { signal } from "@preact/signals";
 import { moment } from "obsidian";
 import { ListEntry } from "types";
 
-async function fetchFiles(day: moment.Moment | undefined) {
+async function fetchFiles(
+  day: moment.Moment | undefined,
+  granularity: moment.unitOfTime.StartOf
+) {
   if (!day) return [];
 
   const files = app.vault.getMarkdownFiles().filter((file) => {
-    return day.isSame(file.stat.ctime, "day");
+    return day.isSame(file.stat.ctime, granularity);
   });
 
   if (files.length === 0) return [];
@@ -23,18 +26,21 @@ async function fetchFiles(day: moment.Moment | undefined) {
 }
 
 function createJournalStore() {
-  const day = signal<moment.Moment | undefined>(undefined);
+  const date = signal<moment.Moment | undefined>(undefined);
+  const granularity = signal<"day" | "week">("day");
   const entries = signal<ListEntry[]>([]);
 
   const store = {
-    day,
+    date,
     entries,
+    granularity,
     async refresh() {
-      entries.value = await fetchFiles(day.value);
+      entries.value = await fetchFiles(date.value, granularity.value);
     },
   };
 
-  day.subscribe(store.refresh);
+  date.subscribe(store.refresh);
+  granularity.subscribe(store.refresh);
 
   return store;
 }

src/view.tsx

@@ -16,6 +16,7 @@ export default class CalendarView extends ItemView {
     super(leaf);
 
     this.onClickDay = this.onClickDay.bind(this);
+    this.onClickWeek = this.onClickWeek.bind(this);
     this.onOpenEntry = this.onOpenEntry.bind(this);
 
     this.registerEvent(this.app.vault.on("create", JournalStore.refresh));
@@ -42,9 +43,11 @@ export default class CalendarView extends ItemView {
       <>
         <Calendar
           showWeekNums
-          activeDay={JournalStore.day}
+          activeDay={JournalStore.date}
+          granularity={JournalStore.granularity}
           sources={sources}
           onClickDay={this.onClickDay}
+          onClickWeek={this.onClickWeek}
         />
         <List entries={JournalStore.entries} onOpenEntry={this.onOpenEntry} />
       </>,
@@ -57,7 +60,13 @@ export default class CalendarView extends ItemView {
   }
 
   onClickDay(day: moment.Moment) {
-    JournalStore.day.value = day;
+    JournalStore.granularity.value = "day";
+    JournalStore.date.value = day;
+  }
+
+  onClickWeek(day: moment.Moment) {
+    JournalStore.granularity.value = "week";
+    JournalStore.date.value = day;
   }
 
   onOpenEntry(entry: ListEntry) {