Skip to main content

eventContent

React component that renders the inner content of every event. Replaces the default event markup. The renderer-owned wrapper element and layout behavior stay intact.

Usage​

eventContent?: Component<{
    event: CalendarEvent;
    mode: EventContentMode;
}>;

The component receives these props:

PropTypeDescription
eventCalendarEventThe event being rendered, including any custom fields.
modeEventContentModeThe renderer that mounted the component (see values below).

EventContentMode values:

  • "grid" - time-grid slot (day, week, resources, timeline)
  • "bars" - multiday bar at the top of time-grid views
  • "boxes" - month-grid box
  • "list" - agenda list row
  • "year-tooltip" - popup shown when hovering a year-view day

Example​

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

<Calendar events={events} eventContent={EventBlock} />
// EventBlock.jsx
import type { CalendarEvent, EventContentMode } from "@wx/react-calendar";

function EventBlock({ event, mode }: { event: CalendarEvent; mode: EventContentMode }) {
    return (
        <div className={`event-block${mode === "boxes" ? " compact" : ""}`}>
            <strong>{event.text}</strong>
            {mode !== "boxes" && <span>{event.location ?? ""}</span>}
        </div>
    );
}

export default EventBlock;