资源的 Kendo Scheduler TimeLineView，将每个事件显示为好像它的 allDay 事件答案

【问题标题】：Kendo Scheduler TimeLineView for Resources, show each event as if its allDay event资源的 Kendo Scheduler TimeLineView，将每个事件显示为好像它的 allDay 事件
【发布时间】：2018-05-04 20:59:27
【问题描述】：

我创建了这个Dojo Link，它按组显示资源。此视图的问题是仅当它是 allDay 事件时才显示长块。对于这个视图，我如何应用一个模板来显示每个事件的时间范围？

目前它显示的是小块，很难分辨它是什么或预订了多长时间。

尽管持续时间长度，我希望所有事件块都占据完整长度。类似于下面突出显示的

【问题讨论】：

您能否添加屏幕截图以便我们看到您所描述的内容？
@Shai 添加了之前和之后的截图（我想要的）

标签： kendo-ui kendo-scheduler

【解决方案1】：

看下面的代码sn-p。我做了几件事：

我从活动模板中删除了 title 数据，因为你说你不想看到它。
我在模板中<p> 元素之后放置了一个space，这样事件的x 动作就会出现在其中。还有其他方法可以做到这一点，我使用了一种简单的方法。

我对代码底部的样式进行了更改，具体如下：

.movie-template {
    overflow: auto !important;
    width: fit-content !important;
}

.k-event {
    width: fit-content !important;
}

.space {
    width: 20px;
    height: 15px;
    display: inline-block;
}

.movie-template p {
    margin: 5px 0 0;
    display: inline-block;
}

编辑
~~~~
让约会填满他们所属的单元格要么是不可能的，要么是极其复杂的。我会解释原因：

事件的编程方式，它们与调度程序的表在 DOM 上存在于同一级别并浮动在它之上。调度程序根据事件的开始和结束时间计算事件的位置和大小。

为了让您将它们视为全天活动，您需要执行以下两项操作之一：

使用您自己的代码覆盖调度程序的自动放置，该代码将计算位置和大小并相应地设置它们。请注意，每次调整窗口大小、重新聚焦、旋转等时都需要运行此代码。
将事件定义为“全天约会”，并将它们的实际开始和结束时间存储在您将在代码中使用的其他字段中。这可能会破坏您可能已经拥有的其他功能。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.timezones.min.js"></script>
    

</head>
<body>
<div id="example" class="k-content">
    <div id="scheduler"></div>
</div>
  <script id="event-template" type="text/x-kendo-template">
    <div class="movie-template" style="width:100px">
        <p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
        <span class="space"></span>
    </div>
</script>
<script>
            var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
          options: {
            name: "MyCustomTimelistView",
            title: "Timeline Week",
            selectedDateFormat: "{0:D} - {1:D}",
            selectedShortDateFormat: "{0:d} - {1:d}",
            majorTick: 1440,
            numberOfDays: 7
          },
          name: "MyCustomTimelistView",
          calculateDateRange: function() {
            //create the required number of days

            var start = this.options.date,
                //  start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                idx, length,
                dates = [];

            for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {
              dates.push(start);
              start = kendo.date.nextDay(start);
            }
            this._render(dates);
          },
          previousDate: function() {
            var date = new Date(this.startDate());

            date.setDate(date.getDate() - this.options.numberOfDays);

            return date
          }
        });
  
