Documentation keyboard_arrow_right Timeline

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

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>

Related

Edit this page on GitHub