I'm using the scheduler component to display events for a day. These events occur one after another and can take different lengths of time but none can occur at the same time.
On a widescreen, the scheduler displays as expected with each event taking up the full width of the scheduler (NormalOperation.png). However, on a screen with a lower resolution or one with the browser zoom higher or lower than 100%, the events do not take up the entire width but appear as if they happen at the same time (DisplayIssue.png).
I have tried removing the custom style sheets we have in case there are any conflicting styles but this doesn't seem to make a difference.
Changing the start time of the events to 1 second later did seem to fix the issue but only when zoomed out in the browser.
Any help would be appreciated,
Ben
4 Answers, 1 is accepted
Rank 1
Below is the setup of my scheduler:
$("#template").kendoScheduler({
views: [{
type: "day",
minorTickCount: 12,
majorTick: 60,
showWorkHours: true,
majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'HH:mm')#</strong>"),
}],
height: "calc(100vh - 111px)", // 100% of screen height minus the height of the header and footr
snap: true,
date: new Date("2013/6/6 08:00"),
startTime: new Date("2013/6/6 " + this.StartTime),
endTime: new Date("2013/6/6 " + this.EndTime),
workDayStart: new Date("2013/6/6 " + this.StartTime),
workDayEnd: new Date("2013/6/6 " + this.EndTime),
footer: false,
currentTimeMarker: false,
editable: {
template: $("#customEditorTemplate").html(),
},
eventTemplate: $("#eventTemplate").html(),
messages: {
editor: {
editorTitle: "Booking Slot"
}
},
dataBound: function () {
createDropArea(this);
var view = this.view();
var events = this.dataSource.view();
var eventElement;
var event;
for (var idx = 0, length = events.length; idx < length; idx++) {
event = events[idx];
eventElement = view.element.find("[data-uid=" + event.uid + "]");
if (event.Bookable === false) {
eventElement.css("background-color", "#ea4335");
}
else {
eventElement.css("background-color", "#dde2e6");
eventElement.css("color", "black");
}
}
},
resizeEnd: function (e: any) {
if (isAnotherSlotAtSameTime(e.start, e.end, e.event)) {
kendo.alert("You cannot resize a block over the same time as another");
e.preventDefault();
return;
}
},
moveEnd: function (e) {
if (isAnotherSlotAtSameTime(e.start, e.end, e.event)) {
kendo.alert("You cannot move a block to the same time as another");
e.preventDefault();
return;
}
},
add: function (e) {
if (isAnotherSlotAtSameTime(e.event.start, e.event.end, e.event)) {
kendo.alert("You cannot add a slot at the same time as another");
e.preventDefault();
return;
}
},
remove: function (e) {
new UnsavedChanges().kendoControlChanged()
},
save: function (e) {
if (isAnotherSlotAtSameTime(e.event.start, e.event.end, e.event)) {
kendo.alert("There is already a slot at this time");
e.preventDefault();
return;
}
var startAt = new Date("2013/6/6 " + $("#iptStartTime").val());
var endAt = new Date("2013/6/6 " + $("#iptEndTime").val());
if (e.event.start < startAt) {
kendo.alert("You cannot set the start time of this slot to before the template start time");
e.preventDefault();
return;
}
if (e.event.end > endAt) {
kendo.alert("You cannot set the end time of this slot to after the template end time");
e.preventDefault();
return;
}
let data = dsBlockTypesList.data();
for (var i = 0, n = data.length; i < n; i++) {
if ((data[i] as any).id == (e.event as any).BlockTypeId) {
(e.event as any).slotDuration = (data[i] as any).slotDuration;
(e.event as any).Bookable = (data[i] as any).bookable;
(e.event as any).title = (data[i] as any).name;
}
}
DataModification.SetDescription(e.event.start, e.event.end, e.event);
if (e.container != null) {
updated.push(e.event.id);
}
new UnsavedChanges().kendoControlChanged()
},
edit: function (e) {
var blockTypeList = e.container.find("#blockTypeList");
blockTypeList.kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: dsBlockTypesList
});
},
dataSource:
{
batch: true,
transport: {
read: function (options: any) {
remoteDs.one("change", function () {
options.success(this.data());
});
remoteDs.read();
},
update: function (options: any) {
options.data.models.forEach(function (element: { Id: any; }) {
updated.push(element.Id);
});
options.success(true);
},
destroy: function (options: any) {
options.success(true);
},
create: function (options: any) {
var event = options.data.models[0];
event.local = true;
options.success(event);
}
},
schema: {
model: {
id: "Id",
fields: {
title: { from: "title", validation: { required: true } },
description: { from: "description", defaultValue: "" },
start: { type: "date", from: "start" },
end: { type: "date", from: "end" },
local: { type: "bool", defaultValue: "false" },
BlockTypeId: {
type: "number",
},
templateId: {
type: "number",
},
bookable: {
type: "bool",
},
slotDuration: {
type: "number",
},
}
}
}
}
}).data("kendoScheduler");
Hi Ben,
The Kendo UI widgets and framework components are designed to support all major web browsers, however, there are some limitations - browser zoom level is one of them. Zoomed-in and zoomed-out pages are not supported. The reason for this is that different browsers handle sub-pixel calculations differently. Therefore changes in zoom levels may lead to unexpected behavior like the one observed. Having said that I created a simple dojo to test the reported behavior but was unable to reproduce it. You can see a screencast here
Note also that if a previous version to v2020.2.513 is used there was an issue related to the reported behavior for events that end and start at the same time, that is fixed with this version. If that is the case I would advise updating to the latest Kendo UI version.
Regards,
Aleksandar
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Just as a follow up to this for anyone else who may have the same issue;
Upgrading to the latest version of the Kendo library did not resolve the issue, instead I had to change the start time of each event to be 1 second later to consistently stop this issue from occurring (this required a fair bit of code change to accommodate the events having 1 less second) effectively providing a 1 second gap between each event.
Not an ideal scenario but it was the only thing that seemed to resolve it.
Hi Ben,
If the update did not resolve the behavior could you please share a runnable sample where we can review the issue? If the issue persists at 100% scale having to modify the time of the events is indeed a workaround, but the issue would need addressing. Can you modify the previously sent dojo, if it is easier for you, or send a sample where we can review the issue?
Regards,
Aleksandar
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.