Methods

To the initialized Timeline object, you can do various operations by using methods. It is also possible to execute multiple methods at one time by chaining each method.

$("#myTimeline").timeline({
  type  : "bar",
  startDatetime: "2019-03-05",
  scale: "hour",
  rows: 3,
}).timeline("initialized", function( self, data ){ 
  console.log([ "user's callback", self, data ])
})

In version 2 of the plugin, consolidation of public methods was done. Then the following methods “getOptions”, “render” that was available in version 1.x has been deprecated. Also, “dateback” and
“dateforth” methods have been available since version 2.0.0 beta 1.

addEvent

This is the method to add new events to the timeline object rendered.

Param Name Type Attribute Description
eventdata array<object> required Need to define as an array the events that you want to add to timeline object.
callback function nullable Define as a custom callback that fire after calling this method. You can refer the DOM element of timeline object, the current plugin options, and the custom user data as function arguments.
userdata mixed nullable You can define a custom object as data of referable in the callback function. You can define custom user data that can be referenced in the callback function. In this user data, all data including the third argument is wrapped in one array.

For example:

$('#myTimeline').Timeline('addEvent', [
        {id:21,start:'2018-11-16 00:00',end:'2018-11-20 02:00',row:2,label:'Add Event',content:'test test test...'},
        {id:22,start:'2018-11-18 12:00',end:'2018-11-22 12:00',row:3,label:'Add Event 2',content:'test2 test2 test2...'}
    ],
    function( elm, opts, usrdata ){
        console.log( usrdata[0] ) // show "Added Events!" in console
    },
    'Added Events!'
)

alignment

This is the method to move the display position of the timeline container to the specified position.

Param Name Type Attribute Description
position string nullable The preset string of position on timeline you want to align. Allowed values are “left” or “begin“, “center“, “right” or “end“, “latest“, “current” or “currently” and number of specific event id.
duration number / string nullable The duration of alignment animation. Allowed values are “fast“, “normal“, “slow” or number of milliseconds. Defaults to “normal”.

For example:

$('#myTimeline').Timeline('alignment', 'begin')

dateback

Move shift or expand the range of timeline container as to past direction (to left). This method added since version 2.0.0b1.

Param Name Type Attribute Description
options object nullable Specify the movement amount and behavior type when moving or expanding. Allowed properties are “scale”, “range” and “shift”. If the “shift” is true, both start and end DateTime of the timeline container will move the amount of specified “range” and specified “scale”. On the other hand, the start DateTime only will move and will be expanded the timeline container if the “shift” is false.
callback function nullable Define as a custom callback that fire after calling this method. You can refer the DOM element of timeline object, the current plugin options, and the custom user data as function arguments.
userdata mixed nullable You can define a custom object as data of referable in the callback function. You can define custom user data that can be referenced in the callback function. In this user data, all data including the third argument is wrapped in one array.

For example:

$('#myTimeline').Timeline('dateback', {
  scale: "day",
  range: 5,
  shift: true
})

dateforth

Move shift or expand the range of timeline container as to futrue direction (to right). This method added since version 2.0.0b1.

Param Name Type Attribute Description
options object nullable Specify the movement amount and behavior type when moving or expanding. Allowed properties are “scale”, “range” and “shift”. If the “shift” is true, both start and end DateTime of the timeline container will move the amount of specified “range” and specified “scale”. On the other hand, the end DateTime only will move and will be expanded the timeline container if the “shift” is false.
callback function nullable Define as a custom callback that fire after calling this method. You can refer the DOM element of timeline object, the current plugin options, and the custom user data as function arguments.
userdata mixed nullable You can define a custom object as data of referable in the callback function. You can define custom user data that can be referenced in the callback function. In this user data, all data including the third argument is wrapped in one array.

For example:

$('#myTimeline').Timeline('dateforth', {
  scale: "hour",
  range: 12,
  shift: false
})

destroy

Destroy the object to which the plugin is applied.

$('#myTimeline').Timeline('destroy')

hide

To hide the timeline object that is shown.

$('#myTimeline').Timeline('hide')

