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​

import { useRef, useState } from "react";
import { Calendar } from "@svar-ui/react-calendar";

function App() {
    const api = useRef(null);
    const [eventProjection, setEventProjection] = useState(null);

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

    return (
        <div
            onDragStart={() => setEventProjection({ htmlEvent: null, event: { ...task } })}
            onDragOver={e => {
                setEventProjection(prev => ({ ...prev, htmlEvent: e }));
                e.preventDefault();
            }}
            onDrop={e => {
                if (eventProjection?.event.start && eventProjection.event.end) {
                    e.preventDefault();
                    api.current.exec("add-event", { event: eventProjection.event });
                }
                setEventProjection(null);
            }}
        >
            <Calendar ref={api} events={events} eventProjection={eventProjection} />
        </div>
    );
}