data.inverseColor in event template

[Tyler]

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?

[Veselin Tsvetanov]

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

[Tyler]

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.