enable to select dates in calendar

components/wizard/calendar.tsx

@@ -1,13 +1,18 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import classnames from 'classnames'
-import { isPast } from 'date-fns'
+import { isPast, isSameDay, isAfter, isWithinInterval } from 'date-fns'
 import useSWR from 'swr'
-import Calendar from 'react-calendar'
+import Calendar, { DateCallback } from 'react-calendar'
 import { dateFormatBackend } from '../../helpers/date'
+import { WizardContext } from './context/wizardStore'
 
 const fetcher = (path: string) => fetch(path).then((r) => r.json())
 
 export default function MyCalendar() {
+  const { onChange, state } = useContext(WizardContext)
+  const { startDate: start, endDate: end } = state.formData
+  const startDate = (start && new Date(start)) || null
+  const endDate = (end && new Date(end)) || null
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
@@ -16,13 +21,21 @@ export default function MyCalendar() {
   function tileClassName({ date, view }) {
     const isMonthView = view === 'month'
     const isDaysBookedLoaded = !!daysBooked
+    const isInPast = isPast(date)
     const isBooked = daysBooked?.includes(dateFormatBackend(date))
     return classnames({
-      'react-calendar__tile--past': isPast(date),
+      'react-calendar__tile--past': isInPast,
       'react-calendar__tile--booked':
-        isMonthView && isDaysBookedLoaded && isBooked,
+        isMonthView && isDaysBookedLoaded && isBooked && !isInPast,
       'react-calendar__tile--free':
-        isMonthView && isDaysBookedLoaded && !isBooked,
+        isMonthView && isDaysBookedLoaded && !isBooked && !isInPast,
+      'react-calendar__tile--selected':
+        (startDate &&
+          isWithinInterval(date, {
+            start: startDate,
+            end: endDate || startDate,
+          })) ||
+        isSameDay(date, startDate),
     })
   }
 
@@ -38,7 +51,37 @@ export default function MyCalendar() {
   return (
     <div className="mb-12 p-6 bg-blue-100 rounded">
       <h2 className="text-xl">Buchungsübersicht</h2>
-      <Calendar minDate={new Date()} tileClassName={tileClassName} />
+      <Calendar
+        minDate={new Date()}
+        // @ts-ignore
+        onClickDay={(date, event: React.MouseEvent<HTMLInputElement>) => {
+          event.preventDefault()
+          event.stopPropagation()
+
+          const targetClassList = event.currentTarget.classList
+
+          if (
+            targetClassList.contains('react-calendar__tile--past') ||
+            targetClassList.contains('react-calendar__tile--booked')
+          ) {
+            return
+          }
+
+          if (!startDate || !!endDate) {
+            onChange({ startDate: dateFormatBackend(date), endDate: null })
+            return
+          }
+
+          // when startDate set, but end missing
+          if (isAfter(date, startDate)) {
+            onChange({ endDate: dateFormatBackend(date) })
+          } else {
+            onChange({ startDate: dateFormatBackend(date), endDate: start })
+          }
+        }}
+        tileClassName={tileClassName}
+        value={null}
+      />
       <div className="mt-6 flex justify-center">
         <div>
           <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>

components/wizard/dateSelect.tsx

@@ -19,7 +19,7 @@ export default function DateSelect() {
             required
             type="date"
             name="startDate"
-            value={startDate}
+            value={startDate || ''}
             onChange={onChangeEvent}
             min={today}
           />
@@ -32,7 +32,7 @@ export default function DateSelect() {
             required
             type="date"
             name="endDate"
-            value={endDate}
+            value={endDate || ''}
             placeholder="Von"
             onChange={onChangeEvent}
             min={startDate || today}