Timeline Tags

Add tags to timeline items for categorization, labeling, and quick visual identification.

Tag Properties

Property	Type	Description
`title`	`string`	The tag label text
`color`	`string`	Background color (e.g., '#dc2626', 'red')
`onclick`	`function`	Click handler: `(event, item, tag) => void`

Example

Add tags to timeline items:

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

export default function App() {
    const handleTagClick = (e, item, tag) => {
        console.log('Clicked tag:', tag.title, 'on item:', item.title);
    };

    const [data] = useState([
        {
            title: 'Project Kickoff',
            date: '2025-01-15',
            tags: [
                { title: 'Meeting', color: '#3b82f6' },
                { title: 'Important', color: '#dc2626' }
            ]
        },
        {
            title: 'Design Review',
            date: '2025-02-01',
            tags: [
                { title: 'Design', color: '#8b5cf6', onclick: handleTagClick }
            ]
        },
        {
            title: 'Development Sprint',
            date: '2025-02-15',
            tags: [
                { title: 'Dev', color: '#10b981' },
                { title: 'Sprint 1', color: '#f59e0b' }
            ]
        }
    ]);

    return <Timeline data={data} />;
}