How does the dataDateField work?

[Ryan]

Attempting w/o success to leverage timeline against existing data. Having difficulty getting it to work..Below is the stock example on the site with the date property in the array changed to 'date1'.. Added the dataDateField; 'date1' to account for the change.  Also tried altering the schema in the datasource.. 

$("#timeline").kendoTimeline({
    dataSource: {
        data: [
        { "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" },
        { "id": 3, "title": "Alex's Birthday", "subtitle": "Location: Alex's House", "description": "Buy birthday cake and some fruits", "date1": "2010-01-09T22:00:00.000Z", "images": [{ "src": "https://demos.telerik.com/kendo-ui/content/web/foods/4.jpg" }, { "src": "https://demos.telerik.com/kendo-ui/content/web/foods/16.jpg" }] },
        { "id": 4, "title": "Vacation in Mexico", "subtitle": "Location: Cabo San Lucas", "description": "Check-in for the flight", "date1": "2017-12-24T22:00:00.000Z" }]
    },
    dataDateField: 'date1',
    orientation: "vertical"
});

[Mihaela]

Hi Ryan,

Thank you for sharing the screenshots.

Basically, the "dataDateField" option is used to let the Kendo UI Timeline which property should be used for building the timeline. It is mandatory to specify the data type of the field in the schema of the data source. 

Therefore, you should update the schema as follows:

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

Here is a runnable Dojo example for your reference:

https://dojo.telerik.com/aPETadob/2

Let me know if you have any other queries and I would be happy to assist.

 

Regards, Mihaela Lukanova Progress Telerik