Dateline demo

Dateline is a jQuery UI 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 on an event displays more information or redirects you to another page.

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//unpkg.com/@sjaakp/dateline/js/jquery.dateline.js"></script>

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