Click here to Skip to main content
15,868,164 members
Articles / Web Development / ASP.NET

Ajax Calendar Control

Rate me:
Please Sign up or sign in to vote.
4.46/5 (9 votes)
14 Apr 2009CPOL3 min read 226K   9.6K   37   16
Discussion of how the calendar control works using Ajax

Introduction

This article shows how to configure the Ajax Calendar control.

Background

The Ajax toolkit has many different controls in it, this article only explains one. You can get the toolkit at Microsoft from here.

Using the Code

The code will show a few different ways to use the calendar. The screen shot shows how each one is displayed.

main

The first calendar is a standard one with no changes whatsoever. The control just passes the selected date to the text box. The code is outlined below:

ASP.NET
<b>Normal Control:</b>
<asp:TextBox runat="server" ID="txtDate1" />
<ajaxtoolkit:calendarextender runat="server" ID="calExtender1"
                                        TargetControlID="txtDate1"/>

This will display a calendar which looks like this. When you put the cursor in the textbox, the calendar will be displayed.

scr1

The second calendar has a button, uses a style sheet, and has unique formatting. We are now starting to add additional commands to the control.

ASP.NET
<b> Control with PopupButtonID, CssClass,Format:</b>
<asp:TextBox runat="server" ID="txtDate2"  Text="11/01/2006" />
<asp:Image runat="server" ID="btnDate2"
            AlternateText="cal2"
            ImageUrl="~/images/calendaricon.jpg" />
<ajaxtoolkit:calendarextender runat="server" ID="calExtender2"
            PopupButtonID="btnDate2"
            CssClass="AjaxCalendar"
        TargetControlID="txtDate2" Format="MMMM d, yy" />

This will display a calendar that looks like this. You now have a calendar with different colors, and once you select the date, the date in the text box will be in a different format than what was there originally.

screen2

The third control just has the calendar displayed in a different position.

ASP.NET
<b>Control with topright:</b>
<asp:TextBox ID="txtDate3" runat="server" Width="70"> </asp:TextBox>
<ajaxtoolkit:calendarextender ID="calExtender3" runat="server"
    PopupButtonID="btnDate3" PopupPosition="TopRight"
    TargetControlID="txtDate3" >
</ajaxtoolkit:calendarextender>
<asp:ImageButton ID="btnDate3" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server" />

Notice the properties are very similar to what we have been using. The only thing different that is new is the PopupPosition.

screen3

The fourth control makes sure we do not enter a date that is before today. To do this, you need to have HTML to have the textbox and the ASP control but also JavaScript to check the date to see if it is valid. Once you add the OnClientDateSelectionChanged property and the date is selected, the JavaScript checkDate is executed. If the date that the user selected is before today, an error is displayed and today's date is entered into the textbox.

ASP.NET
<b>Control with no date earlier than today:</b>
<asp:TextBox ID="txtDate4" runat="server" Width="70"></asp:TextBox>
<ajaxtoolkit:calendarextender ID="calExtender4" runat="server"
    PopupButtonID="btnDate4" PopupPosition="TopRight"
    TargetControlID="txtDate4" OnClientDateSelectionChanged="CheckDateEalier">
</ajaxtoolkit:calendarextender>
<asp:ImageButton ID="btnDate4" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server"  />

The JavaScript

JavaScript
<title>Ajax Calendar Control</title>
<script type="text/javascript">
function CheckDateEalier(sender,args) {
    if (sender._selectedDate < new Date()) {
         alert("You cannot select a day before today!");
         sender._selectedDate = new Date();
         // set the date back to the today
         sender._textbox.set_Value(sender._selectedDate.format(sender._format))
    }
}
</script>

When you select the date that is before today's date, all you get is a messagebox with an error.

screen4

This all started with I wanted to display a calendar control and have today's date outlined in the control if nothing was already entered in the textbox. It took a lot of web pages to read to get to this last control. This control uses the OnClientShowing property. Once the JavaScript DisplayDate gets called, see if the date is null which means nothing was entered in the textbox, and then set today's date in the control. Easy huh?

ASP.NET
<b>Control with todays date :</b>
<asp:TextBox ID="txtDate5" runat="server" Width="70"></asp:TextBox>
<ajaxtoolkit:calendarextender ID="calExtender5" runat="server"
    PopupButtonID="btnDate5" PopupPosition="Right" OnClientShowing="DisplayDateToday"
    TargetControlID="txtDate5" >
</ajaxtoolkit:calendarextender>
<asp:ImageButton ID="btnDate5" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server"  />

The JavaScript

JavaScript
<title>Ajax Calendar Control</title>
<script type="text/javascript">
function DisplayDateToday(sender, args) {
    if (sender._selectedDate == null) {
        sender._selectedDate = new Date();
    }
}
</script>

Style Sheet

