Timeline

The Timeline component provides a powerful way to visualize events chronologically. Perfect for project planning, tracking historical data, or managing event schedules. Features include drag-and-drop functionality, customizable event styling, and responsive design that works seamlessly across all devices.

<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/timeline/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/timeline/dist/style.min.css" />

<div id="root"></div>

<script>
Timeline(document.getElementById("root"), {
    data: [
        {
            title: "Project Kickoff",
            date: new Date(2025, 0, 15),
            subtitle: "Meeting",
            description: "Initial project meeting and planning",
            borderColor: '#4CAF50',
        },
        {
            title: "Development Phase",
            date: new Date(2025, 1, 1),
            subtitle: "Development",
            description: "Start of development activities",
            borderColor: '#2196F3',
        },
        {
            title: "Testing Phase",
            date: new Date(2025, 2, 15),
            subtitle: "QA",
            description: "Quality assurance and testing",
            borderColor: '#FF9800',
        },
        {
            title: "Launch Date",
            date: new Date(2025, 3, 1),
            subtitle: "Release",
            description: "Product release to production",
            borderColor: '#F44336',
        }
    ],
    align: 'left'
});
</script>
</html>

import React, { useRef } from 'react';
import Timeline from '@lemonadejs/timeline/dist/react';
import '@lemonadejs/timeline/dist/style.css';

export default function App() {
    const myRef = useRef();

    const data = [
        {
            title: "Project Kickoff",
            date: new Date(2025, 0, 15),
            subtitle: "Meeting",
            description: "Initial project meeting and planning",
            borderColor: '#4CAF50',
        },
        {
            title: "Development Phase",
            date: new Date(2025, 1, 1),
            subtitle: "Development",
            description: "Start of development activities",
            borderColor: '#2196F3',
        },
        {
            title: "Testing Phase",
            date: new Date(2025, 2, 15),
            subtitle: "QA",
            description: "Quality assurance and testing",
            borderColor: '#FF9800',
        },
        {
            title: "Launch Date",
            date: new Date(2025, 3, 1),
            subtitle: "Release",
            description: "Product release to production",
            borderColor: '#F44336',
        }
    ];

    return (<>
        <Timeline data={data} align="left" ref={myRef} />
    </>);
}

<template>
    <div>
        <Timeline :data="data" align="left" ref="timelineRef" />
    </div>
</template>

<script>
import Timeline from '@lemonadejs/timeline/dist/vue';
import '@lemonadejs/timeline/dist/style.css';

export default {
    name: 'App',
    components: {
        Timeline
    },
    data() {
        return {
            data: [
                {
                    title: "Project Kickoff",
                    date: new Date(2025, 0, 15),
                    subtitle: "Meeting",
                    description: "Initial project meeting and planning",
                    borderColor: '#4CAF50',
                },
                {
                    title: "Development Phase",
                    date: new Date(2025, 1, 1),
                    subtitle: "Development",
                    description: "Start of development activities",
                    borderColor: '#2196F3',
                },
                {
                    title: "Testing Phase",
                    date: new Date(2025, 2, 15),
                    subtitle: "QA",
                    description: "Quality assurance and testing",
                    borderColor: '#FF9800',
                },
                {
                    title: "Launch Date",
                    date: new Date(2025, 3, 1),
                    subtitle: "Release",
                    description: "Product release to production",
                    borderColor: '#F44336',
                }
            ]
        };
    }
};
</script>

Features

Drag and Drop: Easily move events along the timeline
Customizable Styling: Define colors and styles for each event
Responsive Design: Works seamlessly on desktop and mobile devices
Event Callbacks: Hook into change events for custom functionality
Flexible Data Format: Simple JSON-based event configuration
Zoom Controls: Navigate through different time scales

Use Cases

Project management timelines
Historical event visualization
Production scheduling
Event planning and coordination
Resource allocation tracking
Milestone tracking

Edit this page on GitHub