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

Weird display issue

4 Answers 72 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 15 May 2020, 10:19 AM

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

Sort by
0
Ben
Top achievements
Rank 1
answered on 15 May 2020, 11:00 AM

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");

0
Aleksandar
Telerik team
answered on 19 May 2020, 06:50 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ben
Top achievements
Rank 1
answered on 05 Jun 2020, 02:20 PM

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.

0
Aleksandar
Telerik team
answered on 09 Jun 2020, 12:46 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Scheduler
Asked by
Ben
Top achievements
Rank 1
Answers by
Ben
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or