started working on a leaner picker, added emit to picker

src/components/MonthPicker.vue

@@ -1,9 +1,12 @@
 <template>
 <div class="d-flex justify-content-center" >
     <button type="button" class="btn btn-outline-primary" @click="openPicker" v-show="state === 'closed'">
-        {{months[selectedMonth]}} {{selectedYear}}
+        Startmonat: {{months[selectedMonth]}} {{selectedYear}}
     </button>
 
+    <button type="button" class="btn btn-outline-primary"><i class="bi bi-caret-left" /></button>
+    <input type="number" v-model="selectedYear" @change="emit('getYear', selectedYear)" />
+    <button type="button" class="btn btn-outline-primary"><i class="bi bi-caret-right" /></button>
     <table v-show="state === 'month'" class="table table-bordered table-sm">
         <tbody>
             <tr v-for="n in 3">
@@ -62,6 +65,8 @@
 
     function updateMonth(monthId : number) {
         selectedMonth.value = monthId
+        emit('getMonth', selectedMonth.value)
+        emit('getYear', selectedYear.value)
         state.value = 'closed'
 
     }

src/main.ts

@@ -2,7 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import "bootstrap"
-import "bootstrap/dist/css/bootstrap.min.css"
+import "bootstrap/dist/css/bootstrap.css"
+import "bootstrap-icons/font/bootstrap-icons.css"
 
 createApp(App)
 .use(router)

src/views/Home.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
 
+p {{iOffsets}}
+
 p SelectedMonth: {{selectedMonth}}, SelectedYear: {{selectedYear}}
 
-MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" state="closed")
+MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" @getMonth="selectedMonth = $event" @getYear="selectedYear = $event" state="closed")
 
 div(class="mt-5" v-for="(month, index) in months" :key="index") 
   Schedule(  :startDate="month" :initialOffset="iOffsets[index]")
@@ -20,8 +22,8 @@ div(class="mt-5" v-for="(month, index) in months" :key="index")
 
   const months = computed(() => {
     return eachMonthOfInterval({
-      start: new Date(selectedYear.value, selectedMonth.value - 1),
-      end : new Date(selectedYear.value, selectedMonth.value + 1)
+      start: new Date(selectedYear.value, selectedMonth.value),
+      end : new Date(selectedYear.value, selectedMonth.value + 2)
     })
   })