Timeline Editable

Display an edit icon on timeline items to indicate they can be modified by the user.

Item Property

Property	Type	Description
`editable`	`boolean`	Show an editable icon on the item

Example

Mark items as editable:

<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: 'Draft Proposal',
            subtitle: 'Needs review',
            date: '2025-01-10',
            editable: true,
            borderColor: '#f59e0b'
        },
        {
            title: 'Final Report',
            subtitle: 'Approved',
            date: '2025-01-20',
            editable: false,
            borderColor: '#10b981'
        },
        {
            title: 'Meeting Notes',
            subtitle: 'In progress',
            date: '2025-02-01',
            editable: true,
            borderColor: '#3b82f6'
        }
    ]
});
</script>
</html>

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

export default function App() {
    const self = this;
    self.data = [
        {
            title: 'Draft Proposal',
            subtitle: 'Needs review',
            date: '2025-01-10',
            editable: true,
            borderColor: '#f59e0b'
        },
        {
            title: 'Final Report',
            subtitle: 'Approved',
            date: '2025-01-20',
            editable: false,
            borderColor: '#10b981'
        },
        {
            title: 'Meeting Notes',
            subtitle: 'In progress',
            date: '2025-02-01',
            editable: true,
            borderColor: '#3b82f6'
        }
    ];

    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 [data] = useState([
        {
            title: 'Draft Proposal',
            subtitle: 'Needs review',
            date: '2025-01-10',
            editable: true,
            borderColor: '#f59e0b'
        },
        {
            title: 'Final Report',
            subtitle: 'Approved',
            date: '2025-01-20',
            editable: false,
            borderColor: '#10b981'
        },
        {
            title: 'Meeting Notes',
            subtitle: 'In progress',
            date: '2025-02-01',
            editable: true,
            borderColor: '#3b82f6'
        }
    ]);

    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: 'Draft Proposal',
                    subtitle: 'Needs review',
                    date: '2025-01-10',
                    editable: true,
                    borderColor: '#f59e0b'
                },
                {
                    title: 'Final Report',
                    subtitle: 'Approved',
                    date: '2025-01-20',
                    editable: false,
                    borderColor: '#10b981'
                },
                {
                    title: 'Meeting Notes',
                    subtitle: 'In progress',
                    date: '2025-02-01',
                    editable: true,
                    borderColor: '#3b82f6'
                }
            ]
        };
    }
}
</script>