eventTemplate String|Function

Specifies the template used to render the event details.

Example

<script id="eventTemplate" type="text/x-kendo-template">
  <div class="k-card-header">
      <h5 class="k-card-title">#=data.title#</h5>
      <h6 class="k-card-subtitle">#=data.subtitle#</h6>
  </div>
  <div class="k-card-body">
      <div class="k-card-description">
      <p>#=data.description#</p>
      # var images = data.images;
      if(images && images.length > 0) { #
        <img src="#=images[0].src#" class="k-card-media">
        <img src="#=images[1].src#" class="k-card-media">
      # } #
      </div>
  </div>
</script>

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

<script>

$("#timeline").kendoTimeline({
    dataSource: {
        data:[ {"id":1,"title":"Bowling tournament","subtitle":"Location: Sterling Lanes","description":"Summer Bowling tournament in Michigan","date":"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","date":"2022-10-22T21:00:00.000Z"},
                {"id":3,"title":"Alex's Birthday","subtitle":"Location: Alex's House","description":"Buy birthday cake and some fruits","date":"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","date":"2017-12-24T22:00:00.000Z"}],
        schema: {
            model: {
            fields: {
                date: {
                type: "date"
                }
            }
            }
        }
    },
    eventTemplate: kendo.template($("#eventTemplate").html()),
    orientation: "horizontal"
});
</script>