Event Parameters

An event node has default preset of event parameters as below.

Parameter	Type	Default or Attribute	Description
uid	string	(undefined)	An unique id of event data, this can not define because this value is automatically generate as data for cache only.
eventId	number	nullable	It is an ID that identifies an event for you to manipulate event data via each method. If omitted, consecutive numbers are automatically assigned.
x	number	(undefined)	The horizontal axis coordinate of the event on the timeline container. This value can not be defined because it is automatically generated as cache-specific data.
y	number	(undefined)	The vertical axis coordinate of the event on the timeline container. This value can not be defined because it is automatically generated as cache-specific data.
width	number	(undefined)	The width of event node. This value can not be defined because it is automatically generated as cache-specific data.
height	number	(undefined)	The height of event node. This value can not be defined because it is automatically generated as cache-specific data.
start	string	(undefined)	This value can not be defined because it is automatically generated as cache-specific data.
end	string	(undefined)	This value can not be defined because it is automatically generated as cache-specific data.
row	number	(undefined)	This value can not be defined because it is automatically generated as cache-specific data.
bgColor	string	“#E7E7E7”	Background color of the event node’s element.
color	string	“#343A40”	Text color in the event node’s element.
bdColor	string	“#6C757D”	Border color of the event node’s element.
label	string	nullable	Label string shown on the event node’s element as it were title. If you mark up directly on html, you can wrap it in a child element with a class name of .event-label instead of attribute value.
content	string	nullable	Content of the event node. This is the event details displayed when you click event node. This allows strings containing HTML tags. If you mark up directly on html, you can wrap it in a child element with a class name of .event-content instead of attribute value.
image	string	nullable	You can specify the URL of the image file. The specified image is rendered as an img tag within the event node element.
margin	number	optional	Margin of text in the event node element.
rangeMeta	string	optional	This text override the “eventMeta” of plugin options.
size	number / string	“normal”	The diameter size of pointer when type of the timeline is “point”. Possible values are “large“, “normal“, “small” or number of pixel value.
extend	object	optional	The specified key/value pair is replaced with the “data-” attribute in the event node element.
remote	boolean	false	–
relation	object	(detail)	Setting for connecting between events by relation lines when type of the timeline is “point”. For more detail, refer to the relation line.
callback	function	optional	Callback processing that binds to openEvent method when this event is clicked.

For example:

<div id="myTimeline">
  <ul class="timeline-events">
    <li>invalid event</li>
    <li data-timeline-node="">invalid event</li>
    <li data-timeline-node="{}">invalid event</li>
    <li data-timeline-node="{eventId:1,start:'2019-3-26 00:00:00',end:'2019-12-31 23:59:59',label:'Label of attribute',content:'Content of attribute',bgColor:'#CFC',color:'#33E'}">End point out of range</li>
    <li data-timeline-node="{start:'2019-3-25 12:00:00',end:'2019-3-26 22:59:59',row:2,bgColor:'#CCF',color:'#E3E'}"><p class="event-label">Label of child element</p><p class="event-content">Content of child element</p></li>
  </ul>
</div>

Note: Event definitions with no data-timeline-node attribute or with attribute values ​​empty are ignored as they are not recognized as valid timeline object events.

Note: Although event ID can be omitted with optional parameters, we recommend assigning an explicit unique ID in advance if you want to manipulate events with various methods.

Relation Line

When type of the timeline is point, each event can be concatenated by lines. How to set the connection lines, basically use the “relation” parameter at each event node and specify the event ID before and after connecting to the event. Also you can specify straight or curve as line type. Since plugin version 2, the curve line settings is becoming easy.
The setting values that can be specified by the relation parameter are as below.

Property	Type	Description
before	number	If set target event ID, it is connected the relation line to the event node placed on chronological before (leftward on the timeline) from oneself event node. By specifying -1, you can draw a line from outside the timeline container (the left edge of the display area).
after	number	If set target event ID, it is connected the relation line to the event node placed on chronological after (rightward on the timeline) from oneself event node. By specifying -1, you can draw a line to outside the timeline container (the right edge of the display area).
linesize	number	Specify pixel value as thickness of relation line.
linecolor	string	Color of relation line.
curve	number / string / boolean	Whether the connection line will be curved if the connection events are not on the same horizontal. If you specify true at boolean value or a shorthand (0 or 1 only), it will be automatically curved. As with the previous version, it is also possible to specify the type of curve using defined preset values.

Basically, the relation line specifies the event ID of the connection destination from the event side to be connected. In that case, the property you specify depends on whether the event to be connected is chronologically “before” or “after” for the event you want to concatenate.

An example of connecting from a subsequent event to a previous event is below.

<ul class="timeline-events">
  <li data-timeline-node="{id:1,start:'2019-3-12 12:00',row:3}"></li>
  <li data-timeline-node="{id:2,start:'2019-3-15 12:00',row:3,relation:{before:1}}"></li>
</ul>

An example of the connection from the previous event to the following event is as follows.

<ul class="timeline-events">
  <li data-timeline-node="{id:1,start:'2019-3-12 12:00',row:3,relation:{after:2}}"></li>
  <li data-timeline-node="{id:2,start:'2019-3-15 12:00',row:3}"></li>
</ul>

In both cases the same connection line is connected.

It is also possible to connect the connection line by specifying the events before and after one specific event.

<ul class="timeline-events">
  <li data-timeline-node="{id:1,start:'2019-3-11 12:00',row:3}"></li>
  <li data-timeline-node="{id:2,start:'2019-3-13 12:00',row:3,relation:{before:1,after:3}}"></li>
  <li data-timeline-node="{id:3,start:'2019-3-16 12:00',row:3}"></li>
</ul>

Curve line

You can curve the linearity of the connection line by using curve parameter when connecting different horizontal (rows) events.
Since plugin version 2, the relation line is automatically applied to the optimal curve by simple boolean to whether or not to curve.

Before + Curve

In the “before + curve” pattern, a connecting line is drawn from the left side of an origin event.

<ul class="timeline-events">
  <li data-timeline-node="{id:1,start:'2019-3-11 12:00',row:2}"></li>
  <li data-timeline-node="{id:2,start:'2019-3-13 12:00',row:3,relation:{before:1,curve:true}}"></li>
</ul>

After + Curve

In the “after + curve” pattern, a connecting line is drawn from the right side of an origin event.

<ul class="timeline-events">
  <li data-timeline-node="{id:1,start:'2019-3-11 12:00',row:2,relation:{after:2,curve:1}}"></li>
  <li data-timeline-node="{id:2,start:'2019-3-13 12:00',row:3}"></li>
</ul>