Dateline demo

Dateline is a widget for date-related data. You can create interactive datelines, which can be dragged by mouse, touch or keyboard, and display events. The movements of two or more datelines ('bands') are synchronized. Clicking or tapping on an event displays more information or redirects you to another page.


<div id="dl"></div>

<script src="//unpkg.com/@sjaakp/dateline/dist/dateline.js"></script>

<script>jQuery(function ($) {
    var q_dl = dateline('dl', {
        begin: "1900-01-01",
        end: "2024-04-25",
        cursor: "2007-02-01",
        bands:[
            {size: "60%", scale: Dateline.MONTH, interval: 60},
            {size: "24%", layout: "overview", scale: Dateline.YEAR, interval: 100},
            {size: "16%", layout: "overview", scale: Dateline.DECADE, interval: 40, multiple: 2}
        ],
        events:[
            {id: 2, start: "2008-01-01", text: "YII project started", description: "...", class: "..."},
            /* ... many more events ... */
        ]
    });
</script>