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

Question

I am trying to figure out how can i hide AllDaySlot, but still see events in the main part.

I've checked https://www.telerik.com/forums/=-24-hour-events-treated-as-all-day topic and any related topics but found no solution.

I can see working example, but for AJAX here: https://demos.telerik.com/aspnet-ajax/scheduler/examples/day-week-multi-day-views/defaultcs.aspx , but i had no luck to find out why and how is it done.

This functionality is required by my client and it's critical.

Looking forward for your answers.

Thank you.

Answer 1

The Kendo UI scheduler ignores events > 24h in the main part. See this feature request. Vote for it. Maybe Progress will fix this at some point in time.

For the time they don't I created a custom view.

Basically I inherited from kendo.scheduler.dayview.js, replaced the internal _renderEvents function.

Starting point for me was changing _renderEvents

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

to:

var isMultiDayEvent = event.isAllDay;

And

ranges = group.slotRanges(event);

to

ranges = group.slotRanges(event, false);

In _updateResizeHint and _updateMoveHint I replaced

var multiday = event.isMultiDay();

with

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

Which prevents the view from interpreting events > 24h from being treated as all day events.

What happens next heavily depends on your configuration (grouping, tooltips, custom templates, resizing, editing ...). Maybe you get errors at places my version never saw.

If you experience errors, let me know about it and you fixed it (or not :) ). Most probably others here are interested too.

HTH

Bernd

Answer 2

First of all, the issue is now fixed in the latest version of telerik ui after may'21.

For those who are still using older version 2020 and below, this could help

As given by @bdongus i had extended the dayview as follows. (since he had not given the full code)

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

And you need to use this in your scheduler view

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

And it works like a charm now.

Thanks

Ramesh R