render past days in gray

components/calendar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import classnames from 'classnames'
 import useSWR from 'swr'
-import moment from 'moment'
+import moment, { Moment } from 'moment'
 import { Calendar } from 'react-calendar-component'
 import { dateFormatBackend } from '../helpers/date'
 
@@ -32,16 +32,23 @@ export default function MyCalendar() {
     <div className="mb-12">
       <h2 className="text-xl">Buchungsübersicht</h2>
       <Calendar
-        onChangeMonth={(date: React.SetStateAction<moment.Moment>) =>
-          setDate(date)
-        }
+        onChangeMonth={(date: React.SetStateAction<Moment>) => setDate(date)}
         date={date}
-        renderDay={({ day, classNames, onPickDate }) => (
+        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',
               dayBooked(day.toDate()) && 'Calendar-grid-item--booked',
               classNames
             )}

styles/index.css

@@ -127,6 +127,10 @@
   flex: 0 calc(100% / 7);
 }
 
+.Calendar-grid-item--past {
+  @apply text-gray-500 bg-gray-200;
+}
+
 .Calendar-grid-item--current {
   @apply font-bold;
 }