Click here to Skip to main content
14,331,896 members

An ASP.NET implementation of a Pop Up Calendar

Rate this:
3.56 (23 votes)
Please Sign up or sign in to vote.
3.56 (23 votes)
15 Dec 2004
There are many implementations of this control but I found some problems using them mainly because of the JavaScript and ASP.NET interoperabiltiy, this control lets you place a calendar that pops up without post-back and you can use it as many times as you want in the same form.

Sample screenshot


There are several implementations of this control on the web. I based mine on Paul Kilmer's but made many changes after I could not get it to work; many of them were changing the HTML controls for actual ASP.NET controls, as this would give me a better control in the code behind of my control, and you will see this in the code.

Creating the Control

First, you need to create a new control, in this case, I called it ctlCalendar. In this control, you will need to add a TextBox (TextBox1) from the Web Forms toolbox, a Button (Button1) from the HTML toolbar, a Panel (Panel1) from the Web Forms toolbox, and finally inside this Panel, a Calendar control (Calendar1) from the Web Forms toolbox. Notice that I used Button1 from the HTML toolbar because I need it not post back when the user clicks it.

This is how your control's HTML would look like:

Sample screenshot

<asp:textbox id="TextBox1" runat="server"></asp:textbox>
<input type="button" id="Button1" runat="server" value="..."><br>
<asp:Panel id="pnlCalendar" runat="server" 

     style="POSITION: absolute">
 <asp:calendar id="Calendar1" runat="server" CellPadding="4" 

      BorderColor="#999999" Font-Names="Verdana" Font-Size="8pt" 

      Height="180px" ForeColor="Black" DayNameFormat="FirstLetter" 

      Width="200px" BackColor="White">
  <TodayDayStyle ForeColor="Black" BackColor="#CCCCCC"></TodayDayStyle>
  <SelectorStyle BackColor="#CCCCCC"></SelectorStyle>
  <NextPrevStyle VerticalAlign="Bottom"></NextPrevStyle>
  <DayHeaderStyle Font-Size="7pt" Font-Bold="True" BackColor="#CCCCCC">
  <SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666">
  <TitleStyle Font-Bold="True" BorderColor="Black" BackColor="#999999">
  <WeekendDayStyle BackColor="LightSteelBlue"></WeekendDayStyle>
  <OtherMonthDayStyle ForeColor="#808080"></OtherMonthDayStyle>

Creating the functionality

Now, we will use two functions to create the functionality; the first one is the Page_Load on which we initialize our controls and Calendar1_SelectionChanged.

private void Page_Load(object sender, System.EventArgs e)
    if (!Page.IsPostBack)
        this.TextBox1.Text = System.DateTime.Now.ToShortDateString();
             "DISPLAY: none; POSITION: absolute");
        string id = Page.Request.Form["__EVENTTARGET"].Substring(0, 
        if (id != this.ID) 
                 "DISPLAY: none; POSITION: absolute");
            this.pnlCalendar.Attributes.Add("style","POSITION: absolute");
    Page.RegisterClientScriptBlock("Script_Panel" + this.ID, 
      "<script> function On"+this.ID+"Click() {  if(" + 
      this.ID + " == \"none\")       " 
      + this.ID + " = \"\";   else    " 
      + this.ID+" = \"none\"; } </script>");

In the Page_Load function, the first thing I do is initiate the Text property of the TextBox with the current date, just not to leave it blank. Then comes a little trick that I learned while making this article, when you change the month in the calendar, it does a post back, and if we have many calendars, we need to know which control exactly did the post back so we won’t hide that specific calendar; and that’s where we will access the __EVENTTARGET hidden field that will tell us which calendar is in action.

string id = Page.Request.Form["__EVENTTARGET"].Substring(0, 

Then I just compare if it’s not the calendar I am working with, I’ll hide it or else just leave it with an absolute position.

if (id != this.ID)
    this.TextBox1.Text = System.DateTime.Now.ToShortDateString();
         "DISPLAY: none; POSITION: absolute");
    this.pnlCalendar.Attributes.Add("style","POSITION: absolute");

In the next lines, I register a client script, this is the actual JavaScript that is going to show the calendar when they click the button, it looks a bit complex so I will explain it in depth.

When you add multiple controls to the same form, each control gets its own name (in this case, ctlCalendar) followed by a number (for the first control, it will be CtlCalendar1). Knowing this, I wrote a line that will create a JavaScript function for each control created, using the this.ID property:

Page.RegisterClientScriptBlock("Script_" + this.ID, 
      "<script> function On"+this.ID+"Click() { if("+this.ID+
      " == \"none\") "+this.ID+
      " = \"\"; else "+this.ID+
      " = \"none\"; } </script>");

