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
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
Rank 1
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
Rank 1
Veteran
Iron
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
Rank 1
Veteran
Iron
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
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
Regards,
Neli