Default settings for presented timeline

[nr007]

Hello, first of all thank you for all the hard work on the project.

I read all the GH pages, jqueryscripts.net and your blog article on ka2.org but i did not found anything about default configuration and how to get the timeline on screenshot. So i wonder if you could help me out.

Here is what i am talking about:

My timeline looks like this:

Here is the configuration for the li element:

<li data-timeline-node="{ start:'2019-02-18 10:00',end:'2019-02-18 13:00', row:1, bgColor: '#0BB9C6', content:'Event Here' }"> </li>

And for the timeline options:

 $("#myTimeline").Timeline({
        // options here
        rows: 6,
        startDatetime: 'currently',
        range: 12,
    });

So I am missing left content with row labels and header with months and years titles.

Thank you very much for the anwer! :)

[ka215]

Hi there,

The screenshot of demo you said is image for tutorial and debug I'm writing now. Therefore that is not published yet.

FYI, an example codes for that debug are as follows:

<div id="my-timeline">
  <ul class="timeline-events">
    <li>Deactive event pattern 1</li>
    <li data-timeline-node="">Deactive event pattern 2</li>
    <li data-timeline-node="{}">Deactive event pattern 3</li>
    <li data-timeline-node="{start:'2018-10-18 9:50',end:'2018-10-18 19:15',content:'The start point and the end point are out of range (before the time line range)'}">Out of range event</li>
    <li data-timeline-node="{eventId:'7',start:'2018-10-26 5:35',end:'2018-10-26 6:15'}"><label class="event-label">Label only</label></li>
    <li data-timeline-node="{eventId:0,start:'2018-10-26 9:50',end:'2018-10-26 18:50'}"><div class="event-content">Body only</div></li>
    <li data-timeline-node="{eventId:1,start:'2018-10-26 00:00:00',end:'2018-10-31 23:59:59',row:2,label:'Label in attribute',content:'Body in attribute',bgColor:'#CFC',color:'#33E'}">End point out of range</li>
    <li data-timeline-node="{eventId:4,start:'2018-10-25 12:00:00',end:'2018-10-26 22:59:59',row:3,bgColor:'#CCF',color:'#E3E'}"><p class="event-label">Label in child element</p><p class="event-content">Body in child element</p></li>
    <li data-timeline-node="{eventId:null,start:'2018-10-26 10:03:48',end:'2018-10-26 13:21:16',row:4,label:'Label in attribute',content:'Body in attribute',extend:'{toggle:\'popover\',placement:\'top\',trigger:\'hover\'}'}"><p class="event-label">Test of Bootstrap Popover</p><span class="event-label">"duplicated" label in child element</span><p class="event-content">The correspondence to the Bootstrap popover became a little easier</p><div class="event-content">"duplicated" body in child element</div></li>
    <li data-timeline-node="{start:'2018-10-01 00:00:00',end:'2018-10-24 23:59:59',row:4,extend:'{toggle:\'modal\',target:\'#myModal\'}'}"><h4 class="event-label">Test of Bootstrap Modal</h4><p class="event-content">Also the start point of this event is also outside the range</p></li>
    <li data-timeline-node="{start:'2018-11-01 00:00:00',end:'2018-11-9 23:59:59',row:5,callback:'$(\'#myModal\').modal()'}"><h4 class="event-label">Test of Bootstrap Modal 2</h4><p class="event-content">Also the start point of this event is also outside the range</p></li>
    <li data-timeline-node="{eventId:1,start:'2018-10-28 5:48',end:'2018-10-28 6:37',row:6,callback:'$(document).localFunction( event )'}"><div class="event-content">Start point out of range (after timeline range)</div></li>
    <li data-timeline-node="{start:'2018-10-15 13:05',end:'2018-11-2 16:27',row:7,image:'imgs/thumb_014.png',rangeMeta:'Individual meta'}"><div class="event-content">An event has image</div></li>
    <li data-timeline-node="{start:'0079-10-18 9:50',end:'0079-12-18 19:15',content:'sample'}">Test of zerofill years</li>
    <li data-timeline-node="{id:14,start:'2018-10-15 10:50',content:'Set size of \"large\"',size:'large',relation:{before:-1}}">Events set only at the start point</li>
    <li data-timeline-node="{id:15,start:'2018-10-17 13:45',row:2,content:'Set size of \"normal\"',size:'normal',relation:{before:16,curve:'lb'}}">An event for "pointer" - 1</li>
    <li data-timeline-node="{id:16,start:'2018-10-21 10:50',row:2,content:'Set size of \"small\"',size:'small',relation:{before:15,after:-1,lineSize:8,color:'red'}}">An event for "pointer" - 2</li>
    <li data-timeline-node="{id:17,start:'2018-10-23 3:45',row:3,content:'Set size of pixel value',size:4,bdColor:'blue',relation:{before:16,lineColor:'blue',size:1}}">An event for "pointer" - 3</li>
    <li data-timeline-node="{id:18,start:'2018-10-24 0:00',row:4,content:'No sizing',relation:{before:17,curve:'lb'}}">An event for "pointer" - 4</li>
  </ul>
</div>

let test_options = {
    type          : 'bar',
    startDatetime : '2018-10-14 0:00',
    scale         : 'day',
    minGridSize   : 24 * 2,
    showHeadline  : true,
    headline      : {
        display   : true,
        title     : 'jQuery Timeline Ver.2.0.0a3',
        range     : true,
    },
    footer        : {
        display   : true,
        content   : `<small>&copy; ka2.org ${new Date().getFullYear()}</small>`,
        range     : true,
        format    : { hour12: false, year: 'numeric', month: 'short', day: '2-digit' }
    },
    sidebar       : {
        sticky : true,
        list   : [ 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_002.png" class="rounded"></span> "Tony" Stark</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_003.png" class="rounded"></span> Steve Rogers</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_004.png" class="rounded"></span> Thor</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_005.png" class="rounded"></span> Hulk</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_006.png" class="rounded"></span> Natasha Romanoff</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_007.png" class="rounded"></span> Stephen Strange</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_008.png" class="rounded"></span> Peter Quill</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_013.png" class="rounded"></span> T\'Challa</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_001.png" class="rounded"></span> Peter Parker</a>', 
            '<a href="#"><span class="avatar-icon"><img src="imgs/thumb_015.png" class="rounded"></span> Wanda Maximoff</a>', 
        ]
    },
    ruler         : {
        top    : {
            lines      : [ 'year', 'month', 'day', 'weekday' ],
            height     : 26,
            fontSize   : 13,
            color      : '#777',
            background : '#FFF',
            format     : { timeZone: 'Asia/Tokyo', hour12: false, decade: 'ordinal', lustrum: 'ordinal', year: 'zerofill', month: 'long', weekday: 'short', hour: 'numeric', minute: 'numeric' },
        },
        bottom : {
            lines      : [ 'week', 'year' ],
        }
    },
    eventMeta       : {
        display     : true,
        scale       : 'hour',
    },
    zoom          : true,
    debug         : true
}

$('#my-timeline').Timeline( test_options )

I'm writing now full documentation for this plugin with tutorial. About detail of plugin options, please wait until will be published that documents.

Thank you,

[nr007]

@ka215 thank you very much for quick reply and useful informations. You are awesome 👍

I will make sure to follow your project! Cheers.