Event Card

This guide covers the eventPopup extension point - how to render a custom card on event clicks, how it interacts with the built-in editor, and what the injected component receives.

How the event card works

The event card is not a separate exported component. You write a React component, pass it through the eventPopup prop, and the calendar mounts it inside an anchored Popup whenever the user clicks an event.

A few rules drive how it behaves:

• Click detection is movement-aware. The internal click handler listens for mousedown / mouseup on the section container and treats the interaction as a click only when the pointer stays within a 3 px threshold. This is what separates a click from the start of a drag.
• Resolution is store-based. Event elements expose a data-id. The handler resolves it through api.getEvent(...) to find the stored event, then opens the popup with that event.
• eventPopup overrides the default click path. Without eventPopup, an event click dispatches select-event (which opens the editor when one is mounted). With eventPopup, the click opens the card instead - select-event is not dispatched.
• Empty-space clicks dismiss. Clicking outside an event closes the current card. Clicking another event swaps the card to that event.
• The component renders inside the calendar subtree. It can read any React context exposed by the calendar's parent components - useful for passing app-level data such as resource lists.

The card receives two props: the resolved event object and a close callback. You decide what the card looks like and when it dismisses itself.

Passing a component

Define a React component that accepts event and close, then hand it to eventPopup:

// App.jsx
import { Calendar } from "@wx/react-calendar";
import EventCard from "./EventCard.jsx";
import { getData } from "./data";

const { data, date } = getData();

function App() {
    return (
        <Calendar
            events={data}
            date={date}
            view="week"
            eventPopup={EventCard}
            views={["day", "week", "month"]}
        />
    );
}

export default App;

The card component itself reads its props:

// EventCard.jsx
function EventCard({ event, close }) {
    return (
        <div className="event-card">
            <header>{event.text}</header>
            <p>{event.start.toLocaleString()} - {event.end.toLocaleString()}</p>
            <button onClick={close}>Close</button>
        </div>
    );
}

export default EventCard;

close is the supported way to dismiss the popup from inside the card - use it after the user confirms an action, navigates away, or clicks an explicit close control.

Reading app data through context

Because the card renders inside the calendar's subtree, it can read React context from any ancestor - including contexts you set in the parent that mounts <Calendar>:

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

export const ResourcesContext = createContext(null);

const resources = [
    { id: "alice", label: "Alice" },
    { id: "bob",   label: "Bob"   },
];

function Parent() {
    return (
        <ResourcesContext.Provider value={resources}>
            <Calendar events={data} date={date} eventPopup={EventCard} />
        </ResourcesContext.Provider>
    );
}

The card pulls the same context with useContext:

import { useContext } from "react";
import { ResourcesContext } from "./Parent.jsx";

function EventCard({ event, close }) {
    const resources = useContext(ResourcesContext);
    const assignee = resources?.find(r => r.id === event.unit_id)?.label;
    // ...
}

This pattern keeps domain data out of every event and lets the card resolve it on demand.

Coexisting with the editor

The default click path opens the editor (when <Editor> is mounted) by dispatching select-event. The eventPopup prop replaces that path, so the editor will not auto-open on click while the card is active.

If you want the card and the editor side by side, route the editor explicitly from a button inside the card. Call api.exec("select-event", { id }) to open the editor for the same event the card is showing:

// EventCard.jsx
import { useContext } from "react";
import { context } from "@wx/react-calendar";

function EventCard({ event, close }) {
    const api = useContext(context.api);

    const openEditor = () => {
        api.exec("select-event", { id: event.id });
        close();
    };

    return (
        <>
            <button onClick={openEditor}>Edit</button>
            <button onClick={close}>Close</button>
        </>
    );
}

export default EventCard;

context.api is the React context the calendar exposes for child components; see the API reference for the full surface (getState, getReactiveState, exec, fmt, getEvent).

If you prefer a card-only flow, leave the editor out of the tree - eventPopup does not require it.

When to use what

• Editor only - users edit events through the form. No eventPopup. Click selects, editor opens.
• Card only - users see a read-only or action-driven preview on click. eventPopup set, no <Editor>.
• Card plus editor - card is the entry point, editor opens from a card action. eventPopup set, <Editor api={api} /> mounted, card calls api.exec("select-event", ...).