$(function() {
  
  

  
  
    $("#scheduler").kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
              eventTemplate: $("#event-template").html(),

        views: [
            "day",
            { type: "MyCustomTimelistView", selected: true,
            

            },
            "month",
            "agenda",
            "timeline"
        ],
        timezone: "Etc/UTC",
         dataBinding: function(e) {
            var view = this.view();
           $( ".k-scheduler-times > table > tbody > tr:eq(1)" ).hide();
           	$( ".k-scheduler-header-wrap > table > tbody > tr:eq(1)" ).hide();
        },
      
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/meetings",
                    dataType: "jsonp"
                },
                update: {
                    url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "meetingID",
                    fields: {
                        meetingID: { from: "MeetingID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        roomId: { from: "RoomID", nullable: true },
                        attendees: { from: "Attendees", nullable: true },
                        isAllDay: { type: "boolean", from: "IsAllDay" }
                    }
                }
            }
        },
        group: {
            resources: ["Rooms"],
            orientation: "vertical"
        },
        resources: [
            {
                field: "roomId",
                name: "Rooms",
                dataSource: [
                    { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
                    { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
                ],
                title: "Room"
            },
            {
                field: "attendees",
                name: "Attendees",
                dataSource: [
                    { text: "Alex", value: 1, color: "#f8a398" },
                    { text: "Bob", value: 2, color: "#51a0ed" },
                    { text: "Charlie", value: 3, color: "#56ca85" }
                ],
                multiple: true,
                title: "Attendees"
            }
        ]
    });
});
</script>
<style>
    .movie-template {
      overflow: auto !important;
      width: fit-content !important;
    }
  
    .k-event {
      width: fit-content !important;
    }
  
    .space {
        width: 20px;
        height: 15px;
        display: inline-block;
    }
  
    .movie-template img {
        float: left;
        margin: 0 8px;
    }
    .movie-template p {
        margin: 5px 0 0;
        display: inline-block;
    }
    .movie-template h3 {
        padding: 0 0 5px;
        font-size: 12px;
    }
    .movie-template a {
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
    }
    .k-state-hover .movie-template a,
    .movie-template a:hover {
        color: #000000;
    }
</style>

</body>
</html>

【讨论】：

我希望每个事件块都占用一整天，看起来好像是一整天，即使当天只有几个小时。上面似乎是另一天，并且与同一天的其他事件不一致
编辑了我的答案，见“编辑”。

【解决方案2】：

您可以像这样创建自定义视图并在您的代码中使用它

  var CustomMonthView = kendo.ui.TimelineMonthView.extend({
  options: {
    name: "CustomMonth",
    title: "Month"
  },
  name: "CustomMonth",
  _positionEvent: function(eventObject) {
    var eventHeight = this.options.eventHeight + 2;
    var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, true);
    var left = this._adjustLeftPosition(rect.left);
    var width = rect.right - rect.left - 2;
    if (width < 0) {
      width = 0;
    }
    if (width < this.options.eventMinWidth) {
      var slotsCollection = eventObject.slotRange.collection;
      var lastSlot = slotsCollection._slots[slotsCollection._slots.length - 1];
      var offsetRight = lastSlot.offsetLeft + lastSlot.offsetWidth;
      width = this.options.eventMinWidth;
      if (offsetRight < left + width) {
        width = offsetRight - rect.left - 2;
      }
    }
    eventObject.element.css({
      top: eventObject.slotRange.start.offsetTop + eventObject.rowIndex * (eventHeight + 2) + 'px',
      left: left,
      width: width
    });
  },
  _arrangeRows: function (eventObject, slotRange, eventGroup) {
    var startIndex = slotRange.start.index;
    var endIndex = slotRange.end.index;
    var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, true);
    var rectRight = rect.right + this.options.eventMinWidth;
    var events = kendo.ui.SchedulerView.collidingEvents(eventObject.slotRange.events(), startIndex, endIndex);
    slotRange.addEvent({
      slotIndex: startIndex,
      start: startIndex,
      end: endIndex,
      rectLeft: rect.left,
      rectRight: rectRight,
      element: eventObject.element,
      uid: eventObject.uid
    });
    events.push({
      start: startIndex,
      end: endIndex,
      uid: eventObject.uid
    });
    var rows = kendo.ui.SchedulerView.createRows(events);
    if (eventGroup.maxRowCount < rows.length) {
      eventGroup.maxRowCount = rows.length;
    }
    for (var idx = 0, length = rows.length; idx < length; idx++) {
      var rowEvents = rows[idx].events;
      for (var j = 0, eventLength = rowEvents.length; j < eventLength; j++) {
        eventGroup.events[rowEvents[j].uid].rowIndex = idx;
      }
    }
  }
});

希望对你有帮助

【讨论】：