reworked month-picker

src/components/MonthPicker.vue

@@ -1,47 +1,55 @@
 <template>
 <div class="d-flex justify-content-center" >
-    <button type="button" class="btn btn-outline-primary" @click="openPicker" v-show="state === 'closed'">
+    <button type="button" class="btn btn-outline-secondary" @click="state = 'open'" v-show="state === 'closed'">
         Startmonat: {{months[selectedMonth]}} {{selectedYear}}
     </button>
 
-    <button type="button" class="btn btn-outline-primary"><i class="bi bi-caret-left" /></button>
+    <div v-show="state === 'open'" class="card">
-    <input type="number" v-model="selectedYear" @change="emit('getYear', selectedYear)" />
+        <div class="card-body">
-    <button type="button" class="btn btn-outline-primary"><i class="bi bi-caret-right" /></button>
+            <div class="row">
-    <table v-show="state === 'month'" class="table table-bordered table-sm">
+                <div class="col d-flex flex-row-reverse mb-3">
+                    <button @click="state = 'closed'" type="button" class="btn-close" aria-label="Close"></button>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <button type="button" class="btn btn-outline-secondary" @click="selectedYear--"><i class="bi bi-caret-left" /></button>
+                </div>
+                <div class="col col-auto">
+                    <input type="number" class="form-control text-center" v-model="selectedYear" @change="emit('getYear', selectedYear)" />
+                </div>
+                <div class="col">
+                    <button type="button" class="btn btn-outline-secondary" @click="selectedYear++"><i class="bi bi-caret-right" /></button>
+                </div>
+            </div>
+
+            <table class="table table-bordered mt-2">
                 <tbody>
                     <tr v-for="n in 3">
-                <td v-for="m in 4" @click="updateMonth(m+4*n-5)" :class="{selected: selectedMonth===(m+4*n-5)}">
+                        <td v-for="m in 4" @click="selectedMonth = m+4*n-5" :class="{selected: selectedMonth===(m+4*n-5)}">
                             {{months[m+4*n-5]}}
                         </td>
                     </tr>
                 </tbody>
             </table>
-
+        </div>
-    <table v-show="state === 'year'" class="table table-bordered table-sm">
+    </div>
-        <tbody>
-            <tr v-for="n in 3">
-                <td v-for="m in 3" @click="updateYear(years[m+3*n-4])" :class="{selected: selectedYear === years[m+3*n-4]}">
-                    {{years[m+3*n-4]}}
-                </td>
-            </tr>
-        </tbody>
-    </table>
 </div>
 
 </template>
 
 <script setup lang="ts">
-    import { ref, computed, Ref, ComputedRef } from 'vue'
+    import { ref, computed, watch, Ref, ComputedRef } from 'vue'
 
     const props = defineProps<{
         selectedMonth: number,
         selectedYear: number,
-        state: ('closed'|'year'|'month')
+        state: ('closed'|'open')
     }>()
 
     const selectedMonth : Ref<number>= ref(props.selectedMonth)
     const selectedYear : Ref<number> = ref(props.selectedYear)
-    const state : Ref<'closed'|'year'|'month'> = ref(props.state)
+    const state : Ref<'closed'|'open'> = ref(props.state)
 
     const months : string[] = [
         'Jan', 'Feb', 'Mrz', 'Apr', 
@@ -63,48 +71,25 @@
         return arr
     })
 
-    function updateMonth(monthId : number) {
-        selectedMonth.value = monthId
-        emit('getMonth', selectedMonth.value)
-        emit('getYear', selectedYear.value)
-        state.value = 'closed'
-
-    }
-
-    function updateYear(year : number) {
-        selectedYear.value = year
-        state.value = 'month'
-    }
-
-    function openPicker() {
-        state.value = 'year'
-    }
-
     const emit = defineEmits<{
         (e: 'getYear', year: number): number
         (e: 'getMonth', month: number): number
     }>()
 
+    watch(selectedYear, currentValue => emit('getYear', currentValue))
+    watch(selectedMonth, currentValue => emit('getMonth', currentValue))
+
 </script>
 
 <style scoped>
-    table {
-        width: 250px;
-        border-radius: 4px;
-    }
-    td, tr {
-        border: 1px solid #0d6efd ;
-        border-collapse: collapse;
-        color: #0D6EFD
-    }
     td:hover {
-        background-color: #0D6EFD;
+        background-color: rgb(108,117,125);
         color: #fff;
         cursor: pointer
     }
 
     .selected {
-        background-color: #0D6EFD;
+        background-color: rgb(108,117,125);
         color: #fff;
     }
 </style>

src/components/Schedule.vue

@@ -15,7 +15,7 @@ table(class='table' v-for="(row, rIndex) in dates" :key="rIndex")
 </template>
 
 <script setup lang="ts">
-    import { toRef, computed } from 'vue'
+    import { toRef, computed, ref } from 'vue'
     import { addMonths, subDays, addDays, format, getISODay, isValid, eachDayOfInterval } from 'date-fns'
     import { de } from 'date-fns/locale'
 
@@ -40,7 +40,7 @@ table(class='table' v-for="(row, rIndex) in dates" :key="rIndex")
         start: startDate.value,
         end: endDate.value
     })
-    const offset : number = getISODay(startDate.value) - 1 + props.initialOffset
+    const offset = computed(() => getISODay(startDate.value) - 1 + props.initialOffset)
     
 
     const dates = computed( () => {
@@ -50,7 +50,7 @@ table(class='table' v-for="(row, rIndex) in dates" :key="rIndex")
         let end = endDate.value
         let i
 
-        for (i = 0; i < offset ; i++) {
+        for (i = 0; i < offset.value ; i++) {
             row.push(null)
         }
 

src/views/Home.vue

@@ -1,9 +1,5 @@
 <template lang="pug">
 
-p {{iOffsets}}
-
-p SelectedMonth: {{selectedMonth}}, SelectedYear: {{selectedYear}}
-
 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")