[Solved] Today Hour Lines Not Showing Up in Scheduler Inside TabStrip

[Matthew]

Hello,

I have a scheduler instantiated inside a bootstrap column, nested inside a kendo tabstrip container. Everything looks good, except that only today's view does not show any lines for the day. Also, when I switch to the week view, every day but today is showing up with the correct tr borders. 

I tried using the refresh code, including adding a delay to refresh after the tab is activated; but no luck. Here is my code:

var loadAppointments = function()
{
  $("#schedule-appointments-scheduler").kendoScheduler();
}

var loadContent = function()
{
  var vm = ViewModelManager.getViewModel();
  loadAppointments();
  $("#schedule-main-content-container").kendoTabStrip({
 animation:  {
 open: {
  effects: "fadeIn"
 }
},
activate: function(e)
{
   var scheduler = $("#schedule-appointments-scheduler").data("kendoScheduler");
      _.delay(function() {
         //scheduler.view(scheduler.view().name);
         scheduler.refresh();
      }, 200);
}
});
}

The first Screenshot is today's date, and the second is tomorrow. Any help would be greatly appreciated. 

Regards,
Matt

[Matthew]

Well, I feel like an idiot! I went to the demo on the Kendo Demos page and it is showing the same behavior. Are we saying that for today, no hour lines show up? I'm using the latest Safari, Chrome and Firefox and getting the same results. Is there a way to change this behavior?

Thanks,
Matt

[Matthew]

So, I changed the styling of: #schedule-main-content-container table tr.k-middle-row td.k-today, with a border-bottom and top (still working on the styling. However, now that I have a border on it to see the boundaries, I have noticed that as the day progresses, the table rows are shifting down about 2 pixels per hour (guess). Any suggestions on where to change the style of this?

Thanks again,
Matt 

[Dimo]

Hello Matt,

The problem is caused by the fact that the cells' border color matches the background color. This can be easily resolved with the CSS rule below and I will consult our designers to suggest a change in the Kendo UI Bootstrap theme for future releases.

.k-scheduler-times tr,
.k-scheduler-times th,
.k-scheduler-table td,
.k-scheduler-header th,
.k-scheduler-header-wrap,
.k-scheduler-times
{
   border-color: #ccc;
}

A misalignment will occur if you add more borders than are normally used, which will break the alignment between the different tables inside the Scheduler. That's why you should only change colors of exissting borders, as shown above.

Regards,
Dimo
Telerik

 

 

[Matthew]

Thanks Dimo,

Got it figured out. I immediately went into troubleshooting a programatic error initially. Never thought it was meant to do that! With some simple CSS hacks, I got it up and running.

Thanks for your quick response!

-- Matt