Skip to main content

eventPopup

Custom Vue 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 setup lang="ts">
  import { Calendar } from "@svar-ui/vue-calendar";
  import EventCard from "./EventCard.vue";

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

<template>
  <Calendar :events="events" :eventPopup="EventCard" />
</template>

EventCard.vue:

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

  const props = defineProps<{ event: CalendarEvent; close: () => void }>();
</script>

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