How can we change background color of cells in rsuite.js calendar component?

[harshRishi]

Please help me to give these dates background color accordingly! currently it is showing badges which content!

function CalendarComponent() {
    const [presentDays, setPresentDays] =
        useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]);
    const [halfDays, setHalfDays] = useState([10, 15, 20]);
    const [absents, setAbsents] = useState([30, 31]);

    function getBadgeColor(date) {
        const day = date.getDate();
        const dayOfWeek = date.getDay();
        if (dayOfWeek === 0) {
            return 'cyan'; // Cyan for Sundays (Holiday)
        } else if (presentDays.includes(day)) {
            return 'green'; // Green for Present
        } else if (halfDays.includes(day)) {
            return 'yellow'; // Yellow for Half-Day
        } else if (absents.includes(day)) {
            return 'red'; // Red for Absent
        }
        return null; // No badge color for other dates
    }

    function renderCell(date) {
        const badgeColor = getBadgeColor(date);

        if (badgeColor) {
            let content;
            if (badgeColor === 'yellow') {
                content = "Half-Day";
            } else if (badgeColor === 'red') {
                content = "Absent";
            } else if (badgeColor === 'green') {
                content = "Present";
            } else if (badgeColor === 'cyan') {
                content = "Holiday";
            }

            return <Badge
                className="calendar-todo-item-badge"
                content={content}
                color={badgeColor}
            />;
        }

        return null;
    }

    return (
        <div>
            <Calendar compact bordered renderCell={renderCell} />
        </div>
    )
}

#326

[SevenOutman]

Hi @harshRishi, could you provide a screenshot or CodeSandbox to show what this snippets renders? You can use this template https://codesandbox.io/s/rsuite-template-jdydg7

[harshRishi]

    const [presentDays, setPresentDays] =
        useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]);
    const [halfDays, setHalfDays] = useState([10, 15, 20]);
    const [absents, setAbsents] = useState([30, 31]);

using the above states I want to alter the calendar, the component code is already given above in Question,
what I want to achieve is to fill the background color of the calendar cell which some color instead of badges like shown in the image,
image Link:

[SevenOutman]

what I want to achieve is to fill the background color of the calendar cell

This is not yet supported. But I think it's a good feature to add. I've opened an issue #3333 to keep track of it. PR is also welcomed!

[SevenOutman]

It's supported now in 5.38.0 https://rsuitejs.com/components/calendar/#custom-cell-styles

[harshRishi]

Thanks Brother :)

[SevenOutman]

Thank you too for raising this use case :)

It's supported now in 5.38.0 https://rsuitejs.com/components/calendar/#custom-cell-styles

I'm going to mark this reply as answer if you don't mind.