+ Start a Discussion

How to add Colors to a custom calendar cell

i' working on Ron Hess Framework Calendar to adapt it for my needs :



if you check the class Day, he defined 3 colors for cells : cssclass = active || inactive || today.

i want to add other colors, but i didn't found any css source to update it ?


Thanks for your help !


why not just override the CSS class in your local VF page? You can use Firebug or something similar to see the parent CSS elements it's inheriting.



To set the colors according to you, you have to override the css style in your page.


All you need to add following styles in your page as :


.mCalendar td a.calActive,.mCalendar .calActive{color:#666;text-decoration:none}
.mCalendar td a.calInactive,.mCalendar .calInactive{color:#ccc;text-decoration:none}
.mCalendar td a.calToday,.mCalendar tr td.calToday{font-weight:bold;background-color:#fff;border:1px solid #999}
.mCalendar tr td.calToday a{text-decoration:none}

 change the color attribute accordingto your need.


If this answers your question please mark it solved and give kudos




you're wright @SFDC_Vikash, all what i need is to change the Style mentioned in your post to my need.

the problem is, unless i've changed it, my VF page stiil inherit from the default  HomeCalendar.css !




In that case only firebug can help you out. Just make the changes in firebug css, and pick the as it is which give the result as desired by you.