eventPopup

Custom React component rendered when an event is clicked. Replaces the default event card with custom markup such as description, attendees, or links.

Usage

eventPopup?: ComponentType<{
  event: CalendarEvent;
  close: () => void;
}>;

Prop	Type	Description
event	CalendarEvent	The clicked event.
close	() => void	Closes the popup. Call from inside the component.

Example

import { Calendar } from "@svar-ui/react-calendar";
import EventCard from "./EventCard.jsx";

const events = [
  { id: 1, start: new Date(), end: new Date(), text: "Meeting" },
];

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

EventCard.jsx:

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

export default EventCard;

Related articles

• tooltip — display-only hover preview alternative.
• eventContent — custom markup inside the event itself.
• select-event — open the editor instead of the popup.
• Event card — full guide for the click popup.