diff --git a/src/views/calendar/CalendarView.vue b/src/views/calendar/CalendarView.vue
index e643dfe..ec8f6a8 100644
--- a/src/views/calendar/CalendarView.vue
+++ b/src/views/calendar/CalendarView.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+interface CalendarEvent {
+  name: string
+  start: Date | string | number
+  end?: Date | string | number
+  color?: string
+  timed?: boolean
+}
+
 const type = ref('month')
 const types = ['month', 'week', 'day', '4day']
 const mode = ref('stack')
@@ -13,19 +21,33 @@ const weekdays = [
   { title: 'Mon, Wed, Fri', value: [1, 3, 5] },
 ]
 const value = ref('')
-const events = ref([])
+const events = ref<CalendarEvent[]>([])
 const colors = ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey-darken-1']
 const names = ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party']
 
 function rnd(a: number, b: number) {
   return Math.floor((b - a + 1) * Math.random()) + a
 }
+
+function getEvents() {
+  events.value = [
+    {
+      name: 'test',
+      start: new Date('2026-10-09T13:41:45.213Z'),
+      end: new Date('2026-10-11T13:41:45.213Z'),
+      color: 'primary',
+      timed: true,
+    },
+  ]
+}
 </script>
 
 <template>
   <div>
     <v-sheet height="600">
-      <v-calendar></v-calendar>
+      <v-calendar format="24hr" type="month" first-day-of-week="1" @change="getEvents" :events="events">
+        <template #day> aaaa </template>
+      </v-calendar>
     </v-sheet>
   </div>
 </template>