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

Question

我正在使用带有 ASP.NET Core MVC 的剑道甘特图，我希望日视图时间轴以 30 分钟的增量与 1 小时的增量显示。我每天尝试显示的工作时间是上午 7:00 到下午 3:30，但我无法显示下午 3:30 的结束时间。

这是使用 jquery kendo 甘特图获取时间标题模板的示例

<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>

但是，我不知道如何让该模板显示 30 分钟的增量，或者是否有不同的方法来完成此操作。本质上，我希望它看起来像这里显示的Kendo Scheduler Timeline 视图：

Answer 1

我用 Telerik 打开了一张支持票，得到了一个答案，虽然没有内置的方法可以使用甘特图组件执行此操作，但一种实现方法是创建一个自定义视图，如下所示：https://docs.telerik .com/kendo-ui/controls/scheduling/gantt/how-to/creating-custom-view

自定义视图示例代码：

    <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>