Skip to main content
Email Password   helpLost your password?

Introduction

The Calendar control becomes an essential control for business application developments since the most of data entry forms used to have one or more field for Date value. Let's say! we are working on a page called "Candidate Resume Entry" of Recruitment System. There will be some date fields such as "Date of Birth of Candidate", "Resume Submitted Date" in that page. The calendar control needed to be used in that page. Okay. Let me stop talking about this here as I know you already know how calendar control is important for your project.

There are three sections in this article and each section has two parts called "Running the demo project" and "Lab". First, you can see how it looks like by running the demo application. Then, if you wanna use this control in your project, you can read the details in "Lab".

The following topics will be covered in this article.

Note:

  1. I'd highly recommend you to download the demo project before start reading this article.
  2. Even thought there are three different sections in my article, you can feel free to skip any section and move on to the next section that you wanna read.
Thanks. Hopefully, you may find it useful.

Using ASP.NET Calendar Control in ASP.NET Project

This section is created only for beginners who haven't used ASP.NET Calendar in Web Project. Feel free to skip this section if you already know about it.

Running the sample

  1. Download and extract the zip file.
  2. Set SimpleCalendar.aspx as start page.
  3. Run the web application.
    You will see the result as below if you click "..." button nearly Date Of Birth TextBox.
    Simple ASP.NET Calendar
  4. If you choose a date from Calendar Control then the selected date will be shown in TextBox and this calendar will be disappeared.
Do you wanna try this code in your owned project?

Lab: Using ASP.NET Control in ASP.NET Project

  1. Create one ASP.NET Web Project (C#)
  2. Place TextBox and Button in WebForm
    <asp:TextBox ID="txtDOB" Runat="server"></asp:TextBox>
    <asp:Button ID="btnDOB" Runat="server" Text="..."></asp:Button>
    
  3. Add Calendar control to WebForm.
    ( Thanks to the Author of this article for custom style of calendar control.You can remove the style if you dont wanna customize the appearance.)
    <asp:calendar id="cdrCalendar" runat="server" 
      backcolor="#ffffff" width="250px" height="200px" 
      font-size="12px" font-names="Arial" borderwidth="2px"
      bordercolor="#000000" nextprevformat="shortmonth" 
      daynameformat="firsttwoletters" Visible="False">
      <TodayDayStyle ForeColor="White" BackColor="Black"></TodayDayStyle>
      <NextPrevStyle Font-Size="12px" Font-Bold="True" ForeColor="#333333">
      </NextPrevStyle>
      <DayHeaderStyle Font-Size="12px" Font-Bold="True"></DayHeaderStyle>
      <TitleStyle Font-Size="14px" Font-Bold="True" BorderWidth="2px"
         ForeColor="#000055"></TitleStyle>
      <OtherMonthDayStyle ForeColor="#CCCCCC"></OtherMonthDayStyle>
    </asp:calendar>
    
  4. Add the following codes in Button Click Event
    try
    {
      if(txtDOB.Text.Trim() != "")
          cdrCalendar.SelectedDate = Convert.ToDateTime(txtDOB.Text);
    }
    catch
    {}
    cdrCalendar.Visible= true;  //showing the calendar.
    
    
  5. Add the following codes in SelectionChanged Event of Calendar
    //displaying the selected date in TextBox
    
    txtDOB.Text = cdrCalendar.SelectedDate.ToString(); 
    cdrCalendar.Visible= false; //hiding the calendar.
    
    
  6. Finally, run your web application. You will see the same result as the picture above. That's. It is Simple. isn't it?

Showing ASP.NET Calendar Control in Popup Window

Now, we have some ideas about how to use ASP.NET Calendar. we will try to improve our code more better.
So, How about showing the Calendar in pop-up window? Oki. Let's see..

Running the sample

  1. Set PopupCalendar.aspx as start page.
  2. Run the web application. You will see the calendar in pop-up window as following picture.

    Popup ASP.NET Calendar

Lab: Adding Pop-Up Calendar Control in your owned project

Here are some facts if you wanna try this code in your owned project.
  1. Three things you need to copy from demo project to your project
  2. Two things you might need to check
  3. Three things you need to add to the page that you want calendar to display
  4. Finally, you can start running your project and check whether it's working fine or not.

Using Yahoo.UI.Calendar Control in ASP.NET Project

Personally, I don't like that much about showing something in pop-up window. So, I was looking for something better. then I came to know Yahoo UI Library which is amazing javascript library and it is compatible with the most popular browsers. Let's take a look at the demo.

Running the sample project

  1. Set YahooUICalendarSimplePage.aspx as start page.
  2. Run the web application. You will see the calendar in pop-up window as following picture.

    Using Yahoo.UI.Calendar in ASP.NET

Lab: How to use Yahoo.UI.Calendar in your owned ASP.NET project

You need to add the following stylesheets,javascript files and image in your project.
  1. Stylesheets
    1. calendar.css
    2. dpSyntaxHighlighter.css
    3. fonts.css
    4. reset.css
  2. Stylesheets
    1. calendar.js
    2. dom.js
    3. event.js
    4. yahoo.js
  3. Image
    1. pdate.gif
In aspx file,
  1. Add the following code in HEAD Tag~
    <script type="text/javascript" src="./JS/yahoo.js"></script>
    <script type="text/javascript" src="./JS/event.js"></script>
    <script type="text/javascript" src="./JS/dom.js"></script>
            
    <link type="text/css" rel="stylesheet" href="./CSS/fonts.css">
    <link type="text/css" rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" type="text/css" 
             href="./CSS/dpSyntaxHighlighter.css">
            
    <script type="text/javascript" src="./JS/calendar.js"></script>
            
    <link type="text/css" rel="stylesheet" href="./CSS/calendar.css">
            
    <script language="javascript">
    YAHOO.namespace("example.calendar");
            
    function init() {  
      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar(
          "YAHOO.example.calendar.cal1",
          "cal1Container"); 
      YAHOO.example.calendar.cal1.title = "Select the desired workout day:";
            
      YAHOO.example.calendar.cal1.onSelect = setDate1;
      YAHOO.example.calendar.cal1.render();
    
    }
            
    function showCalendar1(txtDateClientID,btnCalendarID) {
      this.link1 = document.getElementById(btnCalendarID);
      this.oTxtDate = document.getElementById(txtDateClientID);
      var pos = YAHOO.util.Dom.getXY(link1);
      YAHOO.example.calendar.cal1.oDomContainer.style.display='block';
      YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.oDomContainer, 
                           [pos[0],pos[1]+link1.offsetHeight+1]);
    }
            
            
    function setDate1() {
      var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
      YAHOO.example.calendar.cal1.oDomContainer.style.display='none';
      var formattedDate = date1;           
      oTxtDate.value = formattedDate.getDate()+'/'+ 
           (formattedDate.getMonth() +1) +'/'+ formattedDate.getFullYear();
    }
            
    YAHOO.util.Event.addListener(window, "load", init);
    </script>
     
    Note:

    YAHOO.example.calendar.cal1.getSelectedDates() in setDate1() function will be returned the selected date as long date format. Even thought I have converted that long date format to short date format (DD/MM/YYYY), you can remove the last line if you wanna get long date format. "cal1Container" in init()is the id of DIV where Yahoo.UI.Calendar support to be attached.

  2. Put the following code in Body Tag.
    <div id="cal1Container" style="DISPLAY: none; POSITION: absolute" ></div>
    <asp:TextBox ID="txtDOB" Runat="server"></asp:TextBox>
    <a id="chooseday" onclick="showCalendar1('<% =txtDOB.ClientID %>',
           'imgCalendar')" href="javascript:void(null)">
    <IMG id="imgCalendar" border="0" alt="" src="Images/pdate.gif"> 
    
    Note:

    If you are using HTML Textbox in your page, you can just pass the id of textbox to showCalendar1() function. In case, the calendar is showing behind the other control, you can set higher Z-ORDER of callContainer DIV which will be attached by Yahoo.UI.Calendar.

