| startDatetime | String | currently | Default set datetime as viewing timetable; format is `"^[-+]d{4}(/\|-)d{2}(/\|-)d{2}\sd{2}:d{2}:d{2}$"` or "**currently**" |
| startDatetime | String | currently | Default set datetime as viewing timetable; format is `"^[-+]d{4}(/\|-)d{2}(/\|-)d{2}\sd{2}:d{2}:d{2}$"` or "**currently**" |
| datetimePrefix | String | | The prefix of the date and time notation displayed in the headline |
| datetimePrefix | String | | The prefix of the date and time notation displayed in the headline |
| datetimeFormat | Object | `{full:"Y/m/d", year:"Y", month:"n", day:"n/j"}` | Available formats are here: [fn.date.js](https://gist.github.com/ka215/20cbab58e4f7d4e5508a07cff8d64b00) |
| datetimeFormat | Object | `{full:"j M Y", year:"Y", month:"M", day:"D, j M", years:"Y", months:"F", days:"j"}` | Available formats are here: [fn.date.js](https://gist.github.com/ka215/20cbab58e4f7d4e5508a07cff8d64b00) |
| minuteInterval | Integer | 30 | Recommend more than 5 minutes; only if top scale is "days" (Deprecated) |
| minuteInterval | Integer | 30 | Recommend more than 5 minutes; only if top scale is "days" (Deprecated) |
| zerofillYear | Boolean | false | It's outputted at the "0099" if true, the "99" if false |
| zerofillYear | Boolean | false | It's outputted at the "0099" if true, the "99" if false |
| range | Integer | 3 | The default view range of the timetable starting from the "startDatetime" |
| range | Integer | 3 | The default view range of the timetable starting from the "startDatetime" |
...
@@ -84,7 +86,7 @@ $("#myTimeline").timeline({
...
@@ -84,7 +86,7 @@ $("#myTimeline").timeline({
| rangeAlign | String | current | Possible values are "**left**", "**center**", "**right**", "**current**", "**latest**" and **specific event id**
| rangeAlign | String | current | Possible values are "**left**", "**center**", "**right**", "**current**", "**latest**" and **specific event id**
| naviIcon | Object | `{left:"jqtl-circle-left", right:"jqtl-circle-right"}` | Define class name |
| naviIcon | Object | `{left:"jqtl-circle-left", right:"jqtl-circle-right"}` | Define class name |
| showPointer | Boolean | true | Whether to display needle pointer on the current datetime |
| showPointer | Boolean | true | Whether to display needle pointer on the current datetime |
| i18n | Object | (omission) | Define translated text for internationalization of datetime format converted by datetime format |
| i18n | Object | (omission) | Define translated text for internationalization of datetime format converted by datetime format. For details, refer to the section on [Internationalization](#Internationalization). |
| addEvent | Add any events to the timeline. You can also specify a callback function after adding an event. | Array, Callback Function (optional) | `$.timeline('addEvent', [ {start:'2017-6-1 00:00',end:'2017-6-1 02:00',row:2,label:'Add Event',content:'test'} ], function( self, data ){ alert('Added Event!'); });` |
| addEvent | Add any events to the timeline. You can also specify a callback function after adding an event. | Array, Callback Function (optional) | `$.timeline('addEvent', [ {start:'2017-6-1 00:00',end:'2017-6-1 02:00',row:2,label:'Add Event',content:'test'} ], function( self, data ){ alert('Added Event!'); });` |
| removeEvent | Removes the specified event from the timeline. To specify the event, use the event ID. | Array, Callback Function (optional) | `$.timeline('removeEvent', [ 6, 7 ]);`
| removeEvent | Removes the specified event from the timeline. To specify the event, use the event ID. | Array, Callback Function (optional) | `$.timeline('removeEvent', [ 6, 7 ]);`
| updateEvent | Updates the contents of the specified event. It is possible to update multiple events simultaneously. | Array, Callback Function (optional) | `$.timeline('updateEvent', [ {eventId:3, start:'2017-5-29 13:00',end:'2017-5-29 15:30', row:1, label:'Updated Event', bgColor:'#aaaab0', color:'#d70035'} ]);` |
| updateEvent | Updates the contents of the specified event. It is possible to update multiple events simultaneously. | Array, Callback Function (optional) | `$.timeline('updateEvent', [ {eventId:3, start:'2017-5-29 13:00',end:'2017-5-29 15:30', row:1, label:'Updated Event', bgColor:'#aaaab0', color:'#d70035'} ]);` |
| openEvent | Called back when an event is clicked. | object | |
| openEvent | Called back when an event is clicked. | (object) | Unlike other methods, the processing specified by the event parameter callback ([to be described later](#Event Parameters)) is invoked. |
## Event Parameters
Events placed on the timeline have parameters for display. You can specify this event parameter either by directly marking up in HTML or by using a method.
### Directly markup on HTML
```html:
<div class="timeline-events">
<div>This event is ignored because it is an invalid event</div>
<div data-timeline-node="{ start:'2017-01-01 00:00',end:'2017-01-01 13:00',content:'Fill in the text of the event.' }">This is a valid event</div>
<div data-timeline-node="{ start:'2017-01-01 00:00',end:'2017-01-01 13:00',content:'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...' }">Lorem Ipsum</div>
</div>
```
> **Note**: Event lists that do not have a "data-timeline-node" attribute are ignored when initializing timeline objects and are not placed on the timeline.
| Parameter | Type | Timeline Type | Description |
|------------|---------|-----------------|-----|
| eventId | Integer | bar/point | It must be an integer value equal to or greater than 1 and it must be a unique value in the event list. It can be omitted as a parameter, and if omitted, it will be automatically issued at plugin initialization. |
| start | String | bar/point | Event start datetime. Specify it like `2017-1-1 0:00` or `2017/01/02 01:23` |
| end | String | bar | Event end datetime. Ignored if the timeline type is point. The usable format is the same as start. |
| row | Integer | bar/point | The display line (vertical position) on the timeline. An integer value of 1 or more. If not specified, this will be the first line (top row) event. |
| label | String | bar/point | Event title. When marking up with HTML, the text part of the event list tag is used as a label. |
| content | String | bar/point | Event body. If there is an event detail display area, it will be displayed there. |
| bgColor | String | bar/point | The background color of the event node block displayed on the timeline. |
| color | String | bar/point | The text color of the event node block displayed on the timeline. |
| bdColor | String | point | Valid when the timeline type is point. The border color of the event node block displayed on the timeline. |
| image | String | point | Valid only when the timeline type is point. It is a thumbnail image of the event node block displayed on the timeline. |
| margin | Integer | point | Valid only when the timeline type is point. The margin of the event node block. The initial value is 2 pixels, and by increasing the value you can reduce the size of the event node block. It can be specified less than half the width of the optional rowHeight. |
| extend | Object | bar/point | An arbitrary value can be set in the key and value format as the user extension parameter of the event node block. This parameter value can be referred to in a callback event. |
| callback | JavaScript | bar/point | You can define additional processing when an event is clicked. The processing defined here is treated after the "**openEvent**" method. |
| relation | Object | point | Valid only when the timeline type is point. If there is an event connected to itself before and after the event, its event and its own event are connected by a line by defining a concatenated event. |
### Event Relation Line
When the timeline type is point, each event can be concatenated with a line. To set the connection line, use the "**relation**" parameter at each event and specify the event ID before and after connecting to the event.
The setting values that can be specified by the relation parameter are as follows.
| Property | Type | Value | Description |
|------------|-------|----|-----|
| before | Numeric | eventId | Specify the event ID to be concatenated before (left side) its own event. By specifying `-1`, you can draw a line from outside the timeline area (the left edge of the display area). |
| after | Numeric | eventId | Specify the event ID to be concatenated after (right side) its own event. By specifying `-1`, you can draw a line outside the timeline area (the right end of the display area). |
| linesize | Integer | pixels | Specify the thickness of the connection line. |
| linecolor | String | color code | Specify the color of the connection line. |
| curve | String | Any of `lt`,`rt`,`rb`,`lb` | Line can be curved when connecting to events of a line different from own event. Specify the curved direction at that time. For example, to concatenate to the upper left event specified by before, specify `rb`. |
#### Example of lines
##### Basic
When linking from itself (event ID: 2) to past event (event ID: 1):
This plugin has a function to internationalize the date and time format text to be output and to define translated text according to the language to be used. When using this function, please add the following option when initializing the timeline object.
Set the callback of the event parameter to the call of the modal window.
```html:
<div id="myTimeline">
<div class="timeline-events">
<div data-timeline-node="{ start:'2017-05-26 12:45',end:'2017-05-26 13:45',callback:'$(\'#myModal\').modal()',content:'Show modal window via bootstrap' }">Event having callback</div>
</div>
</div>
```
When an event on the timeline is clicked, event details will be displayed in the modal window.
### 2. Apply bootstrap tooltip to events on timeline
You will define options for tooltip control in the extended setting of event parameters.
```html:
<div id="myTimeline">
<ul class="timeline-events">
<li data-timeline-node="{ start:'2017-05-26 16:08',end:'2017-05-26 17:54',row:2,extend:{toggle:'popover',placement:'bottom',content:'Show popover via bootstrap'} }">Event with popover</li>
</ul>
</div>
```
Make the tooltip bind to the event node block rendered in JavaScript.
```js:
$('.timeline-node').each(function(){
if ( $(this).data('toggle') === 'popover' ) {
$(this).attr( 'title', $(this).text() );
$(this).popover({
trigger: 'hover'
});
}
});
```
Now when you mouse over the event on the timeline you will see the tooltip.[^bootstrapTooltip]
[^bootstrapTooltip]:In Bootstrap version 4.x, errors may occur when tooltips are used. In that case, it may be solved by inclusion of the [tether](http://tether.io/) plugin.
