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:

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.min.js"></script>

<div id="root"></div>

<script>
const { Timeline } = calendarjs;

Timeline(document.getElementById('root'), {
    data: [
        {
            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: (e, item, tag) => {
                        console.log('Clicked tag:', tag.title, 'on item:', item.title);
                    }
                }
            ]
        },
        {
            title: 'Development Sprint',
            date: '2025-02-15',
            tags: [
                { title: 'Dev', color: '#10b981' },
                { title: 'Sprint 1', color: '#f59e0b' }
            ]
        }
    ]
});
</script>
</html>

import { Timeline } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const self = this;

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

    self.data = [
        {
            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 render => render`<div>
        <Timeline data="${self.data}" />
    </div>`;
}

import { useState } from 'react';
import { Timeline } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';

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} />;
}

<template>
    <Timeline :data="data" />
</template>

<script>
import { Timeline } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';

export default {
    components: { Timeline },
    data() {
        return {
            data: [
                {
                    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: this.handleTagClick }
                    ]
                },
                {
                    title: 'Development Sprint',
                    date: '2025-02-15',
                    tags: [
                        { title: 'Dev', color: '#10b981' },
                        { title: 'Sprint 1', color: '#f59e0b' }
                    ]
                }
            ]
        };
    },
    methods: {
        handleTagClick(e, item, tag) {
            console.log('Clicked tag:', tag.title, 'on item:', item.title);
        }
    }
}
</script>