UPDATE : Please take a look at this article if you wanna add Yahoo.UI.Calendar in BasePage or MasterPage.
Using Yahoo.UI.Calendar in PageTemplate and Master Page - Part II

Yahoo.UI.Calendar in BasePage and MasterPage

UPDATE :

HOW TO Customize YAHOO.UI.CALENDAR.

This is a sample for adding two more arrows to scroll for year by year.

Conclusion

Hopefully, you may find it useful. (again) and This is the way that I used in some of my project and I'm pretty sure that it works very well in practical project.
If you have any question regarding this artilce, you can feel free to leave your question as a comment in my blog. (http://michaelsync.net) I will reply you as soon as possible.
Thanks.


References

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralI want date format like dd/mm/yyyy Pin
igaurav
19:10 21 Jun '09  
GeneralRe: I want date format like dd/mm/yyyy Pin
igaurav
22:17 21 Jun '09  
QuestionIs there any licence required to use Yahoo Calendar Pin
write2atif
20:47 13 May '09  
AnswerRe: Is there any licence required to use Yahoo Calendar Pin
write2atif
21:09 13 May '09  
GeneralYahoo UI calendar is free? Pin
Jay K R
23:13 6 Mar '09  
Generalcalender problem Pin
Neetu Maheshwari
22:23 28 Feb '08  
GeneralRe: calender problem Pin
Michael Sync
5:08 29 Feb '08  
GeneralCalendar Control Pin
Amy23love
4:53 18 Oct '07  
GeneralRe: Calendar Control Pin
Michael Sync
5:46 18 Oct '07  
GeneralRe: Calendar Control Pin
Amy23love
2:41 23 Oct '07  
GeneralHelp on the convertion of Calendar User Control Pin
Liu xiaoyan
12:39 20 Aug '07  
GeneralRe: Help on the convertion of Calendar User Control Pin
Michael Sync
17:01 20 Aug '07  
QuestionClasses Pin
kcrewjap
14:10 22 May '07  
AnswerRe: Classes Pin
Michael Sync
20:18 4 Jul '07  
Generaldatabinding Pin
scooby888
8:07 25 Apr '07  
GeneralRe: databinding Pin
Michael Sync
20:16 4 Jul '07  
Generalhi Pin
sarithak548
4:33 20 Mar '07  
GeneralNeed help !! ASP.NET Calendar Control in Popup Window Pin
maparash14
5:54 8 Mar '07  
GeneralRe: Need help !! ASP.NET Calendar Control in Popup Window Pin
Michael Sync
22:16 19 Mar '07  
GeneralRe: Need help !! ASP.NET Calendar Control in Popup Window Pin
Member 3457853
22:06 11 Dec '08  
GeneralRe: Need help !! ASP.NET Calendar Control in Popup Window Pin
Member 3457853
1:26 12 Dec '08  
GeneralAdd another arrows for year on calender Pin
Seuss
9:29 24 Feb '07  
GeneralRe: Add another arrows for year on calender Pin
Michael Sync
2:07 25 Feb '07  
QuestionRe: Add another arrows for year on calender Pin
Seuss
3:46 25 Feb '07  
AnswerRe: Add another arrows for year on calender Pin
Michael Sync
15:19 26 Feb '07  


Last Updated 2 Mar 2007 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009