Replace calendar browse buttons with dropdown

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue

@@ -6,21 +6,14 @@
         <div class="calendar__loading" v-show="loading">
             <img :src="loaderUri" alt="Loading" title="Loading">
         </div>
-        <div class="calendar__inner" v-cloak v-html="calendarHtml"></div>
+        <div class="col-xs-12">
-        <div class="calendar__buttons" v-cloak>
+            <select class="form-control calendar__select" v-model="selectedMonth" @change="loadCalendar">
-            <div class="col-xs-6">
+                <option v-for="option in selectableMonths" :value="option" :key="option.format('YYYY')+option.format('M')">
-                <a v-show="showPrev" @click.prevent="prev()" href="#"
+                    {{ option.format('MMMM YYYY') }}
-                   class="calendar__browse calendar__browse--prev btn btn-warning">
+                </option>
-                    <i class="fa fa-chevron-left"></i> früher
+            </select>
-                </a>
-            </div>
-            <div class="col-xs-6 text-right">
-                <a @click.prevent="next()" href="#"
-                   class="calendar__browse calendar__browse--next btn btn-warning">
-                    später <i class="fa fa-chevron-right"></i>
-                </a>
-            </div>
         </div>
+        <div class="calendar__inner" v-cloak v-html="calendarHtml"></div>
     </div>
 </template>
 <script>
@@ -28,6 +21,7 @@
     import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
+    dayjs.locale('de');
 
     export default {
         props: {
@@ -65,8 +59,8 @@
         },
         data () {
             return {
-                showPrev: false,
                 startDate: dayjs().startOf('month'),
+                selectedMonth: dayjs().startOf('month'),
                 calendarHtml: '',
                 loading: false
             }
@@ -74,40 +68,47 @@
         computed: {
             isSingleCalendar () {
                 return parseInt(this.months) === 1;
+            },
+            selectableMonths() {
+                const months = [];
+                let month = this.startDate.month();
+                let year = this.startDate.year();
+                for (let i = 1; i <= 12; i++) {
+                    months.push(dayjs().set('year', year).set('month', month));
+                    if (month < 12) {
+                        month++;
+                    } else {
+                        month = 1;
+                        year++;
+                    }
+                }
+                return months;
             }
         },
         methods: {
             loadCalendar () {
                 let query = {};
                 query[this.argumentPrefix + '[hotel]'] = this.hotelUid;
-                query[this.argumentPrefix + '[month]'] = this.startDate.month() + 1;
+                query[this.argumentPrefix + '[month]'] = this.selectedMonth.month() + 1;
-                query[this.argumentPrefix + '[year]'] = this.startDate.year();
+                query[this.argumentPrefix + '[year]'] = this.selectedMonth.year();
                 query[this.argumentPrefix + '[months]'] = this.months;
                 this.loading = true;
-                this.showPrev = this.startDate.isAfter(dayjs());
                 axios({
                     url: this.uri,
                     responseType: 'text',
                     params: query
                 }).then((response) => {
                     this.calendarHtml = response.data;
-                    this.loading = false;
                 }).catch(() => {
+                }).finally(() => {
                     this.loading = false;
                 });
-            },
-            next () {
-                this.startDate = this.startDate.add(this.step, 'month');
-                this.loadCalendar();
-            },
-            prev () {
-                this.startDate = this.startDate.subtract(this.step, 'month');
-                this.loadCalendar();
             }
         },
         mounted () {
             Vue.nextTick(() => {
                 this.loadCalendar();
+                this.selectedMonth = this.selectableMonths[0];
             });
         }
     }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss

@@ -16,6 +16,14 @@
   }
 }
 
+.calendar__select {
+    margin-bottom: 20px;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
+}
+
 .calendar__loading {
   position: absolute;
   @include size(100%);
@@ -33,7 +41,11 @@
 }
 
 .calendar__days {
-  min-height: 275px;
+
+  table {
+      margin-bottom: 0;
+  }
+
 }
 
 .label-success-danger {

public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html

@@ -18,7 +18,6 @@
         <f:for each="{year}" as="month">
             <ep:calendar.includes range="{range}" period="{month}">
                 <div class="calendar__month col-xs-12{f:if(condition: '{months} > 1', then: ' col-md-6 col-lg-4')}">
-                    <h3 class="calendar__month{f:if(condition: '{months} == 1', then: ' calendar__month--single')}">{month.begin -> f:format.date(format: '%B')} {month.begin -> f:format.date(format: '%Y')}</h3>
                     <div class="calendar__days">
                         <table class="table table-bordered">
                             <tr>