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

const api = ref();
const eventProjection = ref(null);

const task = { text: "New task", duration: 60 };

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

<template>
    <div
        :ondragstart="ondragstart"
        :ondragover="ondragover"
        :ondrop="ondrop"
    >
        <Calendar ref="api" :events="events" :eventProjection="eventProjection" />
    </div>
</template>