> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/global-widgets/timeline.md).
# 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)". |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.wem.io/platform/wemtipsandtricks/widgets/global-widgets/timeline.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.