AJAX Calendar Extender CSS Theme

Updated on 17 Apr 2012,
Published on 27 May 2008

Introduction

In the previous article we discussed about the different properties of AJAX control toolkit calendar control such as data format, FirstDayOfWeek, SelectedData etc. Here we will discuss about the customization of Calendar control using CssClass property to change its look and feel. If there is no value defined for CssClass property of calendar control then it appears with default CSS styles. Default CSS for the calendar control is already embedded as a WebResource which is a part of AJAX control toolkit assembly. If you will specify the CssClass property value associated with styles defined in the attached CSS file then it overrides the default CSS classes.

AJAX Control Toolkit Examples:

You can see the live samples and examples of AJAX Control Toolkit from the following links:

Calendar Control CSS Theme Customization

AJAX Calendar control has a set of CSS classes that you can override by using new styles. To do this you need a new name for user defined class for example .cal_Theme1 and associate it with the default names of CSS classes to override the default styles. After setting the values for default CSS classes associated with user defined CSS class name, you can set that class name in the CssClass property of the Calendar control.

Following are the default CSS classes to adjust the look and feel of different elements of calendar control: 

.ajax__calendar_container

you can change the style of outer container of calendar control. Outer container holds the .ajax__calendar_header, .ajax__calendar_body, .ajax__calendar_footer as child container css classes.

.ajax__calendar_header

This css class holds the previous arrow, next arrow and current Month, Year. Child Css Classes are .ajax__calendar_prev, .ajax__calendar_next, .ajax__calendar_title.

.ajax__calendar_prev

This class is associated with an element that displays the left side arrow to view the previous month, year or decade based on the current view of calendar.

.ajax__calendar_title

This class is associated with an element that displays the month name, year or decade range according to the current view of the calendar control.

.ajax__calendar_next

This class is associated with an element that displays the right side arrow to view the next month, year or decade based on the current view of calendar.

.ajax__calendar_body

It is a container of the elements for displaying the different views of calendar such as month view, year view and day view. This class holds the .ajax__calendar_days, .ajax__calendar_months and .ajax__calendar_years as child css classes

.ajax__calendar_days

It changes the look of day view of month. Child Css Classes are .ajax__calendar_dayname and .ajax__calendar_day.

.ajax__calendar_dayname

It changes the look of day name at the top of day view of month.

.ajax__calendar_day

This class is associated with the day layout of month.

.ajax__calendar_months

It controls the month layout of month view. Child Css class is .ajax__calendar_month.

.ajax__calendar_month

It controls the look and feel of month names of month view.

.ajax__calendar_years

This class controls the layout of year view of calendar control. Child css class: .ajax__calendar_year.

.ajax__calendar_year

It changes the look and feel of years in the year layout of year view.

.ajax__calendar_footer

It is associated with Footer container that holds the current date.

.ajax__calendar_today

It displays the current date in the footer container of calendar control.

.ajax__calendar_hover

Dynamic color behavior onmouseover can be modified by using this class. It can be used with .ajax__calendar_title, .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year, .ajax__calendar_today to change the mouse over behavior.

.ajax__calendar_active

It sets the style of currently selected date.

.ajax__calendar_other

It sets the style of day, month name or year that is outside the current view e.g. days that don’t belong to the currently visible month.

Continue to next tutorial: Customized AJAX Calendar Control CSS Example to learn how to use the CSS styles to change the appearance of AJAX Calendar Control.

1 Responses to "AJAX Calendar Extender CSS Theme"
marcos gil
useful help for us. very good utilities
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email