Telerik Kendo 调度程序：在周视图的主要部分显示全天事件

Question

我想知道如何隐藏 AllDaySlot，但仍能在主要部分看到事件。

我检查了 https://www.telerik.com/forums/=-24-hour-events-treated-as-all-day 主题和任何相关主题，但没有找到解决方案。

我可以看到工作示例，但对于 AJAX 此处：https://demos.telerik.com/aspnet-ajax/scheduler/examples/day-week-multi-day-views/defaultcs.aspx，但我没有运气找出原因以及如何完成。

我的客户需要此功能，它很关键。

期待您的回答。

谢谢。

Answer 1

Kendo UI 调度程序忽略主要部分中 > 24h 的事件。参见 this feature request。投票给它。也许 Progress 会在某个时间点解决这个问题。

目前我还没有 created a custom view。

基本上我继承自kendo.scheduler.dayview.js，替换了内部的_renderEvents函数

我的起点是更改 _renderEvents

var isMultiDayEvent = event.isAllDay || event.duration() >= MS_PER_DAY;

至：

var isMultiDayEvent = event.isAllDay;

和

ranges = group.slotRanges(event);

至

ranges = group.slotRanges(event, false);

在_updateResizeHint和_updateMoveHint中我替换了

var multiday = event.isMultiDay();

和

var multiday = event.isMultiDay() && this.options.allDaySlot;

这会阻止视图将超过 24 小时的事件解释为全天事件。

接下来会发生什么在很大程度上取决于您的配置（分组、工具提示、自定义模板、调整大小、编辑...）。也许你会在我的版本从未见过的地方出错。

如果您遇到错误，请告诉我，您会修复它（或不修复 :)）。很可能这里的其他人也有兴趣。

HTH

伯恩德

Answer 2

首先，该问题现已在 21 月 21 日之后的最新版本的 telerik ui 中得到修复。

对于仍在使用 2020 及以下旧版本的用户，这可能会有所帮助

正如@bdongus 所说，我已按如下方式扩展了 dayview。（因为他没有给出完整的代码）

  var getDate = kendo.date.getDate;
    
        function addContinuousEvent(group, range, element, isAllDay) {
            var events = group._continuousEvents;
            var lastEvent = events[events.length - 1];
            var startDate = getDate(range.start.startDate()).getTime();
    
            //this handles all day event which is over multiple slots but starts
            //after one of the time events
            if (isAllDay && lastEvent &&
                getDate(lastEvent.start.startDate()).getTime() == startDate) {
    
                    var idx = events.length - 1;
                    for ( ; idx > -1; idx --) {
                        if (events[idx].isAllDay ||
                            getDate(events[idx].start.startDate()).getTime() < startDate) {
                                break;
                            }
                    }
    
                    events.splice(idx + 1, 0, {
                        element: element,
                        isAllDay: true,
                        uid: element.attr(kendo.attr("uid")),
                        start: range.start,
                        end: range.end
                    });
                } else {
                    events.push({
                        element: element,
                        isAllDay: isAllDay,
                        uid: element.attr(kendo.attr("uid")),
                        start: range.start,
                        end: range.end
                    });
                }
        }
    
        var CustomDayView = kendo.ui.DayView.extend({
        _renderEvents: function(events, groupIndex) {
                var allDayEventContainer = this.datesHeader.find(".k-scheduler-header-wrap > div");
                var byDate = this._isGroupedByDate();
                var event;
    
                var idx;
                var length;
    
                for (idx = 0, length = events.length; idx < length; idx++) {
                    event = events[idx];
    
                    if (this._isInDateSlot(event)) {
   var isMultiDayEvent = event.isAllDay;
                        var container = isMultiDayEvent && !this._isVerticallyGrouped() ? allDayEventContainer : this.content;
                        var element, ranges, range, start, end, group;
    
                        if (!isMultiDayEvent) {
    
                            if (this._isInTimeSlot(event)) {
                                group = this.groups[groupIndex];
    
                                if (!group._continuousEvents) {
                                    group._continuousEvents = [];
                                }
    
                                ranges = group.slotRanges(event, false);
    
                                var rangeCount = ranges.length;
    
                                for (var rangeIndex = 0; rangeIndex < rangeCount; rangeIndex++) {
                                    range = ranges[rangeIndex];
                                    start = event.start;
                                    end = event.end;
    
                                    if (rangeCount > 1) {
                                        if (rangeIndex === 0) {
                                            end = range.end.endDate();
                                        } else if (rangeIndex == rangeCount - 1) {
                                            start = range.start.startDate();
                                        } else {
                                            start = range.start.startDate();
                                            end = range.end.endDate();
                                        }
                                    }
    
                                    var occurrence = event.clone({ start: start, end: end, _startTime: event._startTime, _endTime: event.endTime });
    
                                    if (this._isInTimeSlot(occurrence)) {
                                        var head = range.head;
    
                                        element = this._createEventElement(event, !isMultiDayEvent, head, range.tail);
    
                                        element.appendTo(container);
    
                                        this._inverseEventColor(element);
    
                                        this._positionEvent(occurrence, element, range);
    
                                        addContinuousEvent(group, range, element, false);
                                    }
                                }
                            }
    
                        } else if (this.options.allDaySlot) {
                           group = this.groups[groupIndex];
    
                           if (!group._continuousEvents) {
                               group._continuousEvents = [];
                           }
    
  ranges = group.slotRanges(event, false);
    
                            if (ranges.length) {
                                range = ranges[0];
                                var startIndex = range.start.index;
                                var endIndex = range.end.index;
    
                                if (byDate && startIndex !== endIndex) {
                                    start = range.start.start;
                                    end = range.end.end;
                                    var newStart = new Date(start);
                                    var newEnd = new Date(start);
    
                                    for (var i = range.start.index; i <= range.end.index; i++) {
                                        element = this._createEventElement(event, !isMultiDayEvent, i !== endIndex, i !== startIndex);
    
                                        var dateRange = group.daySlotRanges(newStart, newEnd, true)[0];
                                        newEnd.setDate(newEnd.getDate() + 1);
                                        newStart.setDate(newStart.getDate() + 1);
    
                                        this._positionAllDayEvent(element, dateRange);
    
                                        addContinuousEvent(group, dateRange, element, true);
    
                                        element.appendTo(container);
    
                                        this._inverseEventColor(element);
                                    }
                                   } else {
                                           element = this._createEventElement(event, !isMultiDayEvent);
    
                                           this._positionAllDayEvent(element, ranges[0]);
    
                                           addContinuousEvent(group, ranges[0], element, true);
    
                                           element.appendTo(container);
    
                                           this._inverseEventColor(element);
                                   }
                           }
                        }
                    }
                }
            },
        });

并且您需要在您的调度程序视图中使用它

$("#scheduler").kendoScheduler({
            views: [
                "day",                
                "agenda",
                { type: "CustomDayView", title: "Day view", selected: true },
            ],
});

现在它就像一个魅力。

谢谢

拉梅什

Telerik Kendo 调度程序：在周视图的主要部分显示全天事件

Telerik Kendo Scheduler: Show all day event in the main part of Week View

kendo-ui

telerik

kendo-asp.net-mvc

kendo-scheduler

telerik-scheduler