You are currently browsing the category archive for the ‘ASP.NET Ajax Popup Calendar’ category.

Objective: This article describes how to ad an Ajax popup calendar to a textbox with the help of the AjaxControlToolkit. This is a simple demonstration with nothing but the required elements on the page so we can study the code and not get confused by other distracting elements. In a future article we’ll explore how to add such component to your insert and update forms.

Background: A simple and elegant client side popup calendar is sometimes an essential element of an insert or update form that allows the user to select a date using a calendar. With the help of the AjaxControlToolkit library and a few drag and drop elements, it takes but a minute to add a sophisticated popup calendar to our web form. We can even further enhance this component by adding validation controls to make sure that dates are entered in with just the right formatting. In classic ASP, this used to be a tedious process having to write the entire javascript application, then making sure the script played nice with other javascript on the page or to find just the right script on the web and remembering how to use it properly every time you needed it in your forms. Well, fortunately those days are over.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008 with the AjaxControlToolkit library.

  1. Create a new web form page in your site.
  2. Before anything else, drag and drop an Ajax ScriptManager onto your page like shown below.

    ajax-scriptmanager

  3. Below the Ajax ScriptManager, drag and drop a TextBox control and set its ID to “Date1″.
  4. Drag and drop an ImageButton control next to the TextBox and set its ID to “Image1″ and its alternate URL property to “Click to show calendar”.
  5. Create a new folder in your site and name it Images (if you haven’t done it already).
  6. Then right click and save this image Calendar_scheduleHS  and drop it into the image folder in your site.
  7. Go back to the page and set the ImageButton’s Image URL property so it points to the calendar image you saved in your Images folder. Your page should look something like the image below.

    aspnet-popup-calendar

  8. Now while in code view, go to your AjaxControlToolkit tab of your Toolbox and drag and drop a Calendar Extender under the code of the image button like shown on the image below. Set its ID to “calendarButtonExtender”, the TargetControlID to “Date1″ and the PopupButtonID to “Image1″.

    calendar-extender-control

  9. Now let’s do one last thing. Open the web.config file and make sure that you have the following line between the <controls> tags:
    <add tagPrefix=”ajaxToolkit” namespace=”AjaxControlToolkit” assembly=”AjaxControlToolkit”/>
    If its already in there, fine, if not, copy and paste it in there. This will register the ajax control toolkit with your site. Otherwise it won’t work and you’ll get an error message.

Finally, below is the code for the entire page in case you’ve missed something and also an image of what it should look like when you load the page in your browser.

aspnet-popup-calendar-2

<%@ Page Language="VB" %>

<%@ Register namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <!-- ..................Ajax Calendar Popup Start...................-->
        <!-- ajax scriptmanager -->
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        click icon for calendar:
        <br />
        <!-- textbox for calendar popup -->
        <asp:TextBox runat="server" ID="Date1" />
        <!-- calendar image button -->
        <asp:ImageButton runat="Server" ID="Image1" 
         ImageUrl="~/images/Calendar_scheduleHS.png" 
         AlternateText="Click to show calendar" />
         <br />
        <!-- ajax calendar extender --> 
        <ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" 
         TargetControlID="Date1" 
         PopupButtonID="Image1" />
        <!-- ..................Ajax Calendar Popup End.................... -->
          
    </div>
    </form>
</body>
</html>

That’s it! Enjoy.

Follow

Get every new post delivered to your Inbox.