Setting color to events in dhtmlxScheduler

Scheduler Javascript
#1

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 :slight_smile:



Thanks

Siva





#2

Please the following article https://docs.dhtmlx.com/scheduler/custom_events_color.html

#3

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




profile.JPG850×518 47.6 KB

#4

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

#5

Hi

Thank you… let me modify as you suggested.

Regards
Siva

#6

Thanks Dear, Your code is successfully work.

#7

Any will tell how to set the end time automatically according to select the events

#8

You can alter end time from onEventSave handler, in this point you have all info from lightbox and can modify the data in necessary way before real in-DB saving.

#9

hi Stanislav,
i am understanding what u say,but how we change in .js file i don’t know. if u define clearly. how change the .js file.
Thanks

#10

You need not change anything in original js files
Just add extra code on the page like next

scheduler.attachEvent("onEventSave", function(id, data){ //you can modify event properties based on your business rules if (data.section_id = 1) data.end_date = scheduler.date.add(data.start_date, 1, "day"); })

#11

hi Stanislav,
i am new in dhtmlx. if i add your code in .js file the save button is not working.
i am attaching our .js code.please correct in your way.
Thanks

#12

Please check and modify the attached file . according to problem .
Thanks

#13

If issue still occurs - please provide demo link or any other kind of sample, where issue can be reconstructed.