And then added that function to the Button itself.


Also, in order to access the Panel's actual properties, you need to know your Panel's name. This name is composed when generated as the control's name (ctlCalendar1) and then the Panel's name (Panel1) separated with an underscore (ctlCalendar1_Panel1 for the first ctlCalendar added to the page).

Let's see the JavaScript code generated for the first Calendar in the page:

 function OnCtlCalendar1Click() 
  if( == "none") = "";   
  else = "none"; 

Here, we see how the function has its own name (OnCtlCalendar1Click()) and we also generated the final name of the Panel (CtlCalendar1_pnlCalendar) in order to make it invisible with the display property. The following controls you add will take consecutive numbers and so will their functions, allowing you to use as many controls as you need.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Isaias Formacio-Serna
Systems Engineer
United States United States
Isaias Formacio-Serna is a Computer Science Engineer, graduated from ITESM Campus Monterrey in May 2003, he started developing in Visual Studio .NET since the first beta version back in the summer of 2001. He enjoys developing with C# Windows Forms, ASP.NET and Windows Mobile applications.

Comments and Discussions

QuestionWhy dont work with firefox Pin
minhtuanvn21-May-13 19:21
memberminhtuanvn21-May-13 19:21 
QuestionThank you Pin
Azizkhani.m5-Apr-13 17:05
memberAzizkhani.m5-Apr-13 17:05 
QuestionError Pin
MustafaIqbal21-Oct-12 23:06
memberMustafaIqbal21-Oct-12 23:06 
QuestionChange month, calendar disappear Pin
JesSab9-Feb-12 15:59
memberJesSab9-Feb-12 15:59 
QuestionGetting the following error in javascript Pin
Member 80933395-Aug-11 1:15
memberMember 80933395-Aug-11 1:15 
GeneralMy vote of 5 Pin
sdfdsfdsdgdgdhztr18-Oct-10 23:50
membersdfdsfdsdgdgdhztr18-Oct-10 23:50 
QuestionFirefox does not work Pin
Peter Winterberg17-Oct-10 3:30
memberPeter Winterberg17-Oct-10 3:30 
GeneralMy vote of 5 Pin
sugandhichalamalla30-Sep-10 6:39
membersugandhichalamalla30-Sep-10 6:39 
QuestionHow Can I use ImageButton instead ? Pin
AsianRogueOne29-Apr-10 10:12
memberAsianRogueOne29-Apr-10 10:12 
GeneralStill have problem when click on NextMonth or PreviousMonth Pin
Nirav Parekh17-Mar-09 5:35
memberNirav Parekh17-Mar-09 5:35 
GeneralSolution not working in Visual Studios 2008 Pin
Shadowrifter5-Jan-09 6:32
memberShadowrifter5-Jan-09 6:32 
GeneralRe: Solution not working in Visual Studios 2008 Pin
Member 11796657-Jan-09 2:27
memberMember 11796657-Jan-09 2:27 
Questiontextbox Pin
jorgt7-Sep-08 23:47
memberjorgt7-Sep-08 23:47 
GeneralMaster page problem Pin
hdboghani25-Apr-08 3:43
memberhdboghani25-Apr-08 3:43 
Generalvery good Pin
GaoYu200013-Aug-07 19:31
memberGaoYu200013-Aug-07 19:31 
QuestionRe: very good Pin
Ashley715-Aug-07 20:55
memberAshley715-Aug-07 20:55 
GeneralRe: very good Pin
Ashley716-Aug-07 14:07
memberAshley716-Aug-07 14:07 
GeneralBug in Calendar Control Pin
jbher4-Nov-06 7:43
memberjbher4-Nov-06 7:43 
QuestionWhy HTML Button? Pin
Gennaro Borrelli28-Sep-05 4:25
memberGennaro Borrelli28-Sep-05 4:25 
GeneralReferencing TextBox1 value Pin
Member 189566529-Aug-05 8:14
memberMember 189566529-Aug-05 8:14 
GeneralRe: Referencing TextBox1 value Pin
Member 189566531-Aug-05 6:38
memberMember 189566531-Aug-05 6:38 
JokeRe: Referencing TextBox1 value Pin
ricpue8-Jan-06 6:10
memberricpue8-Jan-06 6:10 
AnswerRe: Referencing TextBox1 value Pin
ricpue8-Jan-06 6:19
memberricpue8-Jan-06 6:19 
Questionfirefox compliant ? Pin
jocarina13-Jun-05 0:17
memberjocarina13-Jun-05 0:17 
AnswerRe: firefox compliant ? Pin
-Dy8-Sep-06 0:56
member-Dy8-Sep-06 0:56 

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.

Posted 14 Dec 2004


72 bookmarked