Event Management

Create, update, and delete events using the imperative methods exposed via the forwarded ref, or the Event form component for modal editing.

Methods

Call these on ref.current after grabbing a ref to the Schedule. Methods that accept events take the loose EventInput shape (only start is required) — defaults are filled in. getData() returns the resolved Event shape.

Method	Description
`addEvents(events: EventInput \| EventInput[]): Event[] \| false`	Add one or more events
`updateEvent(guidOrEvent, newValue: Partial<EventInput>)`	Update event properties
`deleteEvents(events: Event \| Event[] \| string \| string[])`	Delete one or more events
`getData(): Event[]`	Get all events (resolved)
`setData(events: EventInput[])`	Replace all events
`undo()`	Undo last change
`redo()`	Redo last undone change

Programmatic CRUD

addEvents only needs start — guid, title, color, and type are filled in by the component. Pass app metadata directly; no cast required.

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

export default function App() {
    const scheduleRef = useRef();

    const addEvent = () => {
        scheduleRef.current.addEvents({
            date: '2025-01-15',
            start: '10:00',
            end: '11:00',
            title: 'New Meeting',
        });
    };

    const updateEvent = () => {
        const events = scheduleRef.current.getData();
        if (events.length > 0) {
            scheduleRef.current.updateEvent(events[0], { title: 'Updated' });
        }
    };

    const deleteEvent = () => {
        const events = scheduleRef.current.getData();
        if (events.length > 0) {
            scheduleRef.current.deleteEvents(events[0].guid);
        }
    };

    const undo = () => scheduleRef.current.undo();

    return (
        <div>
            <button onClick={addEvent}>Add</button>
            <button onClick={updateEvent}>Update</button>
            <button onClick={deleteEvent}>Delete</button>
            <button onClick={undo}>Undo</button>
            <Schedule ref={scheduleRef} type="week" value="2025-01-15" style={{ height: '500px' }} />
        </div>
    );
}

With `useSchedule` and reactive button states

The hook gives you a reactive instance so buttons can be disabled until the schedule has mounted:

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

export default function App() {
    const { ref, instance } = useSchedule();

    const addEvent = () =>
        instance.addEvents({ date: '2025-01-15', start: '10:00', end: '11:00' });

    return (
        <>
            <button disabled={!instance} onClick={addEvent}>Add</button>
            <button disabled={!instance} onClick={() => instance.undo()}>Undo</button>
            <button disabled={!instance} onClick={() => instance.redo()}>Redo</button>

            <Schedule ref={ref} type="week" value="2025-01-15" style={{ height: 500 }} />
        </>
    );
}

Edit with Event Form

Use the onEdition callback to open the Event form when users double-click an event:

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

export default function App() {
    const scheduleRef = useRef();
    const eventFormRef = useRef();
    const [events] = useState([
        {
            guid: '1',
            title: 'Team Meeting',
            date: '2024-03-15',
            start: '10:00',
            end: '11:00',
            color: '#3498db'
        }
    ]);

    const handleEdition = (event) => {
        eventFormRef.current.open(event, (newValue) => {
            scheduleRef.current.updateEvent(event, newValue);
        });
    };

    return (
        <div>
            <Schedule
                ref={scheduleRef}
                type="week"
                data={events}
                onEdition={handleEdition}
                style={{ height: '500px' }}
            />
            <Event ref={eventFormRef} />
        </div>
    );
}

Create with Event Form

Use the Event form to create new events with a modal dialog:

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

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

    const handleEdition = (event) => {
        eventFormRef.current.open(event, (newValue) => {
            scheduleRef.current.updateEvent(event, newValue);
        });
    };

    const createEvent = () => {
        const newEvent = {
            date: new Date().toISOString().split('T')[0],
            start: '10:00',
            end: '11:00'
        };
        eventFormRef.current.open(newEvent, (newValue) => {
            scheduleRef.current.addEvents(newValue);
        });
    };

    return (
        <div>
            <button onClick={createEvent}>Create Event</button>
            <Schedule
                ref={scheduleRef}
                type="week"
                data={events}
                onEdition={handleEdition}
                style={{ height: '500px' }}
            />
            <Event ref={eventFormRef} />
        </div>
    );
}

Time Range Validation

Configure valid time range for the Event form:

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

export default function App() {
    const scheduleRef = useRef();
    const eventFormRef = useRef();
    const [events] = useState([]);
    const validRange = ['08:00', '18:00'];

    const handleEdition = (event) => {
        eventFormRef.current.open(event, (newValue) => {
            scheduleRef.current.updateEvent(event, newValue);
        });
    };

    return (
        <div>
            <Schedule
                ref={scheduleRef}
                type="week"
                data={events}
                onEdition={handleEdition}
                style={{ height: '500px' }}
            />
            <Event ref={eventFormRef} validRange={validRange} />
        </div>
    );
}

Event Form API

Method	Parameters	Description
`open()`	`(event, callback)`	Open form with event data. Callback receives updated values.
`close()`	-	Close the form.