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

data.inverseColor in event template

2 Answers 249 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 15 Aug 2017, 04:30 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 17 Aug 2017, 10:46 AM
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.
0
Tyler
Top achievements
Rank 1
answered on 21 Aug 2017, 03:06 PM
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.
Tags
Scheduler
Asked by
Tyler
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Tyler
Top achievements
Rank 1
Share this question
or