How do you use classNames to change the backgroundColor of selectedDay?

[meinefinsternis]

Hello!

1. Create Datepicker. Pass theclassNames prop.

 <Datepicker
            onChange={handleChange}
            locale={enUS}
            startValue={date.startValue}
            endValue={date.endValue}
            classNames={{
                selectedDay: 'selectedDate',
                dateLabel: 'dateLabel',
            }}
        />

2. Create a styles.css|scss file to define the styles for the classes you want to customize.

.selectedDate {
    background-color: red;
}

.selectedDate .dateLabel {
    background-color: transparent;
}

3. Import the styles, use the < Datepicker />

import React from 'react';
import { Datepicker, DatepickerEvent } from '@meinefinsternis/react-horizontal-date-picker';
import { enUS } from 'date-fns/locale';
+ import './styles.css';

export const Picker = () => {
    const [date, setDate] = React.useState<{
        endValue: Date | null;
        startValue: Date | null;
        rangeDates: Date[] | null;
    }>({
        startValue: null,
        endValue: null,
        rangeDates: [],
    });

    const handleChange = (d: DatepickerEvent) => {
        const [startValue, endValue, rangeDates] = d;
        setDate((prev) => ({ ...prev, endValue, startValue, rangeDates }));
    };

    return (
        <Datepicker
            onChange={handleChange}
            locale={enUS}
            startValue={date.startValue}
            endValue={date.endValue}
            classNames={{
                selectedDay: 'selectedDate',
                dateLabel: 'dateLabel',
            }}
        />
    );
};