Skip to main content

eventContent

Vue 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​

<script setup lang="ts">
    import { Calendar } from "@wx/vue-calendar";
    import EventBlock from "./EventBlock.vue";
</script>

<template>
    <Calendar :events="events" :eventContent="EventBlock" />
</template>
<!-- EventBlock.vue -->
<script setup lang="ts">
    import type { CalendarEvent, EventContentMode } from "@wx/vue-calendar";

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

<template>
    <div class="event-block" :class="{ compact: mode === 'boxes' }">
        <strong>{{ event.text }}</strong>
        <span v-if="mode !== 'boxes'">{{ event.location ?? "" }}</span>
    </div>
</template>