Skip to content

Timeline Events

Handle data updates and user interactions with the Timeline component.

Available Events

Section titled “Available Events”
EventDescription
onUpdateFired after result is recomputed (initial render + every change). Items are the resolved shape (with defaults filled in).
onUpdate?: (result: Item[]) => void
onEditionFired when the edit icon is clicked on an editable item.
onEdition?: (entry: Item) => void

The instance is available via the forwarded ref — your handler receives just the data.

Example

Section titled “Example”

Handle timeline updates:

import { useState } from 'react';
import { Timeline } from '@calendarjs/react';

export default function App() {
    const [data] = useState([
        { title: 'Project Started', date: '2025-01-01' },
        { title: 'Milestone 1', date: '2025-02-01' }
    ]);

    return (
        <Timeline
            data={data}
            onUpdate={(items) => console.log('Updated:', items.length)}
        />
    );
}

Driving state from onEdition

Section titled “Driving state from onEdition”

Wire the edit-icon callback to React state for inline editing:

import { useCallback, useState } from 'react';
import { Timeline } from '@calendarjs/react';

export default function App() {
    const [data, setData] = useState([
        { id: 1, title: 'Draft Proposal', date: '2025-01-10', editable: true },
        { id: 2, title: 'Final Report', date: '2025-01-20', editable: true },
    ]);

    const onEdition = useCallback((entry) => {
        const next = prompt('New title:', entry.title);
        if (!next) return;
        setData((prev) =>
            prev.map((item) => (item.id === entry.id ? { ...item, title: next } : item)),
        );
    }, []);

    return <Timeline data={data} onEdition={onEdition} />;
}
Section titled “Related”