Unit view random color.

Scheduler Javascript
#1

Hi, anyone can help me on this code. I’m trying to change the text color on each unit label and what ever the generated color of each unit label will be the color of each event box.

for(var i = 0; i < unit.length; i++) {
     var obj = $scope.technicians[i];
     var color = getRandomColor(), temp, event_color=color;
     scheduler.templates.unit_scale_text=function(key, label, option){
         temp = "<span style='color:#"+color+"'>" + label + "</span>";
         color=getRandomColor();
         return temp;
     };
     event_color = color;
     
     //append style to document on each loop
     var style = document.createElement('style');
     style.type = 'text/css';
     style.innerHTML = '.dhx_cal_event.'+event_color+' div {background-color:#'+event_color+'; }';
     document.getElementsByTagName('head')[0].appendChild(style);
     
     //should return what ever the text color of unit label
     scheduler.templates.event_class = function(start,end,ev){
	 return event_color;
     };
}

//generate the random color
function getRandomColor() {
     var letters = '0123456789ABCDEFGHIJK'.split('');
     var color = '';
     for (var i = 0; i < 6; i++ ) {
         color += letters[Math.round(Math.random() * 15)];
     }
     return color;
}

typically on that code i loop the size of the unit that are given then each generated color place it to span and then return it (this is successful).

with the same loop the second goal will be what ever the color of the unit text will create class then append it to document. then return that class name as event_class to modified the background color of eventbox (this is unsuccessful).

Check my attachment.
Any other way to do it? Please help. Thanks

screen_2014-03-21 16.06.33.jpg967×342 48.8 KB

#2

Hello,
try following code:

[code]scheduler.attachEvent(“onBeforeViewChange”, function(){
var html = [];
//generate all colors at once, bind class name to section id instead of color value
for(var i = 0; i < unit.length; i++) {
var color = getRandomColor();
html.push(’.dhx_cal_event.section_’+unit[i].key+’ div{background-color:#’+color+’; }’);
html.push(’.dhx_cal_event_line.section_’+unit[i].key+’{background-color:#’+color+’; }’);
html.push(‘span.section_’+unit[i].key+’ {color:#’+color+’; }’);

}

updateStyleNode(html.join("\n"));
return true;

});
scheduler.templates.unit_scale_text=function(key, label, option){
var temp = “” + label + “”;
return temp;
};
scheduler.templates.event_class = function(start,end,ev){
return ‘section_’ + ev.section_id;
};

function updateStyleNode(css){
var style = document.getElementById(“event_colors”) || document.createElement(‘style’);
style.id = “event_colors”;
style.type = ‘text/css’;

style.innerHTML = css;
if(!style.parentNode){
	document.getElementsByTagName('head')[0].appendChild(style);
}

}

//generate the random color
function getRandomColor() {
var letters = ‘0123456789ABCDEFGHIJK’.split(’’);
var color = ‘’;
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}[/code]The main differences from your initial implementation is that all colors are generated and pushed to style element before view is rendered. The code uses ‘onBeforeViewChange’ event, which means styles will be regenerated each time you switch or scroll the view.

Class names for sections and events are always the same - it goes as ‘section_’+‘id of the section’, it seems like more straightforward approach then binding to color value. It allows to have simpler templates for section label and event class - knowing the section id you can always return a correct class.

In the code abowe i’ve assumed that ‘unit’ variable is an array of units ( {key:section_id, label:section_label} objects), and that unit view has been initialized with property:“section_id” setting.

#3

thank you, that worked!. What if I don’t want to change the color every time the view is changed? What should i replace to “onBeforeViewChange”? thanks,

#4

Hi,
try ‘onTemplatesReady’
docs.dhtmlx.com/scheduler/api__s … event.html

Btw, you may get better distribution of colors if you select values using HSL or HSV color model. Picking ‘Hue’ value from [0…1] or [0…360] range (depending on model) will give you good color with given lightness and saturation. http://en.wikipedia.org/wiki/HSL_and_HSV

There is lot of samples for HSL(or HSV) to RGB conversion in JS in the web, for example here on SA stackoverflow.com/questions/2353 … conversion , so implementation shouldn’t be a problem