Kendo Chart

Date formats

by amrutaJgtp

HTML

<link rel="stylesheet" href="kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.min.css">
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
<div id="wrap" style="padding:20px;">
  <div id="chart"></div>
</div>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />

CSS

#wrap {
  margin: 50px;
}

JavaScript

$(document).ready(function() {
  var values = [{
    id: 1,
    title: "Task1",
    start: kendo.toString(new Date(2014, 5, 20), "y"),
    end: kendo.toString(new Date(2016, 5, 22), "y")
  }, {
    id: 2,
    title: "Task2",
    start:kendo.toString(new Date(2015, 5, 19), "y"),
    end: kendo.toString(new Date(2015, 5, 20), "y")
  }, {
    id: 3,
    title: "Task3",
    start:  kendo.toString(new Date(2015, 5, 21), "y"),
    end:  kendo.toString(new Date(2017, 5, 21), "y")
  }, {
    id: 4,
    title: "Task4",
    start: kendo.toString(new Date(2014, 5, 20), "y"),
    end: kendo.toString(new Date(2016, 5, 23), "y")
  }];

  $("#chart").kendoGantt({
    dataSource: {
      data: values
    },

    views: [{
      type: "day",
      selected: true,
    }],

    columns: [{
      field: "title",
      title: "Title"
    }, {
      field: "start",
      title: "Start date",
      format: "{0: MMMM yy  }"
    }, {
      field: "end",
      title: "End date",
      format: "{0: MMM yy  }"
    }],
    resizable: true,
    editable: false,
    tooltip: {
      visibility: false
    }
  });

});