added calendar and implemented bridge between small and big calendar

web/pages/index.vue

@@ -1,24 +1,18 @@
 <script setup lang="ts">
+import moment from 'moment';
+import MainContent from '~/components/ui/MainContent.vue';
 import Sidebar from '~/components/ui/Sidebar.vue';
-import Calendar from '~/components/ui/calendar/Calendar.vue'
-import moment, { type Moment } from 'moment';
 
 const todos = ["Staistics", "Computer Graphics", "Webdev"]
 const events = ref([])
 const date = ref(moment())
 
-onMounted(() => {
-	date.value.subtract(10,"days")
-})
-
 </script>
 
 <template>
 	<div class="h-screen w-screen p-4 flex flex-row gap-5">
-		<Sidebar :todos="todos" />
-		<div class="flex grow">
-			<Calendar v-model:events="events" v-model:date="date"></Calendar>
-		</div>
+		<Sidebar :todos="todos" v-model:date="date" />
+		<MainContent v-model:events="events" v-model:date="date" />
 	</div>
 </template>