Data Management

Programmatically add, update, and remove timeline entries.

Example

<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>

<button onclick="addEntry()">Add</button>
<button onclick="updateFirst()">Update</button>
<button onclick="removeLast()">Remove</button>
<div id="root"></div>

<script>
const { Timeline } = calendarjs;

const timeline = Timeline(document.getElementById('root'), {
    data: [
        { title: 'Project Started', date: '2025-01-01', borderColor: '#3498db' },
        { title: 'Time allocation meeting', date: '2025-01-02' }
    ],
    align: 'left'
});

function addEntry() {
    timeline.data.push({
        title: 'New Entry',
        date: '2025-02-01',
        borderColor: '#e74c3c'
    });
    timeline.refresh();
}

function updateFirst() {
    if (timeline.data.length > 0) {
        timeline.data[0].title = 'Updated Entry';
        timeline.data[0].borderColor = '#2ecc71';
        timeline.refresh();
    }
}

function removeLast() {
    if (timeline.data.length > 0) {
        timeline.data.pop();
        timeline.refresh();
    }
}
</script>
</html>

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

export default function App() {
    const self = this;
    self.timeline = null;
    self.data = [
        { title: 'Project Started', date: '2025-01-01', borderColor: '#3498db' }
    ];

    const addEntry = () => {
        self.data.push({
            title: 'New Entry',
            date: '2025-02-01',
            borderColor: '#e74c3c'
        });
    };

    const updateFirst = () => {
        if (self.data.length > 0) {
            self.data[0].title = 'Updated Entry';
            self.data[0].borderColor = '#2ecc71';
        }
    };

    const removeLast = () => {
        if (self.data.length > 0) {
            self.data.pop();
        }
    };

    return render => render`<div>
        <button onclick="${addEntry}">Add</button>
        <button onclick="${updateFirst}">Update</button>
        <button onclick="${removeLast}">Remove</button>
        <Timeline data="${self.data}" align="left" :ref="self.timeline" />
    </div>`;
}

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

export default function App() {
    const [data, setData] = useState([
        { title: 'Project Started', date: '2025-01-01', borderColor: '#3498db' }
    ]);

    const addEntry = () => {
        setData([...data, {
            title: 'New Entry',
            date: '2025-02-01',
            borderColor: '#e74c3c'
        }]);
    };

    const updateFirst = () => {
        if (data.length > 0) {
            const updated = [...data];
            updated[0] = { ...updated[0], title: 'Updated Entry', borderColor: '#2ecc71' };
            setData(updated);
        }
    };

    const removeLast = () => {
        if (data.length > 0) {
            setData(data.slice(0, -1));
        }
    };

    return (
        <div>
            <button onClick={addEntry}>Add</button>
            <button onClick={updateFirst}>Update</button>
            <button onClick={removeLast}>Remove</button>
            <Timeline data={data} align="left" />
        </div>
    );
}

<template>
    <div>
        <button @click="addEntry">Add</button>
        <button @click="updateFirst">Update</button>
        <button @click="removeLast">Remove</button>
        <Timeline :data="data" align="left" />
    </div>
</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', borderColor: '#3498db' }
            ]
        };
    },
    methods: {
        addEntry() {
            this.data.push({
                title: 'New Entry',
                date: '2025-02-01',
                borderColor: '#e74c3c'
            });
        },
        updateFirst() {
            if (this.data.length > 0) {
                this.data[0].title = 'Updated Entry';
                this.data[0].borderColor = '#2ecc71';
            }
        },
        removeLast() {
            if (this.data.length > 0) {
                this.data.pop();
            }
        }
    }
}
</script>

Edit this page on GitHub

Data Management

Example

Related