Styling events from bootstrap theme

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

    Posted 04 Feb Link to this post

    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. Answer
    Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 06 Feb 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 (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.
  3. Grant
    Grant avatar
    163 posts
    Member since:
    Jul 2016

    Posted 06 Feb 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,

    Grant

Back to Top