This project is read-only.

Displaying a Simple Popup Calendar

In this tutorial, you learn how to display a popup calendar when someone moves focus to a TextBox. You can use the calendar to select a particular date.

We'll create the popup calendar by following these steps (1) Add a ToolkitScriptManager (2) Add a TextBox control (3) Add an CalendarExtender

To learn how to install the Ajax Control Toolkit, see the Download & Install page.

Add a ToolkitScriptManager

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

Add a TextBox Control

The CalendarExtender works with a standard ASP.NET TextBox control. In Design view, drag a TextBox control from under the Standard tab in the Toolbox onto your page.

Next, change the ID of the TextBox control to txtStartDate. You can change the ID in the Properties window. The resulting source code looks like this:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>

Add a CalendarExtender

The next step is to apply a CalendarExtender control to the TextBox. Add the following CalendarExtender control to your page:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>

<asp:CalendarExtender 
    ID="CalendarExtender1" 
    TargetControlID="txtStartDate" 
    runat="server" />

The following TextBox illustrates how the CalendarExtender works. Click or tab into the TextBox and the popup calendar will appear:

Click here to see the Calendar control in action

Last edited Jun 19, 2015 at 2:58 PM by tmorton, version 8