New to Kendo UI for jQuery? Start a free 30-day trial

DataDateField

configuration

Sets the field of the data item that provides information when the given event happened in time.

The value for this field should be either JavaScript Date object or serialized date.

dataDateField

String

Default: "date"

<div id="timeline"></div>

<script>
  $(document).ready(function () {
    var dataArray = [
      { "id": 1, "title": "Bowling tournament",
       "subtitle": "Location: Sterling Lanes",
       "description": "Summer Bowling tournament in Michigan",
       "date1": "2025-06-30T21:00:00.000Z",
       "actions": [{ "text": "Visit the Bowling tournament page" }] },
      { "id": 2,
       "title": "Charlie's first football game",
       "subtitle": "Location: City Football Stadium",
       "description": "Call coach Williams",
       "date1": "2022-10-22T21:00:00.000Z" }
    ];

    $("#timeline").kendoTimeline({
      dataSource: {
        data: dataArray,
        schema: {
          model: {
            fields: {
              date1: {
                type: "date"
              }
            }
          }
        }
      },
      dataDateField:"date1",
      orientation: "vertical"
    });
  });
</script>