Timeline

This component is used to display a list of events in chronological order. It can be used to display a list of events in a timeline format. It can be used with one2many fields

<field name="events" widget="timeline"
    widget_props="{'titleField': 'date', 'summaryField': 'description'}" />

• 2024-01-02
  Event 1
• 2024-01-03
  Event 2
• 2024-01-04
  Event 3
• 2024-01-05
  Event 4

Working with colors and icons

v2.30.0

You can also use the colorField and iconField properties to display the events with different colors and icons.

The value of the colorField in the model can be:

• A valid Ant Design color name
• A valid CSS color name
• A valid CSS color code
• A string and then the color will be generated using the string as a seed

The value of the iconField in the model must be a string with the name of the icon to use.

See Icons for more information.

<field name="events" widget="timeline"
    widget_props="{'titleField': 'date', 'summaryField': 'description', 'colorField': 'color', 'iconField': 'icon'}" />

• 2024-01-02
  Event 1
• 2024-01-03
  Event 2
• 2024-01-04
  Event 3
• 2024-01-05
  Event 4

API

Property	Description	Type	Default	Version
widget_props	Props for the widget. See Widget props		-	-

Widget Props

Property	Description	Type	Default	Version
titleField	Field to be used as the title of the event	string	-	-
summaryField	Field to be used as the summary of the event	string	-	-
colorField	Field to be used as the color of the event	string	-	v2.30.0
iconField	Field to be used as the icon of the event	string	-	v2.30.0