JavaScript Timeline

2.1KB gzipped

The Timeline component is a lightweight plugin for creating dynamic timelines in web applications. It supports event logs, roadmaps, and chronological displays with customizable styling. Includes automatic monthly grouping, sorting options, and positioning controls. Works across vanilla JavaScript, React, Vue, and Angular.

Event logs and roadmaps
Monthly view with navigation
Ascending/descending sorting
Customizable positioning (left, right, top, bottom)
Border styles and colors
Responsive design
TypeScript support

CalendarJS Product Suite

CalendarJS is a complete calendar and scheduling solution that includes:

Calendar - Date picker with range selection (3.18KB)
Schedule - Event scheduler with drag & drop (4.2KB)
Timeline - Chronological event display (this page)

Related Components

Schedule - Event Scheduling

For interactive event scheduling with drag-and-drop instead of a chronological list, use the Schedule component:

Day, week, and weekdays views
Drag & drop event management
Resource scheduling
Time slot configuration
Undo/redo support

Perfect for: Appointment calendars, team schedules, booking systems, resource planning

Explore Schedule Component →

Calendar - Date Selection

For date picking and selection before displaying timeline events, use the Calendar component:

Single and range date selection
Date validation
International formats
Keyboard navigation

Perfect for: Date range filters, report selectors, booking date pickers

Explore Calendar Component →

LemonadeJS Timeline - Reactive Framework

For reactive applications with data binding, LemonadeJS Timeline provides:

Reactive data binding
Vue, React, Angular integration
Built on CalendarJS Timeline (this component)
Framework-agnostic reactive wrapper

Explore LemonadeJS Timeline →

Documentation

Installation

npm install @calendarjs/ce

Settings

Property	Description
`data: Array<Item>`	Array of timeline items to display.
`type?: 'default' \| 'monthly'`	Display mode. Monthly groups items by month with navigation. Default: `'default'`.
`align?: 'left' \| 'right' \| 'top' \| 'bottom'`	Bullet point alignment. Default: `'left'`.
`message?: string`	Message shown when no data is available.
`order?: 'asc' \| 'desc'`	Sort order by date. Default: `'asc'`.
`width?: number`	Width of the timeline container in pixels.
`height?: number`	Height of the timeline container in pixels.
`value?: string \| object`	Initial value form type='monthly'.

Item Object

Property	Description
`date?: Date \| string`	Date associated with the item.
`title?: string`	Title for the item.
`subtitle?: string`	Subtitle or secondary text.
`description?: string`	Item description or content.
`borderColor?: string`	Border color (hex or CSS color).
`borderStyle?: string`	Border style: `'solid'`, `'dashed'`, or `'dotted'`.

Events

Event	Description
`onupdate`	Called when items are updated `onupdate?: (self: Timeline) => void`
`onload`	Called when the timeline is initialized `onload?: (self: Timeline) => void`

Methods

Method	Description
`refresh(): void`	Refresh the timeline view

Examples

Basic Timeline

<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" style="height: 300px"></div>

<script>
const { Timeline } = calendarjs;

Timeline(document.getElementById('root'), {
    data: [
        { title: 'Planning Phase', date: '2025-01-15', borderColor: '#3498db' },
        { title: 'Development', date: '2025-02-01', borderColor: '#e74c3c' },
        { title: 'Testing', date: '2025-02-15', borderColor: '#2ecc71' },
        { title: 'Deployment', date: '2025-03-01', borderColor: '#9b59b6' }
    ],
    align: 'left'
});
</script>
</html>

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

export default function App() {
    const self = this;
    self.data = [
        { title: 'Planning Phase', date: '2025-01-15', borderColor: '#3498db' },
        { title: 'Development', date: '2025-02-01', borderColor: '#e74c3c' },
        { title: 'Testing', date: '2025-02-15', borderColor: '#2ecc71' },
        { title: 'Deployment', date: '2025-03-01', borderColor: '#9b59b6' }
    ];

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

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

export default function App() {
    const data = [
        { title: 'Planning Phase', date: '2025-01-15', borderColor: '#3498db' },
        { title: 'Development', date: '2025-02-01', borderColor: '#e74c3c' },
        { title: 'Testing', date: '2025-02-15', borderColor: '#2ecc71' },
        { title: 'Deployment', date: '2025-03-01', borderColor: '#9b59b6' }
    ];

    return <Timeline data={data} align="left" />;
}

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

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

export default {
    components: { Timeline },
    data() {
        return {
            data: [
                { title: 'Planning Phase', date: '2025-01-15', borderColor: '#3498db' },
                { title: 'Development', date: '2025-02-01', borderColor: '#e74c3c' },
                { title: 'Testing', date: '2025-02-15', borderColor: '#2ecc71' },
                { title: 'Deployment', date: '2025-03-01', borderColor: '#9b59b6' }
            ]
        };
    }
}
</script>

Monthly View

<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'), {
    type: 'monthly',
    value: '2025-01-05',
    data: [
        { title: 'Sprint Planning', subtitle: 'Team A', date: '2025-01-05' },
        { title: 'Code Review', subtitle: 'Team B', date: '2025-01-12' },
        { title: 'Release v1.0', subtitle: 'Production', date: '2025-02-01' },
        { title: 'Sprint Retrospective', subtitle: 'Team A', date: '2025-02-15' }
    ],
    width: 500,
    height: 400
});
</script>
</html>

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

export default function App() {
    const self = this;
    self.data = [
        { title: 'Sprint Planning', subtitle: 'Team A', date: '2025-01-05' },
        { title: 'Code Review', subtitle: 'Team B', date: '2025-01-12' },
        { title: 'Release v1.0', subtitle: 'Production', date: '2025-02-01' },
        { title: 'Sprint Retrospective', subtitle: 'Team A', date: '2025-02-15' }
    ];

    return render => render`<div style="width: 500px; height: 400px;">
        <Timeline type="monthly" data="${self.data}" value="2025-01-05" />
    </div>`;
}

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

export default function App() {
    const data = [
        { title: 'Sprint Planning', subtitle: 'Team A', date: '2025-01-05' },
        { title: 'Code Review', subtitle: 'Team B', date: '2025-01-12' },
        { title: 'Release v1.0', subtitle: 'Production', date: '2025-02-01' },
        { title: 'Sprint Retrospective', subtitle: 'Team A', date: '2025-02-15' }
    ];

    return <Timeline type="monthly" value="2025-01-05" data={data} style={{ width: 500, height: 400 }} />;
}

<template>
    <Timeline type="monthly" value="2025-01-05" :data="data" style="width: 500px; height: 400px" />
</template>

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

export default {
    components: { Timeline },
    data() {
        return {
            data: [
                { title: 'Sprint Planning', subtitle: 'Team A', date: '2025-01-05' },
                { title: 'Code Review', subtitle: 'Team B', date: '2025-01-12' },
                { title: 'Release v1.0', subtitle: 'Production', date: '2025-02-01' },
                { title: 'Sprint Retrospective', subtitle: 'Team A', date: '2025-02-15' }
            ]
        };
    }
}
</script>

Timeline Events - Event callbacks
Timeline Controls - Navigation and controls
Web Components - Using as web component

Edit this page on GitHub