Timeline

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.

Properties

General

Property	Datatype	Description
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).

Behavior

Property	Datatype	Description
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.

Appearance

Property	Datatype	Description
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)".