Click here to Skip to main content
11,633,924 members (77,517 online)
Click here to Skip to main content

An ASP.NET implementation of a Pop Up Calendar

, 15 Dec 2004 239.6K 6.2K 72
Rate this:
Please Sign up or sign in to vote.
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

Introduction

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">
  </DayHeaderStyle>
  <SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666">
  </SelectedDayStyle>
  <TitleStyle Font-Bold="True" BorderColor="Black" BackColor="#999999">
  </TitleStyle>
  <WeekendDayStyle BackColor="LightSteelBlue"></WeekendDayStyle>
  <OtherMonthDayStyle ForeColor="#808080"></OtherMonthDayStyle>
 </asp:calendar>
</asp:Panel>

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();
        this.pnlCalendar.Attributes.Add("style", 
             "DISPLAY: none; POSITION: absolute");
    }
    else
    {
        string id = Page.Request.Form["__EVENTTARGET"].Substring(0, 
                    Page.Request.Form["__EVENTTARGET"].IndexOf(":"));
        if (id != this.ID) 
        {
            this.pnlCalendar.Attributes.Add("style", 
                 "DISPLAY: none; POSITION: absolute");
        }
        else
        {
            this.pnlCalendar.Attributes.Add("style","POSITION: absolute");
        }
    }
    Page.RegisterClientScriptBlock("Script_Panel" + this.ID, 
      "<script> function On"+this.ID+"Click() {  if(" + 
      this.ID + "_pnlCalendar.style.display == \"none\")       " 
      + this.ID + "_pnlCalendar.style.display = \"\";   else    " 
      + this.ID+"_pnlCalendar.style.display = \"none\"; } </script>");
    this.Button1.Attributes.Add("OnClick","On"+this.ID+"Click()");}

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, 
       Page.Request.Form["__EVENTTARGET"].IndexOf(":"));

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();
    this.pnlCalendar.Attributes.Add("style", 
         "DISPLAY: none; POSITION: absolute");
}
else
{
    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+
      "_pnlCalendar.style.display == \"none\") "+this.ID+
      "_pnlCalendar.style.display = \"\"; else "+this.ID+
      "_pnlCalendar.style.display = \"none\"; } </script>");

And then added that function to the Button itself.

this.Button1.Attributes.Add("OnClick","On"+this.ID+"Click()");

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:

<Script> 
 function OnCtlCalendar1Click() 
 {  
  if(CtlCalendar1_pnlCalendar.style.display == "none")     
   CtlCalendar1_pnlCalendar.style.display = "";   
  else    
   CtlCalendar1_pnlCalendar.style.display = "none"; 
 } 
</script>

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.

License

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

Share

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.

You may also be interested in...

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
DocHoliday6629-Apr-10 10:12
memberDocHoliday6629-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
sussGennaro Borrelli28-Sep-05 4:25 
GeneralReferencing TextBox1 value Pin
todd.n.hovland29-Aug-05 8:14
membertodd.n.hovland29-Aug-05 8:14 
GeneralRe: Referencing TextBox1 value Pin
todd.n.hovland31-Aug-05 6:38
membertodd.n.hovland31-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 
Generalabout calendar in asp.net Pin
nirav9915-Feb-05 19:54
membernirav9915-Feb-05 19:54 
GeneralJavaScript logic is flawed... Pin
drub0y28-Dec-04 8:01
memberdrub0y28-Dec-04 8:01 
GeneralRe: JavaScript logic is flawed... Pin
apuzankov20-Apr-05 0:11
memberapuzankov20-Apr-05 0:11 
GeneralRe: JavaScript logic is flawed... Pin
ollidesign19-May-05 23:49
memberollidesign19-May-05 23:49 
AnswerRe: JavaScript logic is flawed... Pin
ricpue9-Jan-06 4:57
memberricpue9-Jan-06 4:57 
GeneralRe: JavaScript logic is flawed... Pin
sunilhp14-Oct-11 3:24
membersunilhp14-Oct-11 3:24 
GeneralAlways the same limitation ... Pin
Sébastien Lorion21-Dec-04 20:41
memberSébastien Lorion21-Dec-04 20:41 
GeneralRe: Always the same limitation ... Pin
spoodygoon27-Oct-07 2:20
memberspoodygoon27-Oct-07 2:20 
QuestionTwo controls in one row? Pin
lsteinmetz20-Dec-04 22:06
memberlsteinmetz20-Dec-04 22:06 
AnswerRe: Two controls in one row? Pin
iformacio21-Dec-04 1:53
memberiformacio21-Dec-04 1:53 
Generalzorder problem w/ dropdown control Pin
niner91117-Dec-04 9:37
memberniner91117-Dec-04 9:37 
GeneralRe: zorder problem w/ dropdown control Pin
niner91117-Dec-04 9:42
memberniner91117-Dec-04 9:42 
GeneralRe: zorder problem w/ dropdown control Pin
David Wulff17-Dec-04 10:58
memberDavid Wulff17-Dec-04 10:58 
GeneralRe: zorder problem w/ dropdown control Pin
Isaias Formacio-Serna17-Dec-04 14:16
memberIsaias Formacio-Serna17-Dec-04 14:16 
GeneralRe: zorder problem w/ dropdown control Pin
alexgadea20-Dec-04 17:59
memberalexgadea20-Dec-04 17:59 
GeneralRe: zorder problem w/ dropdown control Pin
iformacio20-Dec-04 18:09
memberiformacio20-Dec-04 18:09 
GeneralUnable to download your demo project Pin
DangerousFab14-Dec-04 20:30
memberDangerousFab14-Dec-04 20:30 
GeneralRe: Unable to download your demo project Pin
Isaias Formacio-Serna15-Dec-04 0:44
memberIsaias Formacio-Serna15-Dec-04 0:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150728.1 | Last Updated 16 Dec 2004
Article Copyright 2004 by Isaias Formacio-Serna
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid