cellCss

Callback that returns CSS class names for each rendered grid or month-grid cell. Used to paint cells based on view, section, axis units, or resolved date.

Usage

cellCss?: (ctx: CellContext) => string;

CellContext fields:

Field	Type	Description
view	string	Active view id ("day", "week", "month", ...).
section	string	Section name within the view.
mode	"grid" | "bars" | "boxes" | "list" | "year"	Section render mode.
x	ScaleUnit | null	X-axis unit (null for 1D-y grids and month-grid cells).
y	ScaleUnit | null	Y-axis unit (null for 1D-x grids and month-grid cells).
date	Date | null	Resolved date when at least one axis is a date scale.

Honored by background grid cells in time-grid views and by month-style grids. Not applied to list (agenda) or year sections.

Example

import { Calendar } from "@wx/react-calendar";

const cellCss = ctx => {
    if (ctx.date && (ctx.date.getDay() === 0 || ctx.date.getDay() === 6)) {
        return "weekend";
    }
    return "";
};

export default function App() {
    return <Calendar events={events} cellCss={cellCss} />;
}

Related articles

• eventCss — sibling callback that paints event wrappers.
• eventContent — replace event markup when classes aren't enough.
• views — how view sections are configured.
• Styling cells and events — patterns for cellCss, eventCss, and per-cell rules.