Kendo UI for jQuery Timeline Overview
The Kendo UI Timeline component displays a collection of events and their data in a chronological succession for each year.
You can scroll through the events and collapse/expand them. The events order can be vertical or horizontal, and you can customize their templates, as well as respond to events and use API control the component behavior. You can also control the format of the rendered date for the event. If you provide a list of actions, they will be rendered as links after the description and images.
The TimeLine is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The following image demonstrates a Timeline component.
Initializing the Timeline
To initialize the Timeline, use a blank <div> element and the kendoTimeline() method. In its arguments, provide a JSON literal with the options for the component and a data source that contains the information about the events.
Create the Timeline within a
$(document).ready()statement because the component has to be initialized after the DOM is fully loaded.
The following example demonstrates how to initialize the Timeline from a JSON data object. You can use a remote data source that will return the array of JSON literals instead of a local array of data. The date field in such a data source must be parsable by JavaScript (for example, yyyy-mm-dd or ISO 8601). The component data source is a Kendo DataSource component so you can use its features.
<div id="timeline"></div>
<script>
$(document).ready(function () {
$("#timeline").kendoTimeline({
orientation: "vertical", // Define the layout of the component.
alterMode: true, // Render the events on both sides of the axis in the vertical mode.
collapsibleEvents: true, // Start all collapsed events in the vertical mode.
dataSource: {
data: eventsData, // Defined later in this snippet.
schema: {
model: {
fields: {
date: {
type: "date"
},
}
}
}
}
});
});
// The literals in this example use the default field names the component takes.
var eventsData = [
{
description: "First event description.",
date: new Date(2015, 4, 15),
title: "Barcelona \u0026 Tenerife",
subtitle: "May 15, 2015",
images: [
{
src: "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&height=500"
}
],
actions: [
{
text: "More info about Barcelona",
url: "https://en.wikipedia.org/wiki/Barcelona"
}
]
},
{
description: "The second event description.",
date: new Date(2018, 1, 27),
title: "United States East Coast Tour",
subtitle: "Feb 27, 2018",
images: [
{
src: "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&height=500"
}
],
actions: [
{
text: "More info about New York City",
url: "https://en.wikipedia.org/wiki/New_York_City"
}
]
},
{
description: "Third event description.",
date: new Date(2015, 5, 25),
subtitle: "My second trip this year",
title: "Malta, a Country of Кnights",
images: [
{
src: "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Malta/Bibliotheca-National-Library_Marie-Lan-Nguyen.JPG?width=500&height=500"
}
],
actions: [
{
text: "More info about Malta",
url: "https://en.wikipedia.org/wiki/Malta"
}
]
}
];
</script>
Functionality and Features
Referencing Existing Instances
To refer to an existing Timeline instance, use the jQuery.data() method. Once a reference is established, use the Timeline API to control its behavior.
var timeLine = $("#timeline").data("kendoTimeline");
Events
For a complete example on the basic Timeline events, refer to the demo on using the events of the Timeline or to its API reference.