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

Styling events from bootstrap theme

2 Answers 5 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 04 Feb 2020, 12:27 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 06 Feb 2020, 08:39 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 06 Feb 2020, 10:49 AM

HI Dimitar, 

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

Thanks a lot,

Grant

Tags
Scheduler
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Dimitar
Telerik team
Grant
Top achievements
Rank 2
Veteran
Iron
Share this question
or