Documentation keyboard_arrow_right Timeline keyboard_arrow_right Events

Timeline Events

Handle data updates and user interactions with the Timeline component.

Available Events

Event Description
onupdate Fired when timeline data changes
onupdate?: (self: Timeline, items: []) => void

Example

Handle timeline updates:

<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 Started', date: '2025-01-01' },
        { title: 'Milestone 1', date: '2025-02-01' }
    ],
    onupdate: function(self, items) {
        console.log('Timeline updated:', items.length, 'items');
    }
});
</script>
</html>

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

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

    const onUpdate = (el, items) => {
        console.log('Timeline updated:', items.length, 'items');
    };

    return render => render`<div>
        <Timeline data="${self.data}" onupdate="${onUpdate}" />
    </div>`;
}

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

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={(self, items) => console.log('Updated:', items.length)}
        />
    );
}

<template>
    <Timeline :data="data" @onupdate="onUpdate" />
</template>

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

export default {
    components: { Timeline },
    data() {
        return {
            data: [
                { title: 'Project Started', date: '2025-01-01' },
                { title: 'Milestone 1', date: '2025-02-01' }
            ]
        };
    },
    methods: {
        onUpdate(self, items) {
            console.log('Timeline updated:', items.length, 'items');
        }
    }
}
</script>

Related

Edit this page on GitHub