Hi,
Using UI for .net core.
I have a requirement to show multi days events in week view,
e.g Start 27/12/18 10:00 AM - End 29/12/18 13:00 PM. (2 days and 3 hours)
So the event should span on those multi days in the week view table part (but not as all day events in the scheduler top row)
The default scheduler week view behavior prevent this by making the event into an all day event.
According to this link :
https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-views/custom-view
I can create a custome view but i cant seem to find an example on how to
create custom view that inherits from week view and that can show events that span for multi days.
I checked out other related forum questions but I cant seem to find an answer, for example:
https://www.telerik.com/forums/show-all-day-event-in-the-main-part-of-week-view
Looking forward for your answers.
Thank you.
4 Answers, 1 is accepted
This behavior is currently not supported by Kendo Scheduler and at the moment we don't have an already created custom view that has such functionality. The scenario have been added as feature request in our feedback portal here so you can follow it and vote for it.
In case you decide to try to create such custom view - in general the process of creating such custom views include researching the currently implemented views and their code, find out what needs to be changed to achieve the desired behavior and apply it as it is done in the documentation scenario that you linked.
Regards,
Plamen
Progress Telerik
We decided to keep the current functionality of the scheduler.
So events that span more then 24 hours, will show up normally in the scheduler table top row (All day row).
The problem is, when I add an event that is All day or more (multi day),
all the events in the scheduler disappear including All day events.
I checked and the scheduler have all the events related data, it just doesn't render them at all.
Notes:
- We implement the given ISchedulerEvent interface and added some client requested event properties:
(I removed irrelevant parts)
public
class
ScheduledTest : ISchedulerEvent
{
public
DateTime Start {
get
;
set
; }
public
DateTime End {
get
;
set
; }
..........
}
- This is the scheduler code (I removed irrelevant parts):
@(Html.Kendo().Scheduler<
Hartech.LMS.Models.ScheduledTest
>()
.Name("scheduler")
.AllDaySlot(true)
.Date(DateTime.Today)
.StartTime(new DateTime(1, 1, 1, 00, 00, 00))
.EndTime(new DateTime(1, 1, 1, 23, 59, 00))
.Views(views =>
{
views.WeekView(weekView =>
{
weekView.Selected(true);
weekView.MajorTimeHeaderTemplate("#=kendo.toString(date, 't')#");
weekView.MajorTick(120);
weekView.SelectedDateFormat("{0:ddd dd/MM/yyyy} - {1:ddd dd/MM/yyyy}");
weekView.SelectedShortDateFormat("{0:dd/MM/yyyy} - {1:dd/MM/yyyy}");
});
})
.DataSource(d => d
.Events(e =>
{
e.Error("onError");
e.RequestEnd("onRequestEnd");
})
.Model(m =>
{
.......
m.Field(f => f.Start);
m.Field(f => f.End);
})
.ServerOperation(true)
.Read(read => read.Action("Read", "Schedule").Data("addDateFilters"))
.Create("Add", "Schedule")
.Destroy("Delete", "Schedule")
.Update("Update", "Schedule")
)
- Keep in mind that the code is copy pasted from my app with some edits for clarity so there might be a syntax problem in this pasted code,
But there is no syntax error on the app.
Thanks
Hi
After some research, the problem seem to be in the function _createEventElement in kendo.all.js file.
01.
_createEventElement: function (event, isOneDayEvent, head, tail) {
02.
var template = isOneDayEvent ? this.eventTemplate : this.allDayEventTemplate;
03.
var options = this.options;
04.
var editable = options.editable;
05.
var isMobile = this._isMobile();
06.
var showDelete = editable && editable.destroy !== false && !isMobile;
07.
var resizable = editable && editable.resize !== false;
08.
var startDate = getDate(this.startDate());
09.
var endDate = getDate(this.endDate());
10.
var startTime = getMilliseconds(this.startTime());
11.
var endTime = getMilliseconds(this.endTime());
12.
var eventStartTime = event._time('start');
13.
var eventEndTime = event._time('end');
14.
var middle;
15.
if (startTime >= endTime) {
16.
endTime = getMilliseconds(new Date(this.endTime().getTime() + MS_PER_DAY - 1));
17.
}
18.
if (!isOneDayEvent && !event.isAllDay) {
19.
endDate = new Date(endDate.getTime() + MS_PER_DAY);
20.
}
21.
var eventStartDate = event.start;
22.
var eventEndDate = event.end;
23.
if (event.isAllDay) {
24.
eventEndDate = getDate(event.end);
25.
}
26.
if (!isInDateRange(getDate(eventStartDate), startDate, endDate) && !isInDateRange(eventEndDate, startDate, endDate) || isOneDayEvent && eventStartTime <
startTime
&& eventEndTime > endTime) {
27.
middle = true;
28.
} else if (getDate(eventStartDate) <
startDate
|| isOneDayEvent && eventStartTime < startTime) {
29.
tail
=
true
;
30.
} else if (eventEndDate > endDate && !isOneDayEvent || isOneDayEvent && eventEndTime > endTime) {
31.
head = true;
32.
}
33.
var resources = this.eventResources(event);
34.
if (event._startTime && eventStartTime !== kendo.date.getMilliseconds(event.start)) {
35.
eventStartDate = new Date(eventStartTime);
36.
eventStartDate = kendo.timezone.apply(eventStartDate, 'Etc/UTC');
37.
}
38.
if (event._endTime && eventEndTime !== kendo.date.getMilliseconds(event.end)) {
39.
eventEndDate = new Date(eventEndTime);
40.
eventEndDate = kendo.timezone.apply(eventEndDate, 'Etc/UTC');
41.
}
42.
var data = extend({}, {
43.
ns: kendo.ns,
44.
resizable: resizable,
45.
showDelete: showDelete,
46.
middle: middle,
47.
head: head,
48.
tail: tail,
49.
singleDay: this._dates.length == 1,
50.
resources: resources,
51.
inverseColor: resources && resources[0] ? this._shouldInverseResourceColor(resources[0]) : false,
52.
messages: options.messages
53.
}, event, {
54.
start: eventStartDate,
55.
end: eventEndDate
56.
});
57.
var element = $(template(data));
58.
this.angular('compile', function () {
59.
return {
60.
elements: element,
61.
data: [{ dataItem: data }]
62.
};
63.
});
64.
return element;
65.
}
This pasted lines below (lines 42 - 57) are responsible for creating the data to render in the scheduler:
------------------------------
var data = extend({}, {
ns: kendo.ns,
resizable: resizable,
showDelete: showDelete,
middle: middle,
head: head,
tail: tail,
singleDay: this._dates.length == 1,
resources: resources,
inverseColor: resources && resources[0] ? this._shouldInverseResourceColor(resources[0]) : false,
messages: options.messages
}, event, {
start: eventStartDate,
end: eventEndDate
});
var element = $(template(data));
------------------------------
For some reason, after adding an event with a 24 hours duration or more, the "data" part become undefined,
So the line [var element = $(template(data));] cause an error.
and the scheduler stops working properly with the following error message in chrome console:
01.
Uncaught TypeError: Cannot read property 'replace' of null
02.
at Object.eval [as tmpl0] (eval at compile (kendo.all.js:194), <
anonymous
>:3:139)
03.
at Object.eval (eval at compile (kendo.all.js:194), <
anonymous
>:3:758)
04.
at proxy (jquery.js:492)
05.
at r._createEventElement (kendo.all.js:96657)
06.
at r._renderEvents (kendo.all.js:96779)
07.
at render (kendo.all.js:96815)
08.
at init.refresh (kendo.all.js:106313)
09.
at init.proxy (jquery.js:492)
10.
at init.trigger (kendo.all.js:124)
11.
at init._process (kendo.all.js:7364)
The thing that might cause the bug is in lines 54-55 in the method:
the properties "eventStartDate" & "eventEndDate" (of the "data" object) are undefined as well,
Which in turn might cause the "data" object to become undefined as explained above.
Those properties should not be undefined because they are assigned in lines:
21. var eventStartDate = event.start;
22. var eventEndDate = event.end;
and the event.start & event.end have values, so i would expect it to work.
Waiting for your response.
Thank you.
I have inspected the code that you shared but could not see anything unusual. The issue may be caused by the additional client functions used or something else that is not seen from the code. In such case I would rather recommend you to check the code of our offline demos that are working correctly as it can be seen here and compare it with your implementation. Offline demos can be downloaded from your Telerik account.
Regards,
Plamen
Progress Telerik