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

<script setup lang="ts">
    import { Calendar } from "@wx/vue-calendar";
    import type { CellCss } from "@wx/vue-calendar";

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

<template>
    <Calendar :events="events" :cellCss="cellCss" />
</template>

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.