Skip to main content

eventContent

Svelte 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 lang="ts">
    import { Calendar } from "@wx/svelte-calendar";
    import EventBlock from "./EventBlock.svelte";
</script>

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

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

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