This is a migrated thread and some comments may be shown as answers.

>= 24 Hour events treated as All Day?

4 Answers 139 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Jared
Top achievements
Rank 1
Jared asked on 10 Apr 2014, 03:08 PM
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

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 14 Apr 2014, 07:10 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Benjamin
Top achievements
Rank 1
answered on 06 Aug 2014, 04:36 PM
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.
0
Vladimir Iliev
Telerik team
answered on 08 Aug 2014, 08:31 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Ramesh
Top achievements
Rank 1
Veteran
Iron
commented on 11 Aug 2021, 04:44 AM

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

0
Ramesh
Top achievements
Rank 1
Veteran
Iron
answered on 11 Aug 2021, 11:23 AM

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
Telerik team
commented on 12 Aug 2021, 10:51 AM

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

Tags
Scheduler
Asked by
Jared
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Benjamin
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Ramesh
Top achievements
Rank 1
Veteran
Iron
Share this question
or