search

ka215 / jquery.timeline

You can easily create the horizontal timeline with two types by using this jQuery plugin.
MIT License
240 stars 43 forks source link

Full documentation #27

Closed AntonFix closed 4 years ago

AntonFix commented 5 years ago

Please, update documentation for version 2.0.

How to use it?

Tnx

ka215 commented 5 years ago

I'm sorry.

Currently I am preparing the manual for version 2.x. Please wait for a while.

By the way, an example of how to call plugin is as follows:

var options = {
    type          : 'bar',
    startDatetime : '2018-10-14 0:00',
    scale         : 'day',
    headline      : {
        display   : true,
        title     : 'jQuery Timeline Ver.2.0.0a2',
        range     : true,
        locale    : 'ja-JP-u-ca-japanese',
        format    : { timeZone: 'Asia/Tokyo', hour12: false, era: 'long', year: 'numeric', month: 'numeric', day: 'numeric' }
    },
    footer        : {
        display   : true,
        content   : '<small>&copy; ka2.org '+ new Date().getFullYear() +'</small>',
        range     : true,
        locale    : 'ja-JP-u-ca-iso8601',
        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',
            locale     : 'ja-JP',
            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,
};

$('#my-timeline').Timeline( options );

Thank you,

SirYmp commented 5 years ago

Just to say I'm looking forward to getting the documentation on the new version. It looks promising, and thus I'm quite interested in updating my solution!

ka215 commented 4 years ago

This issue has already been resolved.