>= 24 Hour events treated as All Day?

[Jared]

Is there a way to create a 24 hour event that is not treated as "All Day"?  Currently I have the all day slot hidden and when an event is created that is 24 hours or greater it disappears (as it goes to the hidden all day slot).  

I've trapped the event in the save and allDay is set to false so I'm guessing this is something that happens once the data gets into the scheduler.  Is there a way to disable this behavior? 

Thanks,
Jared

[Georgi Krustev]

Hello Jared,

By design, the scheduler renders events longer than 24 hours as "All Day" events and this behavior is not configurable. The only way to accomplish your goal is to render such events manually. You will need to use a custom view to achieve this. Check this code library, which shows how a custom view can be build and used.

Regards,
Georgi Krustev
Telerik

 

 

[Benjamin]

Its fine to say that >24 is an all day event, but having items disappear with no explanation just because its configured with AllDaySlot = false is a problem.  Any suggestions on prevent users from doing this until you can get this fixed?  Thanks.

[Vladimir Iliev]

Hi Benjamin,

As my colleague Georgi already mention currently it's not possible to show the all-day events outside the "allDaySlot" without custom solution. Such support however will be added in the upcoming "timeline" view (only), expected to be released in Q3 2014.

Regards,
Vladimir Iliev
Telerik

 

 

[Ramesh]

Hi Vladimir Iliev

Is it still not fixed? I'm having the same issue and im using 2020 version of telerik now.

If not fixed, can you please give me an example how to show timeline view vertically (timeline view by default it is showing in horizontal view)

 

Thanks for your support

Ramesh R

[Ramesh]

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

I found a solution from this stackoverflow post 

As he rightly said i had extended the dayview as follows. 

 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

                                          

[Neli]

Hi Ramesh,

Indeed the enhancement for displaying the 24h events as normal events has been released with Kendo 2021 R2 release (2021.2.511). For convenience I am posting below links to the Kendo Release History and to the issue in our official Feedback Portal:

- https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2021

- https://feedback.telerik.com/kendo-jquery-ui/1360051-show-scheduler-events-24h-as-normal-events-not-in-the-all-day-slot

Regards,

Neli