diff --git a/frontend/src/components/calendar/Calendar.vue b/frontend/src/components/calendar/Calendar.vue
index 3f763ea..ea0139d 100644
--- a/frontend/src/components/calendar/Calendar.vue
+++ b/frontend/src/components/calendar/Calendar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Qalendar } from "qalendar";
+import { CalendarEvent } from "./event.class";
 
 const config = {
   month: {
@@ -9,10 +10,14 @@ const config = {
   defaultMode: 'month',
   isSilent: true,
 };
+
+defineProps<{
+  events: CalendarEvent[]
+}>()
 </script>
 
 <template>
-  <Qalendar :config></Qalendar>
+  <Qalendar :config :events></Qalendar>
 </template>
 
 <style>
diff --git a/frontend/src/components/calendar/event.class.ts b/frontend/src/components/calendar/event.class.ts
new file mode 100644
index 0000000..34766ee
--- /dev/null
+++ b/frontend/src/components/calendar/event.class.ts
@@ -0,0 +1,29 @@
+import { toSimpleDateString } from "../../utils/date/converters.util"
+
+export class CalendarEvent {
+    id: string
+    title: string
+    description: string
+    color: "red" | "yellow" | "blue"
+    with?: string
+    time: { start: string; end: string }
+  
+    constructor(
+      title: string,
+      description: string,
+      timeStart: Date,
+      timeEnd: Date,
+      withPerson?: string,
+      color: "red" | "yellow" | "blue" = "red"
+    ) {
+      this.title = title
+      this.description = description
+      this.time = {
+        start: toSimpleDateString(timeStart),
+        end: toSimpleDateString(timeEnd),
+      }
+      this.with = withPerson
+      this.color = color
+      this.id = new Date().getTime().toString()
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Index.vue b/frontend/src/pages/Index.vue
index aa2332d..8ac36c7 100644
--- a/frontend/src/pages/Index.vue
+++ b/frontend/src/pages/Index.vue
@@ -1,8 +1,21 @@
 <script setup lang="ts">
 import Calendar from '../components/calendar/Calendar.vue';
+import { CalendarEvent } from '../components/calendar/event.class';
 
+const events: CalendarEvent[] = []
+
+const newEvent = new CalendarEvent(
+  "Advanced algebra",
+  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda corporis doloremque et expedita molestias necessitatibus quam quas temporibus veritatis. Deserunt excepturi illum nobis perferendis praesentium repudiandae saepe sapiente voluptatem!",
+  new Date("2025-03-11T12:05:00"),
+  new Date("2025-03-12T13:35:00"),
+  "Chandler Bing",
+  "red"
+)
+
+events.push(newEvent)
 </script>
 
 <template>
-    <Calendar />
+  <Calendar :events="events" />
 </template>
\ No newline at end of file
diff --git a/frontend/src/utils/date/converters.util.ts b/frontend/src/utils/date/converters.util.ts
index e6c2ea3..5ae5a35 100644
--- a/frontend/src/utils/date/converters.util.ts
+++ b/frontend/src/utils/date/converters.util.ts
@@ -36,4 +36,11 @@ export const timestampToDate = (obj: any) => {
         }
     }
     return obj
-}
\ No newline at end of file
+}
+
+export function toSimpleDateString(date: Date): string {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, "0")
+    const day = String(date.getDate()).padStart(2, "0")
+    return `${year}-${month}-${day}`
+  }
\ No newline at end of file
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index c4945f4..1e5a217 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -8,7 +8,7 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
     "strictNullChecks": true,
-    "lib": ["ES2015", "DOM"]
+    "lib": ["ES2020", "DOM"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
 }
\ No newline at end of file