Styling events from bootstrap theme

[Grant]

Hi,

Id like to apply background-colors to events in my scheduler. I cannot use resources as different colours must be applied based on positive and negative values. I say "from Bootstrap theme" because I was recently using a LESS based theme and had no problems.

I've created a Dojo, https://dojo.telerik.com/OyOLifAc.

The problem here is that the background colour of the event only fills the content of the event template, not hte whole event, so on the right there is a blue bar, that is the base colour of the colour scheme.

How can I fill the event correctly?

Thanks,
Grant

[Dimitar]

Hi Grant,

The difference that you have observed is caused by the .k-event element padding which is causing its background to stand out. In this scenario, a more viable approach for customizing the appearance of the event could be to add the .p-event-related/unrelated classes directly to the .k-event element through the dataBound event as follows:

dataBound: function(e) {
  var view = this.view();
  var events = this.dataSource.view();
  var eventElement;
  var event;
  var scheduler = $("#scheduler").getKendoScheduler();
 
  for (var idx = 0, length = events.length; idx < length; idx++) {
    event = events[idx];
    eventElement = view.element.find("[data-uid=" + event.uid + "]");
      
    var style;
    if (event.id !== 0) {
      style = event.isRelated ? 'p-event-related': 'p-event-unrelated';
    }
    
    eventElement.addClass(style);
  }
}

Here is a modified Dojo example where the above code is demonstrated. You will notice that the additional logic for adding the class to the template is moved inside the dataBound event handler.

I hope this helps.

Regards,
Dimitar
Progress Telerik

[Grant]

HI Dimitar, 

Thanks for getting back to me. Your alternative is so much better, it simplifies my templates a bunch.

Thanks a lot,

Grant