diff --git a/src/lib/components/calendar/calendar-body/calendar-body.stories.svelte b/src/lib/components/calendar/calendar-body/calendar-body.stories.svelte
index 79a50e0a..6c47fe33 100644
--- a/src/lib/components/calendar/calendar-body/calendar-body.stories.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-body.stories.svelte
@@ -19,8 +19,10 @@
 <Template let:args>
 	<CalendarBody
 		{...args}
-		on:createTask={(args) => console.log('create', args)}
-		on:editTask={(args) => console.log('edit', args)}
+		on:createTask={(args) => console.log('createTask', args.detail)}
+		on:editTask={(args) => console.log('editTask', args.detail)}
+		on:moveEvent={(args) => console.log('moveEvent', args.detail)}
+		on:toggleEvent={(args) => console.log('toggleEvent', args.detail)}
 		{tasks}
 		weekStart={startOfWeek(new Date())}
 	/>
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/CalendarColumns.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/CalendarColumns.svelte
index 174a62fe..97fd4645 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/CalendarColumns.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/CalendarColumns.svelte
@@ -36,6 +36,7 @@
 				{date}
 				on:click={(e) => dispatch('createTask', buildDate(date, e.detail))}
 				on:editTask
+				on:moveEvent
 				on:toggleEvent
 				{tasks}
 			/>
@@ -49,6 +50,7 @@
 		date={selectedDate}
 		on:click={(e) => dispatch('createTask', buildDate(selectedDate, e.detail))}
 		on:editTask
+		on:moveEvent
 		on:toggleEvent
 		{tasks}
 	/>
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-columns.stories.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-columns.stories.svelte
index 189f8ee2..f89ea808 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-columns.stories.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-columns.stories.svelte
@@ -20,6 +20,10 @@
 	<CalendarColumns
 		{...args}
 		dates={Array.from({ length: 7 }, (_, i) => addDays(new Date(), i))}
+		on:createTask={(args) => console.log('createTask', args.detail)}
+		on:editTask={(args) => console.log('editTask', args.detail)}
+		on:moveEvent={(args) => console.log('moveEvent', args.detail)}
+		on:toggleEvent={(args) => console.log('toggleEvent', args.detail)}
 		selectedDate={new Date()}
 		tasks={events}
 	/>
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-rows.stories.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-rows.stories.svelte
index 600a67c0..68330d7d 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-rows.stories.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-rows.stories.svelte
@@ -17,7 +17,15 @@
 </script>
 
 <Template let:args>
-	<CalendarRows {...args} date={new Date()} {tasks} />
+	<CalendarRows
+		{...args}
+		date={new Date()}
+		on:click={(args) => console.log('click', args.detail)}
+		on:editTask={(args) => console.log('editTask', args.detail)}
+		on:moveEvent={(args) => console.log('moveEvent', args.detail)}
+		on:toggleEvent={(args) => console.log('toggleEvent', args.detail)}
+		{tasks}
+	/>
 </Template>
 
 <Story args={{}} name="Primary" />
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/event-panel-core.stories.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/event-panel-core.stories.svelte
index 37071c95..10811205 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/event-panel-core.stories.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/event-panel-core.stories.svelte
@@ -24,7 +24,12 @@
 
 <Template let:args>
 	<div class="relative h-48 w-48">
-		<EventPanelCore {...args} />
+		<EventPanelCore
+			{...args}
+			isSelected={false}
+			on:toggleEvent={(args) => console.log('toggleEvent', args.detail)}
+			targetDate={new Date()}
+		/>
 	</div>
 </Template>
 
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel.stories.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel.stories.svelte
index 1f9698ef..0579cd6d 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel.stories.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel.stories.svelte
@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
 	import type { Meta } from '@storybook/svelte';
 
+	import { getTimeSlots } from '$lib/components/calendar/calendar-body/calendar-columns/calendar-rows/service';
 	import { done, long, normalWithoutDescription, shortWithoutDescription } from '$lib/task/seed';
 	import { Story, Template } from '@storybook/addon-svelte-csf';
 
@@ -15,9 +16,21 @@
 	} satisfies Meta<EventPanel>;
 </script>
 
+<script>
+	import { tasks } from '$lib/task/seed';
+</script>
+
 <Template let:args>
 	<div class="!relative w-52">
-		<EventPanel {...args} class="!static" />
+		<EventPanel
+			{...args}
+			class="!static"
+			on:editTask={(args) => console.log('editTask', args.detail)}
+			on:moveEvent={(args) => console.log('moveEvent', args.detail)}
+			on:toggleEvent={(args) => console.log('toggleEvent', args.detail)}
+			targetDate={new Date()}
+			timeSlots={getTimeSlots(tasks, new Date())}
+		/>
 	</div>
 </Template>
 
diff --git a/src/lib/components/calendar/calendar-body/week-list/week-list.stories.svelte b/src/lib/components/calendar/calendar-body/week-list/week-list.stories.svelte
index 11214784..43150fc9 100644
--- a/src/lib/components/calendar/calendar-body/week-list/week-list.stories.svelte
+++ b/src/lib/components/calendar/calendar-body/week-list/week-list.stories.svelte
@@ -13,7 +13,11 @@
 </script>
 
 <Template let:args>
-	<WeekList {...args} dates={Array.from({ length: 7 }, (_, i) => addDays(new Date(), i))} />
+	<WeekList
+		{...args}
+		dates={Array.from({ length: 7 }, (_, i) => addDays(new Date(), i))}
+		selectedDate={new Date()}
+	/>
 </Template>
 
 <Story args={{}} name="Primary" />
diff --git a/src/lib/components/calendar/calendar.stories.svelte b/src/lib/components/calendar/calendar.stories.svelte
index 78244132..dd510f44 100644
--- a/src/lib/components/calendar/calendar.stories.svelte
+++ b/src/lib/components/calendar/calendar.stories.svelte
@@ -16,7 +16,14 @@
 
 <Template let:args>
 	<div class="h-screen">
-		<Calendar {...args} {tasks} />
+		<Calendar
+			{...args}
+			on:createTask={(args) => console.log('createTask', args.detail)}
+			on:editTask={(args) => console.log('editTask', args.detail)}
+			on:moveEvent={(args) => console.log('moveEvent', args.detail)}
+			on:toggleEvent={(args) => console.log('toggleEvent', args.detail)}
+			{tasks}
+		/>
 	</div>
 </Template>