hey,
i want to color the working hours, and make the non working hours another color and block them for events.
each unit is a different employee, so each unit has different hours… how can i make this?
i know witch funtions i need to use, but i cant get it to work… 
can somebody help me with this? thnx in advance! 
Scheduler allows to define separate classes for separate days in the view. So it really possible to define different coloring schemes for different days.
samples/02_customization/02_days_coloring.html - shows how different classes can be assigned to the different dates
samples/02_customization/03_hours_coloring.html - shows how based on custom class - specific hours can be colored
Combining above two samples will allow to color days differently for each day.
The tricky part is “unit” - in unit view week_date_class will receive dates, instead of names of units, so to get the index of unit , you will need to use something similar to the next
var index = (scheduler._props[name].position||0)+Math.floor((date.valueOf()-scheduler._min_date.valueOf())/(606024*1000));
where name - name of units view mode ( same as param in createUnitsView command )
Alternatively, you can wait few days for the version 2.2, which has timeline view, where each time cell can be colored separately.
hey… thnx for your help!
how can i make hours coloring from 12.00 PM till 13.00 PM?
do i need to make a different image for each unit/day… cant get the css to work…
can you make an example for me?
im using a timestep:
thnx in advance
do i need to make a different image for each unit/day
Yep, this is the only way, because separate cells is not accessible you can set a bg image for whole day only.
For custom time-steps you will need a custom bg image ( one from the package will not suit for your needs ) , except of it there must not be any problems
could you please make me a example (css+img) for 12PM till 1PM for unitview?
i can figure out the rest myself later…
thnx in advance…
Hey,
i´ve got the same problem as serpico.
Building custom images for every day won´t be a operable solution. So my idea was to
add a “workinghours” event that is shown in the background.
if its possible, how can i add an event that is only show in the background and is overlapped by the other events?
Building custom images for every day won´t be a operable solution.
You can check timeline view, it allows to show event-per-property view, similar to units view, and in the same time, it allows to define color for each time cell separately.
add a “workinghours” event that is shown in the background
Unfortunately there is no way, except of serious code modification.
i tried to color the timeline view but it doesn´t work.
Code from sample: “06_timeline”
Select all
.dhx_cal_event.RED div{
background-color:red !important;
color:white !important;
}
scheduler.templates.timeline_scalex_class = function(){
return "RED";
}
i´m not sure what should happen, but there is nothing changing when i add these lines!
I read the Documentaion but didn´t understand how to use the timeline templates.
Coloring in other views is no problem!
Try
.RED{
background-color:red !important;
color:white !important;
}
and
scheduler.templates.timeline_cell_class = function(c,x,y){
if (x.getHours()%3)
return "RED";
}
could you please make me a example (css+img) for 12PM till 1PM for unitview?
i can figure out the rest myself later…
thnx in advance…
hi, thnx this is a great help… do you also know how i can make save diffent templates, for different days? (connected to days of the week, 1 for monday, 1 for for tuesday etc…)
As far as I can see there is no any simple way to achieve such functionality.
This works beautifully based on duration.
Does anyone know how to color the cells differently in cell mode based on the section? I have this working in the normal timeline view but not in cell mode.
Or maybe a better question is what information can be extracted using this method:
[code] scheduler.templates.matrix_cell_class = function(ev,x,y){
if (!ev) {
var day = x.getDay();
return (day==0 || day == 6) ? “yellow_cell” : “white_cell”;
}
if (ev.length<3) return “green_cell”;
return "red_cell";
};[/code]
In other words, I know I can get ev.length but I’ve tried ev.section_id to no avail.
Any help is much appreciated!
Hello,
scheduler.templates.matrix_cell_class = function(ev,x,y){It’s not ev, but evs — array of all events which belong to the specific slot. So you can work with any of them:
for(var i=0; i<evs.length; i++){
var ev = evs[i]; // first event in the array
... // some custom logic
}
Best regards,
Ilya
Thanks for the reply. So, this should work?
scheduler.templates.matrix_cell_class = function(evs,x,y){
for(var i=0; i<evs.length; i++){
var ev=evs[i];
if(ev.type=="G"){
return "red_cell";
}
};
Hello,
Yes, in your example if one of the events in the corresponding cell has type == ‘G’, then the cell will have ‘red_cell’ css classname.
Best regards,
Ilya
Ilya,
Thanks so much for your help–this works perfectly now! Below is a sample of what I was working on, basically wanting to color cells based on the event type. I’ve attached a sample screenshot of the final product.
//===============
//Customization
//===============
scheduler.templates.matrix_cell_class = function(evs,x,y){
if (!evs) {
var day = x.getDay();
return (day==0 || day == 6) ? "yellow_cell" : "white_cell";
}
for(var i=0; i<evs.length; i++){
var ev=evs[i];
if(ev.type=="A") return "A";
if(ev.type=="B") return "B";
if(ev.type=="C") return "C";
if(ev.type=="D") return "D";
if(ev.type=="E") return "E";
if(ev.type=="F") return "F";
if(ev.type=="G") return "G";
if(ev.type=="H") return "H";
if(ev.type=="I") return "I";
if(ev.type=="J") return "J";
if(ev.type=="K") return "K";
if(ev.type=="L") return "L";
if(ev.type=="M") return "M";
if(ev.type=="N") return "N";
if(ev.type=="O") return "O";
if(ev.type=="P") return "P";
if(ev.type=="Q") return "Q";
if(ev.type=="R") return "R";
if(ev.type=="S") return "S";
if(ev.type=="T") return "T";
if(ev.type=="U") return "U";
if(ev.type=="V") return "V";
if(ev.type=="W") return "W";
if(ev.type=="X") return "X";
if(ev.type=="Y") return "Y";
if(ev.type=="Z") return "Z";
}
};
scheduler.templates.matrix_scalex_class = function(date){
if (date.getDay()==0 || date.getDay()==6) return "yellow_cell";
return "";
}
scheduler.templates["matrix_cell_value"] = function(ar){ // ar = array of events for that cell or undefined
if(ar) { // there are some events
text = '';
for(var i=0; i<ar.length; i++)
text += "<p>"+ar[i].text+"</p>";
return text;
}
return "";
};
Just thought I would share for others wanting to do something similar.
Great tool!
Thank you, dozer55!
Just what I need 
Stanislav and Ilya. Would it be lot of work to make a simular function in to the original sheduler product? I think it would gain more custommers for your product
Hello, 0liverPop.
These functions are templates used by scheduler and everyone is free to customize them the way they need. So they are already part of the product.
Or did I understand you incorrectly?
Best regards,
Ilya
