Form Integration

Integrate custom forms for creating and editing schedule events.

Example

Handle event creation and editing with a modal form. The Schedule instance is available via the forwarded ref, so you can call updateEvent directly:

import { useState, useRef } from 'react';
import { Schedule } from '@calendarjs/react';

export default function App() {
    const scheduleRef = useRef();
    const [data] = useState([]);

    const handleDblClick = (event) => {
        const title = prompt('Edit title:', event.title);
        if (title) {
            scheduleRef.current.updateEvent(event, { title });
        }
    };

    // `events` is always an array (length >= 1) — no Array.isArray unwrap.
    const handleCreate = (events) => {
        const title = prompt('Event title:', 'New Event');
        if (title) {
            scheduleRef.current.updateEvent(events[0], { title });
        }
    };

    return (
        <Schedule
            ref={scheduleRef}
            type="week"
            value="2025-01-15"
            data={data}
            style={{ height: '500px' }}
            onDblClick={handleDblClick}
            onCreate={handleCreate}
        />
    );
}