initialized

This method is able to call only once after completed an initializing of the plugin.

Param Name Type Attribute Description
callback function nullable Define as a custom callback that fire after calling this method. You can refer the DOM element of timeline object, the current plugin options, and the custom user data as function arguments.
userdata mixed nullable You can define a custom object as data of referable in the callback function. You can define custom user data that can be referenced in the callback function. In this user data, all data including the third argument is wrapped in one array.

For example:

$("#myTimeline").timeline('initialized', (elm,opts,usrdata) => {
    console.log( usrdata[0].msg ) // show "Callback after initialize!" in console
}, {msg:'Callback after initialize!'})

openEvent

The internal method that fires when an event on the timeline is clicked. You can hook the custom processing with the callback specified in the event parameter.

reload

This is a method to reload the timeline with overridable any options. This method was added since version 2 instead of a render method.

Param Name Type Attribute Description
options object nullable Object of optional setting to be overridden.
callback function nullable Define as a custom callback that fire after calling this method. You can refer the DOM element of timeline object, the current plugin options, and the custom user data as function arguments.
userdata mixed nullable You can define a custom object as data of referable in the callback function. You can define custom user data that can be referenced in the callback function. In this user data, all data including the third argument is wrapped in one array.

For example:

let new_options = {
        type  : "point"
    }

$("#myTimeline").timeline('reload', new_options, (elm,opts,usrdata) => {
    console.log( usrdata[0].msg ) // show "Changed Timeline Type!" in console
}, {msg:'Changed Timeline Type!'})

removeEvent

This is the method to remove specific events from the current timeline object.

Param Name Type Attribute Description
condition array<string> required Specify the condition for finding the event to be removed. Multiple conditions can be specified as elements of an array. When multiple conditions are specified, each condition is retrieved as “OR” condition. Allowed values as condition format are number for matching to event id, DateTime string for matching to date time or date range and regex for matching to event parameters.
callback function nullable Define as a custom callback that fire after calling this method. You can refer the DOM element of timeline object, the current plugin options, and the custom user data as function arguments.
userdata mixed nullable You can define a custom object as data of referable in the callback function. You can define custom user data that can be referenced in the callback function. In this user data, all data including the third argument is wrapped in one array.

For example:

$("#myTimeline").timeline('removeEvent', [
        '1', // remove event that id = 1
        '2019/03/03', // remove events that placed on 2019/03/03
        '2019/02/01 0:00,2019/02/28 23:59:59', // remove all events between 2019/02/01 and 2019/02/28
        'Lorem ipsum' // remove events that has string of "Lorem ipsum" in event parameters
    ], (elm,opts,usrdata) => {
        console.log( usrdata[0].msg ) // show "Removed specified events!" in console
    }, {msg:'Removed specified events!'}
)

show

To show the timeline object that is hidden.

$('#myTimeline').Timeline('show')

showLoader

To show loader content.

$('#myTimeline').Timeline('showLoader')

updateEvent

This is the method to update specific events on the current timeline object.

Param Name Type Attribute Description
eventdata array<object> required Need to define as an array the events that you want to add to timeline object. Need to define as an array the events that you want to update on the timeline object. The target event for updating must be matching event id on the timeline already placed.
callback function nullable Define as a custom callback that fire after calling this method. You can refer the DOM element of timeline object, the current plugin options, and the custom user data as function arguments.
userdata mixed nullable You can define a custom object as data of referable in the callback function. You can define custom user data that can be referenced in the callback function. In this user data, all data including the third argument is wrapped in one array.

For example:

$("#myTimeline").timeline('updateEvent', [
        {id:2,start:'2019-03-05 12:00',end:'2019-03-06 12:00',row:3,label:'Update Event',content:'update test...'}
    ], (elm,opts,usrdata) => {
        console.log( usrdata[0].msg ) // show "Updated event of id:2" in console
    }, {msg:'Updated event of id:2'}
)

zoomScale

This is an internal method to zoom in a scale of the timeline that fires when any scales on the ruler is double-clicked.
In the current version, it is not possible for the user to interrupt this method.