AJAX Control Toolkit Calendar Extender

Updated on 18 Apr 2012,
Published on 26 May 2008

Calendar Extender of AJAX Control Toolkit for ASP.Net 2.0 frameworks provides the AJAX based client side functionality to pick the date from popup calendar extender control. You can customize the date format and also the style of calendar user interface using CSS. AJAX Calendar control sets the date clicked by the user into the associated Textbox.

AJAX Control Toolkit Examples:

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

Drag and Drop the calendar extender on the AJAX enabled aspx page. Here AJAX enabled aspx page means the web page having AJAX script manager on the top of the page. Calendar extender will just show the placeholder in design view of web page. Next drag and drop the standard TextBox server control. By default Textbox will have its ID as TextBox1 and Calendar extender’s ID as CalendarExtender1. In the next step adjust the following properties of Calendar extender according to your requirement:

Animate: Accepts value as true/false. If true then it animates the calendar actions.

FirstDayOfWeek: It is an enumerator type collection that specifies to display the first of week in the calendar at runtime.

Format: You can set the different date formats using date formats e.g.: MMM dd, yyyy; MMM DDD dd, yyyy.

PopUpButtonID: You can specify the ID of image control, button control or linkbutton control to popup the calendar control. If PopUpButtonID is not specified then Calendar control popups when associated textbox gets focus.

PopUpPosition: This property sets the position of calendar control, that where should it appear such as BottomLeft of textbox, BottomRight, TopLeft, TopRight, Right or Left.

SelectedDate: You can specify the default date for the Calendar using SelectedDate Property. Calendar control initializes with the specified date.

TargetControlID: Specify the target TextBox ID in this property that will display the user selected date in the specified date format.

How to Use Calendar Extender on Web Page

When Calendar control appears it displays the default view having Month Name and Year at Top along with left and right arrow. You can use left and right arrow to shift to previous or next month regarding the current day view.

If you will click on the Month Name and Year at top then calendar control will switch to the month view. You can select the month of year specified for the calendar control or current year by default.

If you will click on the Year at top then the Calendar control will switch to the year view.

 

Example

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" Width="200px"></asp:TextBox>
<asp:Image ID="Image1" runat="server" ImageUrl="images/Calendar.png" />
<ajaxtoolkit:CalendarExtender ID="CalendarExtender1" 
    runat="server" 
    PopupPosition="Right"
    PopupButtonID="Image1" 
    TargetControlID="TextBox1">
</ajaxtoolkit:CalendarExtender>
<asp:TextBox ID="TextBox2" runat="server" Width="200px"></asp:TextBox>
<ajaxtoolkit:CalendarExtender ID="CalendarExtender2" 
    runat="server" 
    PopupPosition="Right"
    PopupButtonID="TextBox2" 
    TargetControlID="TextBox2" 
    Format="dddd, MMMM dd, yyyy">
</ajaxtoolkit:CalendarExtender>

Output:

You can see the output of above discussed code from the following link:

AJAX Calendar Control

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

16 Responses to "AJAX Control Toolkit Calendar Extender"
james
how to make the default view to year view
Francisco
Hello,

I'm having a problem with the Calendar Extender, I hope you can help Me. It seems that the the Extender doesn't keeps the state value. For instance, if I set "myCal_Extender.selectedDate = Now().addDays(1)", then change the date in the form, and post it, the textbox returns to Today+1. That is, it doesn't keep the viewstate. Also, If in the post-back I try to read the SelectedDate property of the extender it gives me the original one, not the new.

Regards,
Francisco
Ezineasp.net
Hi Francisco You can try the following VB code snippet for your issue of AJAX calendar extender control: **************************************************** **************************************************** Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load ' At the Page Load Event Check if its PostBack or not If Not IsPostBack Then myCal_Extender.SelectedDate = Now.AddDays(1) End If End Sub Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click lblDateTime.Text = txtDateTime.Text ' reset the SelectedDate Property of Calendar Extender 'while executing post back event myCal_Extender.SelectedDate = Convert.ToDateTime(txtDateTime.Text) End Sub **************************************************** **************************************************** You need to set the SelectedDate property of calendar extender equal to the textbox value at the time of postback event so that it could override the old value each time. Hope this will work for you. Good Luck
Francisco Gutierrez
Thank you! That solved my problem, although I had to put a temp var of DateTime type: Dim FechaPub As DateTime FechaPub = Convert.ToDateTime(datppFechaPubText.Text & " 00:00") datppFechaPub.SelectedDate = FechaPub Regards, Francisco
venkatesh bojja
if i selected May of 2010 i dont want to see the dates of April and June.i want only dates from May(1st to 31st)
sachet
hi m not able to use the ajax calender contol when i copied the above code it give me the error that tag prefix is not registered in this web form . could any one suggest me how to use the control....!
Ezineasp.net
Hi Sachet

Please check if your system is installed with AJAX extensions and AJAX Control toolkit. If yes, then create a sample AJAX toolkit enabled website to try this calender extender.

If you are already working with AJAX enabled web application then check the following code line in the web.config file under the <pages>/<controls> nodes:

<add namespace="AjaxControlToolkit"
assembly="AjaxControlToolkit"
tagPrefix="ajaxToolkit"/>

You must use the tagPrefix defined in the web.config e.g. "ajaxToolkit" as shown above. If the tagPrefix defined in your web.config file is "asp" then you can change the control prefix to "asp", that is used in the ASP.Net web page.

Hope this will work for you.

Good Luck ;)
v.priya
hi i have a problem for highlighting the current day in ajax calender control using asp.net please replay the answer with code
Satish Deverkonda
how can i restrict user so that user cannot select date 45 days older than current date ..........please help me out any one...
Satish Deverkonda
finally i got solution for that ---javascript code for it function checkDate(sender, args) { var minDate = new Date(); minDate.setDate(minDate.getDate() - 45); if (sender._selectedDate < minDate) { alert("You cannot select a day earlier than 45 days!"); sender._selectedDate = new Date(); // set the date back to the current date sender._textbox.set_Value(sender._selectedDate.format(sender._format)) } }
Hiba
for the sample given, try to select date= 27/3/2011
it will show 26/3/2011 as selected.Why might this happen???
thanks
santa
how to use ajax control ? please let me know the summary.
Maurizio
Hello, I've the same problem of Francisco, but in my case it seems that the textbox dosen't keep the state after the postback. So when I read the text property it is void.
Ezineasp.net
@Maurizio Hi Please check your page load event whether you have used the IsPostBack condition there or not!?
squiel
@Maurizio Hi Textbox on readonly not work
Ranju
Hi I want to Ajax Calander output Date format in As May 14, 2012
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email