From eb82b9b29267beb92c097aa6e8551b71eb6cbe4a Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Wed, 9 Sep 2020 00:03:19 +0200
Subject: [PATCH] render past days in gray

---
 components/calendar.tsx | 17 ++++++++++++-----
 styles/index.css        |  4 ++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/calendar.tsx b/components/calendar.tsx
index 703d322..688b480 100644
--- a/components/calendar.tsx
+++ b/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
             )}
diff --git a/styles/index.css b/styles/index.css
index e457082..0b1ef44 100644
--- a/styles/index.css
+++ b/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;
 }