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.
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). |
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. |
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)". |