How to Style the Ajax Control Toolkit Calendar Extender control

The calendar extender control straight out of the box is a bit boring. More of you should be styling the control. The following may help you style this control a little.

Use a web palette to select your colors. I used this one:http://oreilly.com/catalog/wdnut/excerpt/web_palette.html for no particular reason. There are literally thousands of palettes out there. The preference has generally been to use 256 colour palette. Stylesheets have been optimised so that you can use 3 hex digits to represent colours. For example, color: #f69 is equivalent to color: #ff6699.

Calendar Styled

 I have deliberately made this ugly with each section coloured differently so it’s easier for you to restyle.

I added a CssClass to the Calendar Extender control, called “custom-calendar”.

The following are the styles I applied to this Calendar.

view source



print?




01
.custom-calendar .ajax__calendar_container




02
{




03
 background-color:#ffc; /* pale yellow */




04
 border:solid 1px #666;




05
}




06
.custom-calendar .ajax__calendar_title




07
{




08
 background-color:#cf9; /* pale green */




09
 height:20px;




10
 color:#333;




11
}




12
.custom-calendar .ajax__calendar_prev,




13
.custom-calendar .ajax__calendar_next




14
{




15
 background-color:#aaa; /* darker gray */




16
 height:20px;




17
 width:20px;




18
}




19
.custom-calendar .ajax__calendar_today




20
{




21
 background-color:#cff;  /* pale blue */




22
 height:20px;




23
}




24
.custom-calendar .ajax__calendar_days table thead tr td




25
{




26
 background-color:#ff9; /* dark yellow */




27
 color:#333;




28
}




29
.custom-calendar .ajax__calendar_day




30
{




31
 color:#333; /* normal day - darker gray color */




32
}




33
.custom-calendar .ajax__calendar_other .ajax__calendar_day




34
{




35
 color:#666; /* day not actually in this month - lighter gray color */




36
}

Posted in: Ajax,CSS