Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 02:02:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 🎸 add prev month dates

Browse Source
This commit is contained in:
Jin 2025-03-31 19:19:59 +02:00
parent dece88eef7
commit 71dc975aa9
2 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/public/app/widgets/buttons/calendar.ts
View File

@ -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);

14
src/public/stylesheets/calendar.css
View File

@ -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;
}