Start Building Professional
Web Apps Today

Setting color to events in dhtmlxScheduler

Hi,

How can we set separate color for each event added in the scheduler? Right now the color is common (#FFE763) for all the events added. How can we change this for each event.

Great tool :)

Thanks
Siva

Please check document, attached to the next post
     http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&page=1&q=10285&ssr=yes&s=event%20color

Hi

Thank you for your time.
My original  requirement is when a user add an event/schedule he/she can be able to select a color.
I am attaching a screenshot what i am thinking. In the picture you can see profiles P1,P2 and p3. when user select a profile say P1 and create a event box the box will have the orange color , when user clicks on profile P3 and then create an event the color will be yellow similar to profile P2. Also i would like to save the color/profile id  in databse so that i can redraw the saved one with selected color.
Please let me know if you have any ideas and suggestions.

Thanks again
Siva

The same approach , which described in above article can be used in your case. 

You can define additional property "color" in server side code 

$scheduler->render_table("events","event_id","start_date,end_date,event_name,color"); // color field in db

and on client side 

scheduler.config. lightbox={
sections:[ {name:"description", height:200, map_to:"text", type:"textarea" , focus:true},
               {name:"color_name", height:200, map_to:"color", type:"select" , options:[
{key:"red", label:"red"},
{key:"blue", label:"blue"},
{key:"green", label:"green"},
                 ]},
               {name:"time", height:72, type:"time", map_to:"auto"} ]
}

scheduler.templates.event_class=function(start,end,event){
     return event.color;
}

and as last step - define color rules 


/*event in day or week view*/
 .dhx_cal_event.red div{
  background-color:red !important; 
color:white !important;
}
/*multi-day event in month view*/
 .dhx_cal_event_line.red{
  background-color:red !important; 
color:white !important;
 }

same for other used colors

Hi

Thank you... let me modify as you suggested.

Regards
Siva