• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

TimelineComponent

Represents the Kendo UI Timeline component for Angular.

Selector

kendo-timeline

Export Name

Accessible in templates as #kendoTimelineInstance="kendoTimeline"

Inputs

NameTypeDefaultDescription

alterMode

boolean

false

Specifies whether to render events alternatingly on both sides of the axis. Applicable when orientation is set to vertical.

animation

number | boolean

true

Specifies the time for sliding to the next event in horizontal mode and the time for collapsing the event in vertical mode. The default animation duration values are 300ms for horizontal mode and 400ms for vertical mode.

collapsibleEvents

boolean

true

Specifies whether the event cards can be collapsed.

dateFormat

string

'MMMM dd, yyyy'

Specifies the date format for displaying the event date.

eventHeight

number

600

Sets a specific height for the event. This setting is supported only in horizontal mode.

events

any[]

An array of event instances which will be shown by the Timeline.

eventWidth

number

400

Sets a specific width for the event. This setting is supported only in vertical mode.

modelFields

TimelineModelFields

The names of the model fields from which the Timeline will read its data.

navigable

boolean

true

Specifies whether the user can use dedicated shortcuts to interact with the Timeline.

orientation

Orientation

'vertical'

Specifies the orientation of the axis.

showDateLabels

boolean

true

Specifies whether an event's date label will be visible.

Events

NameTypeDescription

onActionClick

EventEmitter<number>

Fires when a card's action is clicked.

onNavigate

EventEmitter<NavigationDirection>

Fires when the left or right arrow is clicked. This event is supported only in horizontal mode.

onToggle

EventEmitter<number>

Fires when a card is toggled. This event is supported only in vertical mode.

Methods

collapse

Collapses an event. This method is supported only in vertical mode.

Parameters

index

number

expand

Expands an event. This method is supported only in vertical mode.

Parameters

index

number

next

Switches to the next portion of events. This method is supported only in horizontal mode.

open

Open event details. This method is supported only in horizontal mode.

Parameters

index

number

previous

Switches to the previous portion of events. This method is supported only in horizontal mode.