gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-06 15:34:26 +01:00
Code Issues Actions 33 Packages Projects Releases Wiki Activity

chore(react/launch_bar): get days of the week to render

Browse Source
This commit is contained in:
Elian Doran 2025-12-04 19:43:47 +02:00
parent 0d8127140f
commit 62fd07258e
No known key found for this signature in database
3 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,18 +56,6 @@ const DROPDOWN_TPL = `
</div>`;
const DAYS_OF_WEEK = [
t("calendar.sun"),
t("calendar.mon"),
t("calendar.tue"),
t("calendar.wed"),
t("calendar.thu"),
t("calendar.fri"),
t("calendar.sat")
];
interface WeekCalculationOptions {
firstWeekType: number;
minDaysInFirstWeek: number;
@ -100,7 +88,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
super.doRender();
this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
this.$weekHeader = this.$dropdownContent.find(".calendar-week");
this.manageFirstDayOfWeek();
this.initWeekCalculation();
@ -216,14 +203,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.weekNoteEnable = noteAttributes.some(a => a.name === 'enableWeekNote');
}
// Store firstDayOfWeek as ISO (1–7)
manageFirstDayOfWeek() {
let localeDaysOfWeek = [...DAYS_OF_WEEK];
const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`).join(''));
}
initWeekCalculation() {
this.weekCalculationOptions = {
firstWeekType: options.getInt("firstWeekOfYear") || 0,

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

@ -7,7 +7,7 @@ import { useTriliumOptionInt } from "../react/hooks";
import clsx from "clsx";
import "./CalendarWidget.css";
import server from "../../services/server";
import { DateRangeInfo, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
import { DateRangeInfo, DAYS_OF_WEEK, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
import { VNode } from "preact";
interface DateNotesForMonth {
@ -17,8 +17,6 @@ interface DateNotesForMonth {
export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
const { title, icon } = useLauncherIconAndTitle(launcherNote);
const [ date, setDate ] = useState<Dayjs>();
const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
useEffect(() => {
@ -36,23 +34,41 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
}}
>
{date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
<Calendar date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
<Calendar date={date} />
</div>}
</LaunchBarDropdownButton>
)
}
function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
function Calendar({ date }: { date: Dayjs }) {
const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
const month = date.format('YYYY-MM');
const firstDay = date.startOf('month');
const firstDayISO = firstDay.isoWeekday();
const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO);
return (
<div className="calendar-body" data-calendar-area="month">
{firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
<CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
<NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
<>
<CalendarWeekHeader rawFirstDayOfWeek={rawFirstDayOfWeek} />
<div className="calendar-body" data-calendar-area="month">
{firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
<CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
<NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
</div>
</>
)
}
function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }) {
let localeDaysOfWeek = [...DAYS_OF_WEEK];
const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
return (
<div className="calendar-week">
{localeDaysOfWeek.map(dayOfWeek => <span>{dayOfWeek}</span>)}
</div>
)
}

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

@ -1,4 +1,15 @@
import { Dayjs } from "@triliumnext/commons";
import { t } from "../../services/i18n";
export const DAYS_OF_WEEK = [
t("calendar.sun"),
t("calendar.mon"),
t("calendar.tue"),
t("calendar.wed"),
t("calendar.thu"),
t("calendar.fri"),
t("calendar.sat")
];
export interface DateRangeInfo {
weekNumbers: number[];