data.inverseColor in event template

3 posts, 1 answers
  1. Tyler
    Tyler avatar
    19 posts
    Member since:
    Jul 2017

    Posted 15 Aug Link to this post

    I have custom event templates in my kendo scheduler, and noticed that in the template, the data variable gives you access to the event and all its fields, and one of them is inverseColor, which lets you know if the color was inversed because the background color of the event was too light/dark. 

    My issue is, when users base colors on a multi-select, where they can have multiple options selected, I manually change the event background color to the first selected option, otherwise the scheduler doesn't know what to do with multiple colors for one event. 

    When I manually change the background-color, it breaks whatever is determining inverseColor in the template... So really light colors will have white font (because default color if the scheduler can't find anything to color it is gray, which I set up).

     

    Is there a way to trigger inverse color on event templates so that even if I manually change the background color, it will recalculate that and change the font color accordingly?

  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 17 Aug Link to this post

    Hello Tyler,

    If you manually alter the background color of the event, the inverseColor functionality for the foreground color could not be applied. Nevertheless, you could manually apply (or remove) the k-event-inverse class which will invert the color of the event text. This could be done by handling the Scheduler.dataBound event:
    dataBound: function(e) {
     var events = $('.k-event:not(.k-event-inverse)');
      var dataSource = e.sender.dataSource;
       
      for (var i = 0; i < events.length; i += 1) {
        var event = $(events[i]);
        var uid = event.attr('data-uid');
        var dataItem = dataSource.getByUid(uid);
        var id = dataItem.id;
         
        // Perform a custom check to apply the k-event-inverse class
        if (id % 2 === 1) {
            event.addClass('k-event-inverse');
        }
      }
    },

    Here you will find a simple Dojo implementing the above.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tyler
    Tyler avatar
    19 posts
    Member since:
    Jul 2017

    Posted 21 Aug in reply to Veselin Tsvetanov Link to this post

    Thank you for the reply. Your solution works well, as I currently convert the background color to a 'lightness' value, and once it reaches a certain threshold (that I found the scheduler applies the inverse at), I manually change the font color, the border color, and have to find my group icon and change that color as well. Applying the inverse class should be much simpler.
Back to Top