Question

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

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

尽管持续时间很长，我希望所有事件块都占据全长。类似于下面强调的一个

Answer 1

请查看下面的代码段。我做了几件事：

我从活动模板中删除了title数据，因为您说您不想看到它。
我在space元素之后的模板中放置了<p>，以便事件的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存在于同一级别上，并浮动在它上面。调度程序根据事件的开始和结束时间计算事件的位置和大小。

为了让您将它们放置为全天活动，您需要做以下两件事之一：

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

＆＃13;

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

＆＃13;

Answer 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;
      }
    }
  }
});

希望这会有所帮助

Kendo Scheduler TimeLineView for Resources，将每个事件显示为其allDay事件

2 个答案: