Apply modifier className based on condition

[lagroms]

Hello !

I'd like to apply a className based on the "type" property of my entries in the calendar.
Basically if the entry type is "Penciled" it should be orange, if it's "Booked" it should be green and if it's "Blacked_Out" it should be gray.
So I'm applying the classnames for the modifiers based on that condition in the "modifiers" Object.

However it seems like the .some() method it not correct as I have entries with both "Penciled" and "Booked" classnames in my calendar. I've tried with .find() or .filter(), but same result.

import React, { useState, useEffect } from "react";
import { DayPicker } from "react-day-picker";
import { isSameDay, isWithinInterval } from "date-fns";
import "react-day-picker/dist/style.css";
import "./RangesCalendar.css";

const RangesCalendar = ({ entries, onMonthChange }) => {

    const [selected, setSelected] = useState([]);

    const modifiers = {
        "first-day-from-range": (day) => selected.some((r) => isSameDay(day, r.from)),
        "last-day-from-range": (day) => selected.some((r) => isSameDay(day, r.to)),
        "already-in-range": (day) => selected.some((r) => isWithinInterval(day, { start: r.from, end: r.to })),
        "penciled": () => selected.some((r) => r.type === "Penciled"),
        "booked": () => selected.some((r) => r.type === "Booked"),
        "blacked-out": () => selected.some((r) => r.type === "Blacked_Out"),
    };

    const modifiersClassNames = {
        "first-day-from-range": "first-day-from-range",
        "last-day-from-range": "last-day-from-range",
        "already-in-range": "already-in-range",
        "penciled": "penciled",
        "booked": "booked",
        "blacked-out": "blacked_out",
    };

    useEffect(() => {
        const updatedEntries = entries.map((entry) => ({
            from: new Date(entry.startTime),
            to: new Date(entry.endTime),
            type: entry.type,
        }));

        setSelected(updatedEntries);
    }, [entries]);

    return (
        <DayPicker
            selected={selected}
            modifiersClassNames={modifiersClassNames}
            onDayClick={(day) => console.log("%c THE CLICKED DAY >>", "color: lime; font-weight: bolder", `\n ${day}`)}
            onMonthChange={onMonthChange}
            weekStartsOn={1}
            modifiers={modifiers}
        />
    );
};

export default RangesCalendar;

[gpbl]

@lagroms could you fix your issue? It would help to replicate your problem in a code sandbox: https://codesandbox.io/s/busy-cori-wxus43

[lagroms]

Yes I managed to solve my problem by creating custom components to render the days and the caption as required:

const Caption = (props) => {
    const { goToMonth, nextMonth, previousMonth } = useNavigation();
    return (
        <div className={styles.nav}>
            <button disabled={!previousMonth} onClick={() => previousMonth && goToMonth(previousMonth)}>
                <img src={navigateIcon} alt="previous month" />
            </button>
            <h3>{format(props.displayMonth, "MMMM yyyy")}</h3>
            <button disabled={!nextMonth} onClick={() => nextMonth && goToMonth(nextMonth)}>
                <img src={navigateIcon} style={{ transform: "scaleX(-1)" }} alt="next month" />
            </button>
        </div>
    );
};

const DayRender = (props, selected, handleClick) => {
    const { date } = props;
    const activeModifiers = useActiveModifiers(props.date, props.displayMonth);
    const isSelected = isMatch(date, selected);
    const isFirstDay = selected.some((r) => isSameDay(date, r.from));
    const isLastDay = selected.some((r) => isSameDay(date, r.to));
    const isInRange = selected.some((r) => isWithinInterval(date, { start: r.from, end: r.to }));

    let entryStatus = "";
    const selectedItem = selected.find((r) => isWithinInterval(date, { start: r.from, end: r.to }));

    if (selectedItem) {
        entryStatus = selectedItem.type;
    }

    const handleDayClicked = () => {
        const selectedItem = selected.find((r) => isWithinInterval(date, { start: r.from, end: r.to }));

        if (selectedItem) {
            handleClick(selectedItem);
        }
    };

    return (
        <>
            {!activeModifiers.outside && (
                <button
                    className={`
                        ${styles.rdp_days}
                        ${isWeekend(date) ? styles.weekend : undefined}
                        ${isSelected ? styles.selected : undefined}
                        ${isFirstDay ? styles.is_first_day : undefined} 
                        ${isLastDay ? styles.is_last_day : undefined}
                        ${isInRange ? styles.is_in_range : undefined}
                        ${styles[entryStatus]}
                    `}
                    onClick={handleDayClicked}
                >
                    <div className={`${isToday(date) ? styles.today : undefined}`}>{props.date.getDate()}</div>
                </button>
            )}
        </>
    );
};

const RangesCalendar = ({ entries, onMonthChange, onClick }) => {
    const [selected, setSelected] = useState([]);

    useEffect(() => {
        const updatedEntries = entries.map((entry) => {
            const { startTime, endTime, ...otherProps } = entry;
            return {
                from: new Date(startTime),
                to: new Date(endTime),
                ...otherProps,
            };
        });

        setSelected(updatedEntries);
    }, [entries]);

    const handleClick = (entry) => {
        onClick(entry);
    };

    const classNames = {
        ...baseStyles,
        ...styles,
    };

    return (
        <DayPicker
            selected={selected}
            onMonthChange={onMonthChange}
            weekStartsOn={1}
            classNames={classNames}
            formatters={{ formatWeekdayName: (date) => format(date, "E") }}
            components={{ Day: (props) => DayRender(props, selected, handleClick), Caption: Caption }}
        />
    );
};

export default RangesCalendar;