Timeline
Last updated
Last updated
This widget shows a Timeline based on a list of Events. Events can be customized with bootstrap contexts and different background-, border- and text-colors.
Data source
list, Data Item
The source list containing all timeline data. The example above provides a list of events.
Start date
Date, Expression
The start date of the event. When events overlap each other, they will be stacked automatically.
End date
Date, Expression
The end date of the event. The end date is optional. If the end date is provided, the event is displayed as a range. Otherwise the event is displayed as a box (like Event B in the example above).
Text
Text, Expression
The text-content of the event. This can be plain text or html code. The example above shows Event C bold and italic.
Group
Text, Expression
When a group value is provided, all events with the same group are placed on one line. A vertical axis is displayed showing all groups. Grouping events can be useful for example when showing availability of multiple people, rooms, or other resources next to each other.
Image
File, Expression
Add an image below the text-content of the event.
Image size
number
Limits the width of the provided image in pixels. Resizes the image, but keeps its aspect ratio. The default value of this property is 32 (pixels).
Output selected
Reference, data field
A data field to (temporarily) store a reference to the selected or changed event. This reference can be used to change or delete the event.
On double click
Dropdown
When the user double clicks an event, the following actions can be performed: do nothing, execute flowchart or follow button exit.
Editable
Boolean
Allow the user to add or change events. By default set to false.
Add exit
Button exit
When 'editable' is true, you can provide a button exit which will be used for each 'add-event' in the timeline (double click empty area).
Change exit
Button exit
When 'editable' is true, you can provide a button exit which will be used for each 'edit-event' in the timeline (changing start / end date).
Output start date
Date, data field
A data field to (temporarily) store the start date of an edited event. When 'editable' is true, the user is allowed to change the start date. After changing the start date the provided 'Change exit' will be followed. Due to a bug in widgets you are required to provide a data field, even when 'editable' is false.
Output end date
Date, datafield
A data field to (temporarily) store the end date of an edited event. When 'editable' is true, the user is allowed to change the end date. After changing the end date the provided 'Change exit' will be followed. Due to a bug in widgets you are required to provide a data field, even when 'editable' is false.
Width
Text
Changes the width of the timeline using either a percentage or pixel value. For example: "80%" or "500px". By default this value is "100%".
Animated
Boolean
When true, events are moved animated when resizing or moving them. Requires more computational power.
Animated zoom
Boolean
When true, events are moved animated when zooming the Timeline. Requires more computational power.
Show axis on top
Boolean
By default this property is set to false, the horizontal axis is drawn at the bottom. If true, the axis is drawn on top.Sets the start value of the visible date range (zoom level). The user can scroll to zoom in or out (showing a smaller or larger date range).
Initial start range
Date, Expression
Sets the end value of the visible date range (zoom level). The user can scroll to zoom in or out (showing a smaller or larger date range).
Initial end range
Date Expression
Allowed values: "success", "warning", "danger", "info", "default", "primary". Other values will be ignored.
Event bootstrap context
Text, Expression
Allowed values: "success", "warning", "danger", "info", "default", "primary". Other values will be ignored.
Event background color
Text, Expression
Change the background color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
Event border color
Text, Expression
Change the border color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
Event text color
Text, Expression
Change the text color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
