Asp.net mvc 剑道甘特时间线以30分钟为增量？

我将剑道甘特图与ASP.NET Core MVC结合使用，我希望日视图时间线以30分钟为增量显示，而不是以1小时为增量显示。我每天试图显示的工作时间是早上7:00到下午3:30，但我无法显示一天结束时的下午3:30

使用jquery剑道甘特图

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/17 11:00")
  }],
  views: [
    { type: "day", timeHeaderTemplate: kendo.template("#=kendo.toString(start, 'T')#") },
    { type: "week" },
    { type: "month" }
  ]
});
</script>

$（“#甘特”）。肯多甘特({
数据源：[{
id:1，
医嘱ID:0，
parentId:null，
标题：“任务1”，
开始日期：新日期（“2014/6/17 9:00”），
结束：新日期（“2014/6/17 11:00”）
}],
观点：[
{键入：“day”，timeHeaderTemplate:kendo.template（“#=kendo.toString（start，'T'）#”），
{type:“week”}，
{type:“month”}
]
});

---

但是，我不知道如何让模板显示30分钟的增量，或者是否有其他方法来实现这一点。本质上，我希望它看起来像这里所示：

我用Telerik打开了一个支持票证，得到了一个答案，虽然没有内置的方法来使用甘特图组件实现这一点，但实现的一种方法是创建一个自定义视图，如下所示：

自定义视图示例代码：

    <div id="gantt"></div>
    <script type="text/javascript">
      var gantt;
      $(function StartingPoint() {

        kendo.ui.GanttCustomView = kendo.ui.GanttView.extend({
          name: "custom",

          options: {
            yearHeaderTemplate: kendo.template("#=kendo.toString(start, 'yyyy')#"),
            quarterHeaderTemplate: kendo.template("# return ['Q1', 'Q2', 'Q3', 'Q4'][start.getMonth() / 3] #"),
            monthHeaderTemplate: kendo.template("#=kendo.toString(start, 'MMM')#")
          },

          range: function(range) {
            this.start = new Date("01/01/2013");
            this.end = new Date("01/01/2016");
          },

          _generateSlots: function(incrementCallback, span) {
            var slots = [];
            var slotStart = new Date(this.start);
            var slotEnd;

            while (slotStart < this.end) {
              slotEnd = new Date(slotStart);
              incrementCallback(slotEnd);

              slots.push({ start: slotStart, end: slotEnd, span: span });

              slotStart = slotEnd;
            }

            return slots;
          },

          _createSlots: function() {
            var slots = [];

            slots.push(this._generateSlots(function(date) { date.setFullYear(date.getFullYear() + 1); }, 12));
            slots.push(this._generateSlots(function(date) { date.setMonth(date.getMonth() + 3); }, 3));
            slots.push(this._generateSlots(function(date) { date.setMonth(date.getMonth() + 1); }, 1));

            return slots;
          },

          _layout: function() {
            var rows = [];
            var options = this.options;

            rows.push(this._slotHeaders(this._slots[0], kendo.template(options.yearHeaderTemplate)));
            rows.push(this._slotHeaders(this._slots[1], kendo.template(options.quarterHeaderTemplate)));
            rows.push(this._slotHeaders(this._slots[2], kendo.template(options.monthHeaderTemplate)));

            return rows;
          }
        });

        gantt = new kendo.ui.Gantt($("#gantt"),
                                   $.extend({
          columns: [
            { field: "id", title: "ID", sortable: true, editable: false, width: 30 },
            { field: "title", title: "Title", sortable: true, editable: true, width: 100 },
            { field: "start", title: "Start Time", sortable: true, editable: true, format: "{0:MM/dd/yyyy HH:mm}", width: 100 },
            { field: "end", title: "End Time", sortable: true, editable: true, format: "{0:MM/dd/yyyy HH:mm}", width: 100 }
          ],
          views: [
            "week",
            { type: "kendo.ui.GanttCustomView", title: "Quaterly", selected: true }
          ],
          listWidth: 500,
          dataBound: function() {
            var height = this.timeline.view().header.height();
                        this.list.thead.find('tr').css('height',height);
          },
          dataSource: {
            data: [{ id: 1, parentId: null, percentComplete: 0.2, orderId: 0, title: "foo", start: new Date("05/05/2014 09:00"), end: new Date("06/06/2014 10:00") },
                   { id: 2, parentId: null, percentComplete: 0.4, orderId: 1, title: "bar", start: new Date("07/06/2014 12:00"), end: new Date("08/07/2014 13:00") }]
          },
          dependencies: {
            data: [
              { id: 1, predecessorId: 1, successorId: 2, type: 1 }
            ]
          }
        }, {})
            );
    });
    </script>

var-gantt；
$（函数起始点（）{
kendo.ui.GanttCustomView=kendo.ui.GanttView.extend({
名称：“海关”，
选项：{
yearHeaderTemplate:kendo.template（“#=kendo.toString（start，'yyyy'）#”），
quarterHeaderTemplate:kendo.template（#return['Q1'，Q2'，Q3'，Q4'][start.getMonth（）/3]#），
monthHeaderTemplate:kendo.template（“#=kendo.toString（start，'MMM'）#”）
},
范围：功能（范围）{
本文件开始日期=新日期（“2013年1月1日”）；
本月底=新日期（“2016年1月1日”）；
},
_GenerateSlot:函数（incrementCallback，span）{
var插槽=[]；
var slotStart=新日期（this.start）；
var slotEnd；
while（slotStart