replace momentjs (incl. calendar)

components/wizard/calendar.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
+import React from 'react'
 import classnames from 'classnames'
+import { isPast } from 'date-fns'
 import useSWR from 'swr'
-import moment, { Moment } from 'moment'
-import { Calendar } from 'react-calendar-component'
+import Calendar from 'react-calendar'
 import { dateFormatBackend } from '../../helpers/date'
 
 const fetcher = (path: string) => fetch(path).then((r) => r.json())
@@ -13,10 +13,17 @@ export default function MyCalendar() {
     fetcher
   )
 
-  const [date, setDate] = useState(moment())
-
-  function dayBooked(day: Date) {
-    return daysBooked && daysBooked.includes(dateFormatBackend(day))
+  function tileClassName({ date, view }) {
+    const isMonthView = view === 'month'
+    const isDaysBookedLoaded = !!daysBooked
+    const isBooked = daysBooked?.includes(dateFormatBackend(date))
+    return classnames({
+      'react-calendar__tile--past': isPast(date),
+      'react-calendar__tile--booked':
+        isMonthView && isDaysBookedLoaded && isBooked,
+      'react-calendar__tile--free':
+        isMonthView && isDaysBookedLoaded && !isBooked,
+    })
   }
 
   if (fetchBookedOnError) {
@@ -29,48 +36,9 @@ export default function MyCalendar() {
   }
 
   return (
-    <div className="mb-12">
+    <div className="mb-12 p-6 bg-blue-100 rounded">
       <h2 className="text-xl">Buchungsübersicht</h2>
-      <Calendar
-        onChangeMonth={(date: React.SetStateAction<Moment>) => setDate(date)}
-        date={date}
-        renderDay={({
-          day,
-          classNames,
-          onPickDate,
-        }: {
-          day: Moment
-          classNames: string
-          onPickDate: any
-        }) => (
-          <div
-            key={day.format()}
-            className={classnames(
-              'Calendar-grid-item',
-              day.isSame(moment(), 'day') && 'Calendar-grid-item--current',
-              day.isBefore(moment(), 'day') && 'Calendar-grid-item--past',
-              !!daysBooked &&
-                (dayBooked(day.toDate())
-                  ? 'Calendar-grid-item--booked'
-                  : 'Calendar-grid-item--free'),
-              classNames
-            )}
-            onClick={(e) => onPickDate(day)}
-          >
-            {day.format('D')}
-          </div>
-        )}
-        renderHeader={({ date, onPrevMonth, onNextMonth }) => (
-          <div className="Calendar-header">
-            <button onClick={onPrevMonth}>«</button>
-            <div className="Calendar-header-currentDate">
-              {date.format('MMMM YYYY')}
-            </div>
-            <button onClick={onNextMonth}>»</button>
-          </div>
-        )}
-        onPickDate={() => {}}
-      />
+      <Calendar minDate={new Date()} tileClassName={tileClassName} />
       <div className="mt-6 flex justify-center">
         <div>
           <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>