From 71dc975aa945ec588465ae6ce1de604beabd8dd2 Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Mon, 31 Mar 2025 19:19:59 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20prev=20month=20dat?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/public/app/widgets/buttons/calendar.ts | 63 +++++++++++++++++-----
 src/public/stylesheets/calendar.css        | 14 +++++
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/src/public/app/widgets/buttons/calendar.ts b/src/public/app/widgets/buttons/calendar.ts
index b3275a086..4f3d6f5a4 100644
--- a/src/public/app/widgets/buttons/calendar.ts
+++ b/src/public/app/widgets/buttons/calendar.ts
@@ -256,17 +256,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         const $newDay = $("<a>").addClass("calendar-date").attr("data-calendar-date", utils.formatDateISO(this.date));
         const $date = $("<span>").html(String(num));
 
-        // if it's the first day of the month
-        if (num === 1) {
-            // 0  1  2  3  4  5  6
-            // Su Mo Tu We Th Fr Sa
-            // 1  2  3  4  5  6  0
-            // Mo Tu We Th Fr Sa Su
-            let dayOffset = day - this.firstDayOfWeek;
-            if (dayOffset < 0) dayOffset = 7 + dayOffset;
-            $newDay.css("marginLeft", dayOffset * 12.5 + "%");
-        }
-
         const dateNoteId = dateNotesForMonth[utils.formatDateISO(this.date)];
 
         if (dateNoteId) {
@@ -305,12 +294,61 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
     }
 
+    private getPrevMonthDays(firstDayOfWeek: number): { weekNumber: number, dates: Date[] } {
+        const prevMonthLastDay = new Date(this.date.getFullYear(), this.date.getMonth(), 0);
+        const daysToAdd = (firstDayOfWeek - this.firstDayOfWeek + 7) % 7;
+        const dates = [];
+
+        const firstDay = new Date(this.date.getFullYear(), this.date.getMonth(), 1);
+        const weekNumber = this.getWeekNumber(firstDay);
+
+        // Get dates from previous month
+        for (let i = daysToAdd - 1; i >= 0; i--) {
+            dates.push(new Date(prevMonthLastDay.getFullYear(), prevMonthLastDay.getMonth(), prevMonthLastDay.getDate() - i));
+        }
+
+        return { weekNumber, dates };
+    }
+
+    private getNextMonthDays(lastDayOfWeek: number): Date[] {
+        const nextMonthFirstDay = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 1);
+        const nextMonthDays = [];
+        for (let i = 0; i < (6 - lastDayOfWeek); i++) {
+            nextMonthDays.push(new Date(nextMonthFirstDay.getFullYear(), nextMonthFirstDay.getMonth(), i + 1));
+        }
+        return nextMonthDays;
+    }
+
     async createMonth() {
         const month = utils.formatDateISO(this.date).substring(0, 7);
         const dateNotesForMonth: DateNotesForMonth = await server.get(`special-notes/notes-for-month/${month}`);
 
         this.$month.empty();
 
+        const firstDay = new Date(this.date.getFullYear(), this.date.getMonth(), 1);
+        const firstDayOfWeek = firstDay.getDay();
+
+        // Add dates from previous month
+        if (firstDayOfWeek !== this.firstDayOfWeek) {
+            const { weekNumber, dates } = this.getPrevMonthDays(firstDayOfWeek);
+
+            const prevMonth = new Date(this.date.getFullYear(), this.date.getMonth() - 1, 1);
+            const prevMonthStr = utils.formatDateISO(prevMonth).substring(0, 7);
+            const dateNotesForPrevMonth: DateNotesForMonth = await server.get(`special-notes/notes-for-month/${prevMonthStr}`);
+
+            const $weekNumber = this.createWeekNumber(weekNumber);
+            this.$month.append($weekNumber);
+
+            dates.forEach(date => {
+                const tempDate = this.date;
+                this.date = date;
+                const $day = this.createDay(dateNotesForPrevMonth, date.getDate(), date.getDay());
+                $day.addClass('calendar-date-prev-month');
+                this.$month.append($day);
+                this.date = tempDate;
+            });
+        }
+
         const currentMonth = this.date.getMonth();
 
         while (this.date.getMonth() === currentMonth) {
@@ -319,13 +357,12 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             const weekNumber = this.getWeekNumber(safeDate);
 
             // Add week number if it's first day of week or first day of month
-            if (this.date.getDay() === this.firstDayOfWeek || this.date.getDate() === 1) {
+            if (this.date.getDay() === this.firstDayOfWeek) {
                 const $weekNumber = this.createWeekNumber(weekNumber);
                 this.$month.append($weekNumber);
             }
 
             const $day = this.createDay(dateNotesForMonth, this.date.getDate(), this.date.getDay());
-
             this.$month.append($day);
 
             this.date.setDate(this.date.getDate() + 1);
diff --git a/src/public/stylesheets/calendar.css b/src/public/stylesheets/calendar.css
index 66749ed0f..586adb46c 100644
--- a/src/public/stylesheets/calendar.css
+++ b/src/public/stylesheets/calendar.css
@@ -145,4 +145,18 @@
 
 .calendar-dropdown-widget .calendar-date:not(.calendar-date-active) {
     cursor: pointer;
+}
+
+.calendar-dropdown-widget .calendar-date-prev-month,
+.calendar-dropdown-widget .calendar-date-next-month {
+    color: var(--muted-text-color);
+    opacity: 0.6;
+}
+
+.calendar-dropdown-widget .calendar-date-prev-month:hover,
+.calendar-dropdown-widget .calendar-date-next-month:hover {
+    opacity: 1;
+    background-color: var(--hover-item-background-color);
+    color: var(--hover-item-text-color);
+    text-decoration: underline;
 }
\ No newline at end of file