TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

chore(react/launch_bar): clicking on calendar days

Browse Source
This commit is contained in:
Elian Doran 2025-12-05 09:11:50 +02:00
parent 07498c6bef
commit 1af76c4d06
No known key found for this signature in database
3 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,21 +46,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.manageFirstDayOfWeek(); this.manageFirstDayOfWeek();
this.initWeekCalculation(); this.initWeekCalculation();
// Date click
this.$dropdownContent.on("click", ".calendar-date", async (ev) => {
const date = $(ev.target).closest(".calendar-date").attr("data-calendar-date");
if (date) {
const note = await dateNoteService.getDayNote(date);
if (note) {
appContext.tabManager.getActiveContext()?.setNote(note.noteId);
this.dropdown?.hide();
} else {
toastService.showError(t("calendar.cannot_find_day_note"));
}
}
ev.stopPropagation();
});
// Week click // Week click
this.$dropdownContent.on("click", ".calendar-week-number", async (ev) => { this.$dropdownContent.on("click", ".calendar-week-number", async (ev) => {
if (!this.weekNoteEnable) { if (!this.weekNoteEnable) {

9
apps/client/src/widgets/launch_bar/Calendar.tsx
View File

@ -1,7 +1,7 @@
import { useTriliumOptionInt } from "../react/hooks"; import { useTriliumOptionInt } from "../react/hooks";
import clsx from "clsx"; import clsx from "clsx";
import server from "../../services/server"; import server from "../../services/server";
import { VNode } from "preact"; import { TargetedMouseEvent, VNode } from "preact";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import { Dayjs } from "@triliumnext/commons"; import { Dayjs } from "@triliumnext/commons";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
@ -29,6 +29,7 @@ export interface CalendarArgs {
date: Dayjs; date: Dayjs;
todaysDate: Dayjs; todaysDate: Dayjs;
activeDate: Dayjs | null; activeDate: Dayjs | null;
onDateClicked(date: string, e: TargetedMouseEvent<HTMLAnchorElement>): void;
} }
export default function Calendar(args: CalendarArgs) { export default function Calendar(args: CalendarArgs) {
@ -118,8 +119,9 @@ function NextMonthDays({ date, dates, ...args }: { date: Dayjs, dates: Dayjs[] }
)); ));
} }
function CalendarDay({ date, dateNotesForMonth, className, activeDate, todaysDate }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string } & CalendarArgs) { function CalendarDay({ date, dateNotesForMonth, className, activeDate, todaysDate, onDateClicked }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string } & CalendarArgs) {
const dateNoteId = dateNotesForMonth?.[date.local().format('YYYY-MM-DD')]; const dateString = date.local().format('YYYY-MM-DD');
const dateNoteId = dateNotesForMonth?.[dateString];
return ( return (
<a <a
className={clsx("calendar-date", className, className={clsx("calendar-date", className,
@ -129,6 +131,7 @@ function CalendarDay({ date, dateNotesForMonth, className, activeDate, todaysDat
)} )}
data-calendar-date={date.local().format("YYYY-MM-DD")} data-calendar-date={date.local().format("YYYY-MM-DD")}
data-href={dateNoteId && `#root/${dateNoteId}`} data-href={dateNoteId && `#root/${dateNoteId}`}
onClick={(e) => onDateClicked(dateString, e)}
> >
<span> <span>
{date.date()} {date.date()}

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

@ -9,6 +9,8 @@ import ActionButton from "../react/ActionButton";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import FormDropdownList from "../react/FormDropdownList"; import FormDropdownList from "../react/FormDropdownList";
import FormTextBox from "../react/FormTextBox"; import FormTextBox from "../react/FormTextBox";
import toast from "../../services/toast";
import date_notes from "../../services/date_notes";
const MONTHS = [ const MONTHS = [
t("calendar.january"), t("calendar.january"),
@ -27,7 +29,7 @@ const MONTHS = [
export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) { export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
const { title, icon } = useLauncherIconAndTitle(launcherNote); const { title, icon } = useLauncherIconAndTitle(launcherNote);
const [ calendarArgs, setCalendarArgs ] = useState<Omit<CalendarArgs, "date">>(); const [ calendarArgs, setCalendarArgs ] = useState<Pick<CalendarArgs, "activeDate" | "todaysDate">>();
const [ date, setDate ] = useState<Dayjs>(); const [ date, setDate ] = useState<Dayjs>();
return ( return (
@ -49,7 +51,20 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
> >
{calendarArgs && date && <div className="calendar-dropdown-widget" style={{ width: 400 }}> {calendarArgs && date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
<CalendarHeader date={date} setDate={setDate} /> <CalendarHeader date={date} setDate={setDate} />
<Calendar date={date} {...calendarArgs} /> <Calendar
date={date}
onDateClicked={async (date, e) => {
const note = await date_notes.getDayNote(date);
if (note) {
appContext.tabManager.getActiveContext()?.setNote(note.noteId);
// this.dropdown?.hide();
} else {
toast.showError(t("calendar.cannot_find_day_note"));
}
e.stopPropagation();
}}
{...calendarArgs}
/>
</div>} </div>}
</LaunchBarDropdownButton> </LaunchBarDropdownButton>
) )