Scheduler times have 16px offset when an event starts at 12:00AM

[Rob]

When the scheduler has an event that starts at the cuttoff time for your scheduler-table, the entire table shifts up 16px to accommodate (show) that there is in fact an event there, however  the div with class="k-scheduler-times" is not shifted.

For example, my scheduler is setup for 00:00 to 24:00.  If I have an event that is starting at 24:00, my table looks perfect until I scroll down to the bottom and the 23:00 - 24:00 time slot becomes visible. Once it is on-screen, the events table all move up by 16px and the grids no longer line up with the scheduler-times. 

Please provide a fix, that when this is triggered, to also inlcude the "k-Scheduler-times" to be shifted up in sync with the scheduler-table.

See attached photos.

Thank you,

Rob

[Ivan Danchev]

Resizing the scheduler after its initialization could be used as a workaround specifically for the scenario shown in the Bug Report Item.

$(document).ready(function() {
  var scheduler1 = $("#scheduler").data("kendoScheduler");
  scheduler1.resize();
});

https://dojo.telerik.com/eZOyAteY/3

 

[Ivan Danchev]

Hello Rob,

I am afraid we were unable to reproduce the behavior shown in the screenshots. Regardless of having an appointment starting at 23:00 or 24:00 no shifting is exhibited at our end. Here's a screenshot showing how the Scheduler looks like at our end. Please, attach/link a runnable sample project that demonstrates the issue, including any custom CSS you are applying to the Scheduler as it could be responsible for the observed behavior.

Regards,
Ivan Danchev
Telerik

[Rob]

I'm not able to see your screen shot.

[Rob]

I was able to reproduce my error on your demo at http://demos.telerik.com/kendo-ui/scheduler/index

Go into the demo, create a new event that starts at 11:59 PM and runs until 8 AM the next day.

 

[Rob]

The shifting starts at 11:42 PM in your demo - the pixel amount increases as you go from 11:42  up to 11:59PM.

[Ivan Danchev]

Hello Rob,

Thank you for the additional information provided.

The rows misalignment, observed when the Appointment start time is in the specified time interval, is a bug. As workaround you could set the following CSS rule:

.k-event {
  min-height: 0px;
}

The existence of an appointment will still be indicated, without having a noticeable row misalignment. 

Regards,
Ivan Danchev
Telerik

[K.Ramadan]

hello,
I have the same problem and i tried your workaround but it didn't work ..
calling the scheduler.refresh() was my solution ..
so calling the method after navigating will make sense .. because the misalignment accrues after every SchedulerBound witch is triggered onNavigation ..
but boundFunction is making my life harder .. i can't just call the refresh() in the bound because it will it iterate till the browser collapse .. so i tried to put it in a button and click the button in the boundFunction but it will also iterate the onClickFunction but without collapsing ..
So my question is, is there any way to trigger the click event after the bound function?
Or if you have a better workaround?
it will be great if you help me with small snippets.. 
Thanks in advance

[K.Ramadan]

and I added min-width:0px; because SchedulerTime is Horisontally displayed .. with no success ..

[K.Ramadan]

This is what i mean ( first scheduler !! )

Kendo Team Example : (not mine)

http://dojo.telerik.com/uwUmufAb

[Ivan Danchev]

Hello Karam,

The "refresh" method should not be called in the DataBound event handler, because the refresh triggers DataBound, so it will end up in an infinite loop. A more suitable place to call this method is a Scheduler's Navigate event handler, or outside of any Scheduler events, whenever refreshing is needed.

We will investigate what causes the misalignment in the dojo example you posted and will get back to you.

Regards,
Ivan Danchev
Progress Telerik

[K.Ramadan]

Hello Ivan,

Thank you for your response ..

I will be waiting for a solution ..

while you're investigating this Problem .. I'll send you a Pic for another alignment problem ..

As you can see in the Picture .. the Time Row is not well aligned with the "EventField" ..

all the red dots are showing wrong alignments .. and the black boxes are the only well aligned Time Column ..

Thanks in Advance ..

 

[Ivan Danchev]

Hello Karam,

We can confirm that the misalignment is due to a bug. It is now logged for fixing: https://feedback.telerik.com/kendo-jquery-ui/1471784-event-misalignment-when-several-scheduler-are-present-on-the-page

I've updated your Telerik points for reporting the bug.

As for the new misalignment issue, could you link a dojo example that demonstrates it?

Regards,
Ivan Danchev
Progress Telerik

[K.Ramadan]

Hello Ivan,

first of all thank you for the points, i didn't know that there is Telerik Points for such things .. so thank you ..

for the second Problem .. this is a Link for an example provided from Telerik ..

https://demos.telerik.com/aspnet-mvc/scheduler/date-grouping

 

I will attach a Picture so that you can see how it looks like on my side .

Will i be informed if the Bug is fixed ? or should i visit a Link like daily or weekly ?

 

Thanks in Advance 

[Ivan Danchev]

Hello Karam,

Is this screenshot taken using our demo or a separate project based on this demo? Does the misalignment occur on resize the browser and does it occur in a specific browser, or it is exhibited in Chrome, Firefox and IE? For a reference, here's how the Scheduler from the demo looks like at my end: screenshot.

As for the bug in the Feedback Portal, if you follow it (screenshot) you will get notified when it is fixed. Its status will then say "Completed", while it currently is "Unplanned".

Regards,
Ivan Danchev
Progress Telerik

[Peter]

I have just had a similar issue with the scheduler timeline view. All appointments were being displayed with a 8px offset to the left until couple of click events had been fired forcing the view to recalculate its positioning.

Turns out the issue was due to padding inline end disturbing the 'left, absolute' position.

Fix:

kendo-scheduler .k-event {
  padding-inline-end: 0;
}

 

Happy coding ;)