Documentation keyboard_arrow_right Timeline keyboard_arrow_right Controls

Timeline Controls

Control the Timeline component using JavaScript methods and properties.

Properties

Property Type Description
data Array Get or set timeline items
align 'left' | 'right' | 'top' | 'bottom' Position of timeline bullets
order 'asc' | 'desc' Sort order of items
type 'default' | 'monthly' Timeline view type

Methods

Method Description
refresh() Refresh the display
goToMonth(year, month) Navigate to month (monthly view)
goToToday() Navigate to current month
nextMonth() Navigate to next month
previousMonth() Navigate to previous month

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>

<select id="align">
    <option value="left">Left</option>
    <option value="right">Right</option>
</select>
<select id="order">
    <option value="asc">Ascending</option>
    <option value="desc">Descending</option>
</select>
<div id="root"></div>

<script>
const { Timeline } = calendarjs;

const timeline = Timeline(document.getElementById('root'), {
    data: [
        { title: 'Event 1', date: '2025-01-01' },
        { title: 'Event 2', date: '2025-02-01' },
        { title: 'Event 3', date: '2025-03-01' }
    ]
});

document.getElementById('align').onchange = (e) => {
    timeline.align = e.target.value;
};

document.getElementById('order').onchange = (e) => {
    timeline.order = e.target.value;
};
</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: 'Event 1', date: '2025-01-01' },
        { title: 'Event 2', date: '2025-02-01' },
        { title: 'Event 3', date: '2025-03-01' }
    ];

    const changeAlign = (e) => {
        self.timeline.align = e.target.value;
    };

    const changeOrder = (e) => {
        self.timeline.order = e.target.value;
    };

    return render => render`<div>
        <select onchange="${changeAlign}">
            <option value="left">Left</option>
            <option value="right">Right</option>
        </select>
        <select onchange="${changeOrder}">
            <option value="asc">Ascending</option>
            <option value="desc">Descending</option>
        </select>
        <Timeline data="${self.data}" :ref="self.timeline" />
    </div>`;
}

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

export default function App() {
    const timelineRef = useRef();
    const data = [
        { title: 'Event 1', date: '2025-01-01' },
        { title: 'Event 2', date: '2025-02-01' },
        { title: 'Event 3', date: '2025-03-01' }
    ];

    return (
        <div>
            <select onChange={(e) => timelineRef.current.align = e.target.value}>
                <option value="left">Left</option>
                <option value="right">Right</option>
            </select>
            <select onChange={(e) => timelineRef.current.order = e.target.value}>
                <option value="asc">Ascending</option>
                <option value="desc">Descending</option>
            </select>
            <Timeline ref={timelineRef} data={data} />
        </div>
    );
}

<template>
    <div>
        <select @change="$refs.timelineRef.current.align = $event.target.value">
            <option value="left">Left</option>
            <option value="right">Right</option>
        </select>
        <select @change="$refs.timelineRef.current.order = $event.target.value">
            <option value="asc">Ascending</option>
            <option value="desc">Descending</option>
        </select>
        <Timeline ref="timelineRef" :data="data" />
    </div>
</template>

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

export default {
    components: { Timeline },
    data() {
        return {
            data: [
                { title: 'Event 1', date: '2025-01-01' },
                { title: 'Event 2', date: '2025-02-01' },
                { title: 'Event 3', date: '2025-03-01' }
            ]
        };
    }
}
</script>

Related

Edit this page on GitHub