Customization

Microsoft CRM 2011/2013: Colorizing Service Calendar

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!!!

2. Save and publish this webresource.

3. Reload the Service calendar and check that changes were applied according to your webresource:

2 Comments

  1. Hi ,
    Let me know if I can put Appointment color based on the contact’s gender.

    Thanks,
    Parashuram

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.