Skip to main content

eventCss

Callback that returns CSS class names for each rendered event wrapper. Used to color events by their data, the active view, or the section render mode.

Usage​

eventCss?: (ctx: EventContext) => string;

EventContext fields:

FieldTypeDescription
eventCalendarEventThe event being rendered.
viewstringActive view id ("day", "week", "month", ...).
sectionstringSection name within the view.
mode"grid" | "bars" | "boxes"Section render mode the event is being drawn in.

Called for each rendered event in bars, boxes, and grid modes. The returned class list is appended to any event.css value already set on the event object.

Example​

<script lang="ts">
    import { Calendar } from "@wx/svelte-calendar";
    import type { EventCss } from "@wx/svelte-calendar";

    const eventCss: EventCss = ctx => {
        const cls = `priority-${ctx.event.priority || "default"}`;
        if (ctx.mode === "bars") return `${cls} bar-event`;
        if (ctx.mode === "boxes") return `${cls} box-event`;
        return cls;
    };
</script>

<Calendar {events} {eventCss} />
  • cellCss — paint background grid cells from the same data.
  • eventContent — replace the markup inside each event.
  • tooltip — hover preview triggered on the same event element.
  • Styling cells and events — patterns for combining eventCss with eventContent and event.css.