Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-16 13:19:54 +01:00
Code Issues Packages Projects Releases Activity

chore(react/launch_bar): get week numbers to render

Browse Source
This commit is contained in:
Elian Doran
2025-12-04 19:38:56 +02:00
parent bab5326d7c
commit 0d8127140f
3 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/buttons/calendar.ts
View File

@@ -53,7 +53,7 @@ const DROPDOWN_TPL = `
</div>
</div>
<div class="calendar-week"></div>
</div>`;
const DAYS_OF_WEEK = [
@@ -262,11 +262,10 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
$newWeekNumber.addClass("calendar-date-exists").attr("data-href", `#root/${weekNoteId}`);
}
} else {
$newWeekNumber = $("<span>").addClass("calendar-week-number-disabled");
}
$newWeekNumber.addClass("calendar-week-number").attr("data-calendar-week-number", weekNoteId);
$newWeekNumber.append($("<span>").html(String(weekNumber)));
return $newWeekNumber;
}

43
apps/client/src/widgets/launch_bar/CalendarWidget.tsx
View File

@@ -4,11 +4,11 @@ import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_w
import { Dayjs, dayjs } from "@triliumnext/commons";
import appContext from "../../components/app_context";
import { useTriliumOptionInt } from "../react/hooks";
import { VNode } from "preact";
import clsx from "clsx";
import "./CalendarWidget.css";
import server from "../../services/server";
import { getMonthInformation } from "./CalendarWidgetUtils";
import { DateRangeInfo, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
import { VNode } from "preact";
interface DateNotesForMonth {
[date: string]: string;
@@ -50,14 +50,14 @@ function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO:
return (
<div className="calendar-body" data-calendar-area="month">
{firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} dates={monthInfo.prevMonth.dates} />}
<CurrentMonthDays date={date} dates={monthInfo.currentMonth.dates} />
{firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
<CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
<NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
</div>
)
}
function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) {
const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
@@ -65,15 +65,29 @@ function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
server.get<DateNotesForMonth>(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth);
}, [ date ]);
return dates.map(date => (
<CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />
));
return (
<>
<CalendarWeek weekNumber={weekNumbers[0]} />
{dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />)}
</>
)
}
function CurrentMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
return dates.map(date => (
<CalendarDay date={date} dateNotesForMonth={{}} />
));
function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
let dateCursor = date;
const currentMonth = date.month();
const items: VNode[] = [];
while (dateCursor.month() === currentMonth) {
const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
items.push(<CalendarWeek weekNumber={weekNumber} />)
}
items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} />)
dateCursor = dateCursor.add(1, "day");
}
return items;
}
function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
@@ -102,3 +116,8 @@ function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, date
);
}
function CalendarWeek({ weekNumber }: { weekNumber: number }) {
return (
<span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
)
}

23
apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
View File

@@ -1,6 +1,6 @@
import { Dayjs } from "@triliumnext/commons";
interface DateRangeInfo {
export interface DateRangeInfo {
weekNumbers: number[];
dates: Dayjs[];
}
@@ -8,7 +8,6 @@ interface DateRangeInfo {
export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
return {
prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),
currentMonth: getCurMonthDays(date, firstDayOfWeekISO),
nextMonth: getNextMonthDays(date, firstDayOfWeekISO)
}
}
@@ -29,24 +28,6 @@ function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: n
return { weekNumbers: [ weekNumber ], dates };
}
function getCurMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
let dateCursor = date;
const currentMonth = date.month();
const dates: Dayjs[] = [];
const weekNumbers: number[] = [];
while (dateCursor.month() === currentMonth) {
const weekNumber = getWeekNumber(date, firstDayOfWeekISO);
if (date.isoWeekday() === firstDayOfWeekISO) {
weekNumbers.push(weekNumber);
}
dates.push(dateCursor);
dateCursor = dateCursor.add(1, "day");
}
return { weekNumbers, dates };
}
function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
const lastDayOfMonth = date.endOf('month');
const lastDayISO = lastDayOfMonth.isoWeekday();
@@ -64,7 +45,7 @@ function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo
return { weekNumbers: [], dates };
}
function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
export function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
return weekStart.isoWeek();
}