Skip to main content

eventPopup

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

Usage​

eventPopup?: Component<{
  event: CalendarEvent;
  close: () => void;
}>;
PropTypeDescription
eventCalendarEventThe clicked event.
close() => voidCloses the popup. Call from inside the component.

Example​

<script lang="ts">
  import { Calendar } from "@svar-ui/svelte-calendar";
  import EventCard from "./EventCard.svelte";

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

<Calendar {events} eventPopup={EventCard} />

EventCard.svelte:

<script lang="ts">
  import type { CalendarEvent } from "@svar-ui/svelte-calendar";

  let { event, close }: { event: CalendarEvent; close: () => void } = $props();
</script>

<div class="card">
  <h3>{event.text}</h3>
  <p>{event.start.toLocaleString()} - {event.end.toLocaleString()}</p>
  <button onclick={close}>Close</button>
</div>
  • 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.