diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index 636ee50e4..2e8728dc2 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -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) {
diff --git a/apps/client/src/widgets/launch_bar/Calendar.tsx b/apps/client/src/widgets/launch_bar/Calendar.tsx
index a4b4886d3..5ddf56f9c 100644
--- a/apps/client/src/widgets/launch_bar/Calendar.tsx
+++ b/apps/client/src/widgets/launch_bar/Calendar.tsx
@@ -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()}
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index 03c2d57f0..1bdeba620 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -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>
     )