chore(react/launch_bar): clicking on calendar days

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

View File

@ -46,21 +46,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.manageFirstDayOfWeek();
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
this.$dropdownContent.on("click", ".calendar-week-number", async (ev) => {
if (!this.weekNoteEnable) {

View File

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

View File

@ -9,6 +9,8 @@ import ActionButton from "../react/ActionButton";
import { t } from "../../services/i18n";
import FormDropdownList from "../react/FormDropdownList";
import FormTextBox from "../react/FormTextBox";
import toast from "../../services/toast";
import date_notes from "../../services/date_notes";
const MONTHS = [
t("calendar.january"),
@ -27,7 +29,7 @@ const MONTHS = [
export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
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>();
return (
@ -49,7 +51,20 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
>
{calendarArgs && date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
<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>}
</LaunchBarDropdownButton>
)