This is how standard service calendar looks like:
Today I was asked by a customer if it is possible to change the colorizing schema of Service Calendar. I started to look for information about it and found the following article – http://msdn.microsoft.com/en-us/library/gg309501.aspx
Unfortunately, I wasn’t able to understand how to do it on my first attempt, so I contacted Microsoft to get some clarification and help. I’m really appreciated that Jim Daly got in touch with me and gave some explanations regarding the SDK article. I will share with you the results I got in this article.
Follow the steps to change the appearance of the Service Calendar:
1. Create a css webresource with Display Name AppointmentBookConfig and put the following CSS inside:
Note: Display Name of webresource has to be AppointmentBookConfig!!!
div.ganttBlockserviceappointmentStatus1 { border: 1px solid #FF0000; FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0000',endColorstr='#FF0000'); background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 100%); background: -webkit-linear-gradient(top, #FF0000 0%,#FF0000 100%); background: -ms-linear-gradient(top, #FF0000 0%,#FF0000 100%); background: linear-gradient(top, #FF0000 0%,#FF0000 100%); } div.ganttBlockserviceappointmentStatus2 { border: 1px solid #00FF00; FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FF00',endColorstr='#00FF00'); background: -moz-linear-gradient(top, #00FF00 0%, #00FF00 100%); background: -webkit-linear-gradient(top, #00FF00 0%,#00FF00 100%); background: -ms-linear-gradient(top, #00FF00 0%,#00FF00 100%); background: linear-gradient(top, #00FF00 0%,#00FF00 100%); } div.ganttBlockserviceappointmentStatus3 { border: 1px solid #0000FF; FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0000FF',endColorstr='#0000FF'); background: -moz-linear-gradient(top, #0000FF 0%, #0000FF 100%); background: -webkit-linear-gradient(top, #0000FF 0%,#0000FF 100%); background: -ms-linear-gradient(top, #0000FF 0%,#0000FF 100%); background: linear-gradient(top, #0000FF 0%,#0000FF 100%); } div.ganttBlockserviceappointmentStatus4 { border: 1px solid #FFFF00; FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFF00',endColorstr='#FFFF00'); background: -moz-linear-gradient(top, #FFFF00 0%, #FFFF00 100%); background: -webkit-linear-gradient(top, #FFFF00 0%,#FFFF00 100%); background: -ms-linear-gradient(top, #FFFF00 0%,#FFFF00 100%); background: linear-gradient(top, #FFFF00 0%,#FFFF00 100%); } div.ganttBlockserviceappointmentStatus6 { border: 1px solid #FF00FF; FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF00FF',endColorstr='#FF00FF'); background: -moz-linear-gradient(top, #FF00FF 0%, #FF00FF 100%); background: -webkit-linear-gradient(top, #FF00FF 0%,#FF00FF 100%); background: -ms-linear-gradient(top, #FF00FF 0%,#FF00FF 100%); background: linear-gradient(top, #FF00FF 0%,#FF00FF 100%); } div.ganttBlockserviceappointmentStatus7 { border: 1px solid #00FFFF; FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFF',endColorstr='#00FFFF'); background: -moz-linear-gradient(top, #00FFFF 0%, #00FFFF 100%); background: -webkit-linear-gradient(top, #00FFFF 0%,#00FFFF 100%); background: -ms-linear-gradient(top, #00FFFF 0%,#00FFFF 100%); background: linear-gradient(top, #00FFFF 0%,#00FFFF 100%); } div.ganttBlockserviceappointmentStatus8 { border: 1px solid #7F7F7F; FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7F7F7F',endColorstr='#7F7F7F'); background: -moz-linear-gradient(top, #7F7F7F 0%, #7F7F7F 100%); background: -webkit-linear-gradient(top, #7F7F7F 0%,#7F7F7F 100%); background: -ms-linear-gradient(top, #7F7F7F 0%,#7F7F7F 100%); background: linear-gradient(top, #7F7F7F 0%,#7F7F7F 100%); }
Note: div classes since UR 12 CRM 2011 are case sensitive so be attentive!!!
3. Reload the Service calendar and check that changes were applied according to your webresource:
Hi ,
Let me know if I can put Appointment color based on the contact’s gender.
Thanks,
Parashuram
Parashuram,
AFAIK that’s not possible for this engine.
Andrew