I used this style sheet for calendar 2. I only used a few to show the basic principles. There are many more which I cannot go into here.

CSS
.AjaxCalendar .ajax__calendar_container
{
	border:1px solid #646464;
    background-color: yellow;
    color: red;
}

.AjaxCalendar .ajax__calendar_other .ajax__calendar_day,
.AjaxCalendar .ajax__calendar_other .ajax__calendar_year
{
	color: Black;
}

.AjaxCalendar .ajax__calendar_hover .ajax__calendar_day,
.AjaxCalendar .ajax__calendar_hover .ajax__calendar_month,
.AjaxCalendar .ajax__calendar_hover .ajax__calendar_year
{
	color:  White;
}

.AjaxCalendar .ajax__calendar_active .ajax__calendar_day,
.AjaxCalendar .ajax__calendar_active .ajax__calendar_month,
.AjaxCalendar .ajax__calendar_active .ajax__calendar_year
{
	color: Purple;
	font-weight:bold;
}

Calendar Properties

Here are a few of the properties you will encounter in the property page of the control along with a brief description of what they do:

  • TargetControlID - The ID of the TextBox for the calendar
  • CssClass - Name of the CSS class used to style the calendar
  • Format - The string that holds the Format to display
  • PopupButtonID - The ID of a control to show the calendar popup when clicked. If the value is not set, the calendar will pop up when the textbox receives focus.
  • PopupPosition - Indicates where the calendar popup should appear
    • BottomLeft (default)
    • BottomRight
    • TopLeft
    • TopRight
    • Left
    • Right
  • SelectedDate - Indicates the date the Calendar will be initialized to
  • FirstDayOfWeek - What day to use as the first day of the week
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
    • Default

Points of Interest

The first item I learned was that you can drop the AjaxControlToolkit.dll onto the Visual Studio toolbox and have all of the controls listed. I created a new tab to make it easier for me. The second is you can find the information you need if you look hard enough. I read many, many web pages to get this information and want to thank everyone whose web page I read.

History

  • 9 April 2009 - Initial release

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
I am a Director of Engineering, have an MBA and work in C# forms, Asp.Net and vb.net. I have been writing Windows program since windows 3.0. I am currently working in the Healthcare industry.

I enjoy reading, music (most types), and learning new technology. I am involved in opensource projects at codeplex.

My linkedin link is
http://www.linkedin.com/in/donsweitzer

Comments and Discussions

 
QuestionAjaxtoolkit Calendar ExControl Error Pin
Chris A Clarke1-Aug-14 5:05
Chris A Clarke1-Aug-14 5:05 
Questionwhere i have to write code for styles to bind it to ajax control Pin
harinisure5-Feb-13 18:53
harinisure5-Feb-13 18:53 
Questionsimple ajax/js calendar Pin
shanid36015-Jun-12 22:56
shanid36015-Jun-12 22:56 
http://rockingshani.blogspot.in/search/label/Simple%20Popup%20calendar%20using%20JS%2FAjax[^]
GeneralCalendar Control Goes behind the iFrame [modified] Pin
NikhilS28-Jul-10 6:54
NikhilS28-Jul-10 6:54 
GeneralRe: Calendar Control Goes behind the iFrame Pin
Donsw2-Aug-10 14:00
Donsw2-Aug-10 14:00 
GeneralRegarding Ajax Calendar Control Pin
dayakar_dn29-Apr-10 2:04
dayakar_dn29-Apr-10 2:04 
GeneralRe: Regarding Ajax Calendar Control Pin
Donsw14-May-10 2:27
Donsw14-May-10 2:27 
GeneralCalander Control not work when Page in IFrame Pin
Member 21183246-Aug-09 3:45
Member 21183246-Aug-09 3:45 
GeneralRe: Calander Control not work when Page in IFrame Pin
Donsw10-Aug-09 1:07
Donsw10-Aug-09 1:07 
GeneralRe: Calander Control not work when Page in IFrame Pin
zayootha13-Sep-09 15:21
zayootha13-Sep-09 15:21 
GeneralRe: Calander Control not work when Page in IFrame Pin
Donsw14-Sep-09 1:03
Donsw14-Sep-09 1:03 
Questionhow to retrieve the value? Pin
jtaylor17830-Jun-09 7:17
jtaylor17830-Jun-09 7:17 
AnswerRe: how to retrieve the value? Pin
jtaylor17830-Jun-09 15:09
jtaylor17830-Jun-09 15:09 
QuestionThe value? Pin
gstolarov14-Apr-09 18:36
gstolarov14-Apr-09 18:36 
AnswerRe: The value? Pin
Pablo Robert15-Apr-09 1:02
Pablo Robert15-Apr-09 1:02 
GeneralRe: The value? Pin
Donsw16-Apr-09 4:38
Donsw16-Apr-09 4:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.