Highlight available dates

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DateSelect.vue

@@ -184,6 +184,16 @@
                             this.fetchAvailableRooms();
                         }
                     }
+                },
+                onDayCreate: (dObj, dStr, fp, dayElem) => {
+                    const day = dayjs(dayElem.dateObj).format('YYYY-MM-DD');
+                    for (const entry of this.availableDates) {
+                        if (entry.date === day) {
+                            dayElem.classList.add('available');
+                            return false;
+                        }
+                    }
+
                 }
             });
             Vue.nextTick(() => {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss

@@ -46,6 +46,15 @@
   }
 }
 
+.flatpickr-day {
+  border-radius: 0;
+
+  &.available:not(.inRange) {
+    color: white;
+    background-color: $color-label-success;
+  }
+}
+
 .flatpickr-day.selected {
   &.startRange, &.endRange {
     background: $color-brand-secondary;