Recently, while working on my Tai Chi club’s website, I realized that my club’s website is lacking the capability of scheduling a Tai Chi class (or any other type of event for that matter). In order to schedule any type of event, I would need to specify that event’s date and time, location, and maybe some kind of description or explanation of what’s going to be happening during that event. So, I started looking at different ways to create a Date Picker. After some research, I found out that it is very easily achieved with Ajax Control Toolkit, which provides CalendarExtender control.
The CalendarExtender control is designed to extend a TextBox. Its default behavior prompts the end user to pick a date from a calendar when the user clicks inside a textbox associated with the CalendarExtender.
This is what it looks like: 
It is also possible to add a button to the right of the textbox and have the calendar popup whenever the user clicks that button (all you need to do is specify the button's ID as value of PopupButtonID property).
To customize the look of the popup calendar, add all or some of the following classes to your stylesheet and customize them appropriately:
To achieve the look above, I added the following class to my stylesheet:
.ajax__calendar_active
{
border: solid 2px green;
font-weight: bold;
}
and then in my page’s Page_Load event added the following line of code:
this.CalendarExtender1.SelectedDate = DateTime.Today;
.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.
