Skip to main content

eventProjection

Drives external drag-in. You feed the calendar a pointer position and a proposed event; the renderer resolves the pointer to a snapped calendar position, mutates the descriptor's event in place with the calculated start, end, and any resource/unit fields, and draws a lightweight marker where the event would land.

Usage​

eventProjection?: EventProjection | null;
type EventProjection = {
	htmlEvent: { clientX: number; clientY: number } | null;
	event: Partial<CalendarEvent>;
};
FieldTypeDescription
htmlEvent{ clientX: number; clientY: number } | nullCurrent pointer coordinates. Replace it on each dragover; null shows no marker.
eventPartial<CalendarEvent>Proposed event. The renderer writes the resolved start, end, and resource/unit fields back onto it.

The default is undefined. Because the renderer enriches event in place, keep the same nested object across the drag and read its resolved start/end on drop.

Example​

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

    let api;
    let eventProjection = $state(null);

    const task = { text: "New task", duration: 60 };
</script>

<div
    ondragstart={() => (eventProjection = { htmlEvent: null, event: { ...task } })}
    ondragover={e => {
        eventProjection = { ...eventProjection, htmlEvent: e };
        e.preventDefault();
    }}
    ondrop={e => {
        if (eventProjection?.event.start && eventProjection.event.end) {
            e.preventDefault();
            api.exec("add-event", { event: eventProjection.event });
        }
        eventProjection = null;
    }}
>
    <Calendar bind:this={api} {events} {eventProjection} />
</div>