added calendar and implemented bridge between small and big calendar

web/components/ui/MainContent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Moment } from 'moment';
+import Calendar from './calendar/Calendar.vue'
+import { Event } from '~/utils/event';
+import { UCard } from '#components';
+
+const events = defineModel<Event[]>('events', { required: true })
+const date = defineModel<Moment>('date', { required: true })
+
+</script>
+
+<template>
+	<UCard class="flex grow" :ui="{ body: 'w-full h-full' }">
+		<Calendar v-model:events="events" v-model:date="date"></Calendar>
+	</UCard>
+</template>
+
+<style scoped></style>