feat: qalendar typing

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>

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()
+    }
+}