Styling events from bootstrap theme

3 posts, 1 answers
  1. Grant
    Grant avatar
    179 posts
    Member since:
    Jul 2016

    Posted 04 Feb 2020 Link to this post


    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,

    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?


  2. Answer
    Dimitar avatar
    809 posts

    Posted 06 Feb 2020 Link to this post

    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 ( !== 0) {
          style = event.isRelated ? 'p-event-related': 'p-event-unrelated';

    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.

    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.
  3. Grant
    Grant avatar
    179 posts
    Member since:
    Jul 2016

    Posted 06 Feb 2020 in reply to Dimitar Link to this post

    HI Dimitar, 

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

    Thanks a lot,


Back to Top