AJAX Control Toolkit Tutorial: Calendar Extender - Part Twelve

AJAX Control toolkit Calendar Control is an extender control that works with some input field to extend its functionality. It provides client side scripting functionality with customizable date format and User Interface.

You can select the date after opening extender by clicking on the date to set or Today link for populating Today's date. Hope you raise a question here about how we move back and forth to the months or years to select the required date.

You can move back and forth between months by clicking on the left and right arrow buttons, and by clicking on the Title of the calendar you can change the view from days to months and then another click to years to select the date. The same procedure reverses once you selected the required year from past or future year to months and then finally day selection.

So let’s start it to implement it in our code and check the initial look.

First we required a textbox where the extender appears.

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

Then add Ajax control kit calendar control.

<div class="row">
    <div id="ajaxcontroltoolkitplaceholder">
        <ajaxToolkit:CalendarExtender runat="server" TargetControlID="Date1" CssClass="ClassName" Format="MM/dd/yyyy" /> </div>
</div>

Output



Properties

 

• TargetControlID
  The ID of the TextBox control to extend with the calendar popup.
  

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

  Extender property
  
  TargetControlID="Date1"
  
  
• CssClass
  Name of the CSS class used to style the calendar. See the Calendar Theming section for more information. We will see it later here only we will see its property in use.
  
  CssClass="ClassName"
  
  
• Format
  Format string used to display the selected date. Use the MM for months, dd for days and yyyy for year. The final string I used in this tutorial is MM/dd/yyyy.
  
  Format="MM/dd/yyyy"
  
  
  
  
• PopupButtonID
  The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus. I have not declared any control outside the scope of the Textbox so the later portion will execute when I focus on the control, now we can check how we can use it. When certain control is attached with this focus will no longer work.
  
  Firstly add popup extender control and then apply property,
  

  <asp:ImageButton ID="imgcontrol" runat="server" ImageUrl="~/Calendar_scheduleHS.png" />

  Add this property to the extender,
  
  PopupButtonID="imgcontrol"
  
  Output
  
  
  
  
• PopupPosition
  Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox. You can change them as per you convenience.
  
  
  
  
• SelectedDate
  Indicates the date the Calendar extender is initialized with. It's a good feature to start with some date as required. It is initialized and fills to the control when page loads.
  
  SelectedDate="09/06/2016"
  
  
  
  
• StartDate
  Indicates start date for range that available for selection.
  
  StartDate="09/01/2016"
  
  
• EndDate
  Indicates end date for range that available for selection.
  
  EndDate="09/06/2016"

NOTE

Either startDate and endDate criteria will restrict the user to enter or select the date specified other than criteria. You can check that the dates other than those defined in the range are marked strikethrough and disabled, then user is unable to select them.

As I have not applied any theming option not css nor any style associated with it that’s why it is showing without style. To enable theme we will use the css file placed in the calendar demo folder with the name of calendar.css

And use the property CssClass=”classdefinedinthefile” like this CssClass="ajax__calendar"

Hope you find this useful, if you have any questions please comment in the comment section.