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.

Relation line (basic)

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>

Relation line (combo)

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>

Relation line (before + curve)

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>

Relation line (after + curve)