diff --git a/ts/graphs/CalendarGraph.svelte b/ts/graphs/CalendarGraph.svelte
index 0ad08d0b8..5296f6027 100644
--- a/ts/graphs/CalendarGraph.svelte
+++ b/ts/graphs/CalendarGraph.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { createEventDispatcher } from "svelte";
     import NoDataOverlay from "./NoDataOverlay.svelte";
     import AxisTicks from "./AxisTicks.svelte";
     import { defaultGraphBounds, RevlogRange } from "./graph-helpers";
@@ -15,6 +16,8 @@
     export let nightMode: boolean;
 
     let { calendarFirstDayOfWeek } = preferences;
+    const dispatch = createEventDispatcher();
+
     let graphData: GraphData | null = null;
 
     let bounds = defaultGraphBounds();
@@ -49,6 +52,7 @@
             svg as SVGElement,
             bounds,
             graphData,
+            dispatch,
             targetYear,
             i18n,
             nightMode,
diff --git a/ts/graphs/calendar.ts b/ts/graphs/calendar.ts
index 02d6dbc1d..f9214a53c 100644
--- a/ts/graphs/calendar.ts
+++ b/ts/graphs/calendar.ts
@@ -82,6 +82,7 @@ export function renderCalendar(
     svgElem: SVGElement,
     bounds: GraphBounds,
     sourceData: GraphData,
+    dispatch: any,
     targetYear: number,
     i18n: I18n,
     nightMode: boolean,
@@ -113,6 +114,7 @@ export function renderCalendar(
             maxCount = count;
         }
     }
+    console.log('sourceData', sourceData, dayMap)
 
     if (!maxCount) {
         setDataAvailable(svg, false);
@@ -205,6 +207,9 @@ export function renderCalendar(
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip)
+        .on("click", function (this: any, d: any) {
+            dispatch("search", { query: `"prop:rated=${d.day}"` });
+        })
         .transition()
         .duration(800)
         .attr("fill", (d) => (d.count === 0 ? emptyColour : blues(d.count)!));