started working on a leaner picker, added emit to picker

package-lock.json

@@ -397,6 +397,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.1.tgz",
       "integrity": "sha512-/jUa4sSuDZWlDLQ1gwQQR8uoYSvLJzDd8m5o6bPKh3asLAMYVZKdRCjb1joUd5WXf0WwCNzd2EjwQQhupou0dA=="
     },
+    "bootstrap-icons": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
+      "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.1.1",
+    "bootstrap-icons": "^1.5.0",
     "date-fns": "^2.24.0",
     "vue": "^3.2.16",
     "vue-month-picker": "^1.5.0",

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),
+      start: new Date(selectedYear.value, selectedMonth.value),
-      end : new Date(selectedYear.value, selectedMonth.value + 1)
+      end : new Date(selectedYear.value, selectedMonth.value + 2)
     })
   })