prevent highlighting of Today in react-date-picker

Question

Couldn't find anything specifically related to this question. I figured out from the other questions about react-date-picker that it's possible to not have today's value selected by default, which is great, and mostly what I'm going for, but I'd even like to prevent react-date-picker from highlighting today. It looks too much like the user has already selected a date, but when there are no appointments available for today, i'd like to not only have it greyed-out like the rest, but to actually not have it highlighted at all. I'd still like other days highlighted when they are selected, so I don't want to remove the highlight class from CSS, but an invalid date shouldn't be highlighted, even if it is today, because there are no appointments today in this case, so the date is not selected.

current code is:

<ReactDatePicker
  inline
  minDate={new Date()}
  selected={chosenDay ? new Date(chosenDay) : null}
  value={null}
  filterDate={(date) => isDayAvailable(date, timeSlots)}
  onChange={(date) => chooseDay(date)}
/>

score 0 · Answer 1 · answered Jan 15 '21 at 00:50

I once found a set of MUTheme attributes for react calendar, please check them in this code and try things out, not sure but I think it's 'current'.

import DateFnsUtils from "@date-io/date-fns";
import {DatePicker, MuiPickersUtilsProvider} from "@material-ui/pickers";
import React from "react";
import styles from "./Calendar.module.scss";
import Box from "@material-ui/core/Box";
import {createMuiTheme, MuiThemeProvider} from "@material-ui/core/styles";
import {black, white} from "material-ui/styles/colors";

export default function Calendar(props) {

    const materialTheme = createMuiTheme({
        palette: {
            primary: {
                main: '#3E3F42'
            }
        },
        overrides: {
            MuiPickersCalendarHeader: {
                switchHeader: {
                    backgroundColor: '#303235',
                    color: white,
                },
                iconButton: {
                    backgroundColor: "transparent",
                    color: white
                },
                dayLabel: {
                    color: white //days in calendar
                },
                transitionContainer: {
                    color: white
                }
            },
            MuiPickersBasePicker: {
                pickerView: {
                    backgroundColor: '#3E3F42'
                }
            },
            MuiPickersDay: {
                day: {
                    color: white //days in calendar
                },
                  daySelected: {
                    backgroundColor: '#FFC561', //calendar circle
                      color: black
                  },
                  current: {
                    backgroundColor: '#736F69',
                      color: white
                  },
            },

            MuiDialogActions: {
                root: {
                    backgroundColor: '#3E3F42'
                }
            }
        }
    });

    const isOpened = props.isOpened;
    const topPosition = props.topPosition;
    const selectedDate = props.selectedDate;

    const sleep = (milliseconds) => {
        return new Promise(resolve => setTimeout(resolve, milliseconds))
    }

    async function handleDateChange(date1) {
        props.onChange(date1);
        await sleep(700);
        props.setDDOpen(false);
    }

    return isOpened ? (
            <Box pad={{ vertical: 'small'}} className={styles.smallCard} style={{top: topPosition}}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <MuiThemeProvider theme={materialTheme}>
                    <DatePicker
                        disableToolbar
                        variant="static"
                        value={selectedDate}
                        onChange={handleDateChange}
                    />
                    </MuiThemeProvider>
                </MuiPickersUtilsProvider>
            </Box>): null
}

score 0 · Answer 2 · answered Jun 28 '21 at 22:51

I don't think there's a specific prop/configuration for this, but you can try overriding/removing the styles from the CSS selector CalendarDay__today, which you can see controls the styling for "today" when you inspect the page.

The other highlighting comes from other selectors like CalendarDay__highlighted_calendar which can be customized using CSS overrides as well.

prevent highlighting of Today in react-date-picker

2 Answers2