ASP.NET Calendar Control and Yahoo.UI.Calendar 30

Note: You can also see this article in codeproject.

Using ASP.NET Calendar and Yahoo.UI.Calendar in ASP.NET 1.1

DEMO Project can be downloaded from the link above.

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.

  • Using ASP.NET Calendar Control in ASP.NET Project
  • Showing ASP.NET Calendar Control in Popup Window
  • Using Yahoo.UI.Calendar Control in ASP.NET Project

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.)

&lt;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"
<strong>Visible="False"</strong>>
<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
{}
//showing the calendar.
cdrCalendar.Visible= true;

5. Add the following codes in SelectionChanged Event of Calendar

//displaying the selected date in TextBox
txtDOB.Text = cdrCalendar.SelectedDate.ToString();
//hiding the calendar.
cdrCalendar.Visible= false;

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

  • Calendar.aspx under Controls Folder
  • Styles.css under CSS
  • pdate.gif and today.png under Images

2. Two things you might need to check

2.1. Path of the CSS of Calendar

&lt;link href=<strong>"../CSS/Styles.css"</strong>
type="text/css" rel="stylesheet">

2.2. Path of the Calandar Image

&lt;asp:imagebutton id="BtnRefresh"
runat="server" ToolTip="Refresh"
ImageUrl=<strong>"../Images/today.png"</strong>>
</asp:imagebutton>

3. Three things you need to add to the page that you want this calendar to display.

3.1. TextBox and HyperLink

<asp:TextBox ID="txtDOB" Runat="server">
</asp:TextBox><asp:HyperLink id="imgDate"
runat="server" ImageUrl="Images/pdate.gif">
HyperLink
</asp:HyperLink>

3.2. Adding Javascript function to open pop-up window

<script language="javascript"
type="text/javascript">

function calendarPicker(strTxtRef){
window.open('./Controls/Calendar.aspx?field=' + strTxtRef   +
'','calendarPopup','titlebar=no,left=470,top=100,' +
'width=300,height=250,resizable=no');
}
</script>

3.3. Calling JavaScript Function

imgDate.NavigateUrl = "javascript:calendarPicker('document.Form1." +
txtDOB.ClientID.ToString() + "');";

Note: Form1 is the name of web form that you want calendar to display on it. If you are not sure about it, go to HTML view and check it.

eg:

<form id="Form1" method="post" runat="server">
</form>

Finally, you can start running your project and check whether it’s working fine or not.
Good Luck! :-)

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. Javascript Files

  1. calendar.js
  2. dom.js
  3. event.js
  4. yahoo.js

3. Image

  1. pdate.gif

4. In aspx file,

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",
<strong>"cal1Container"</strong>);
YAHOO.example.calendar.cal1.title = "";
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;
<strong>oTxtDate.value = formattedDate.getDate()+'/'+</strong>
<strong>(formattedDate.getMonth() +1) +'/'+
formattedDate.getFullYear()</strong>;
}

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.

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

    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.(Thanks to Julia for asking such a great question.)

    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.

    Related Articles ~

    References

  • 30 thoughts on “ASP.NET Calendar Control and Yahoo.UI.Calendar

    1. Pingback: Using ASP.NET Calendar Control and Yahoo.UI.Calendar in ASP.NET at Neonlabs Innovations

    2. Reply starbender Nov 7,2006 6:19 am

      Luv’d the article, although I don’t yet have a need for that. Maybe someday!
      8)

    3. Reply Ashish C. Nov 9,2006 5:19 am

      Well your english is quite good. So there are no problems with that.
      Sorry I skipped the rest of the article but Since I’m not a programmer I found it difficult to understand what you were saying!

      Keep it up anyways! Maybe we can combine our talents some day!

    4. Reply Alex Apr 17,2007 9:08 am

      Thank you for this useful article which I have found very helpful.

      Of course I do have a question:
      Is it possible to access the “pagedate” property of the yahoo calendar from C#?

      I am successfully using the yahoo calendar to set a date in a textbox which I can then read in my underlying C# code, but I want to be able to change the month displayed by the yahoo calendar in that code also.

      I believe that this is set by the “pagedate” property but I have no idea how to access this from my C# code.

      thank you in advance for any advice

      Alex

    5. Pingback: rascunho » Blog Archive » links for 2007-05-08

    6. Reply karbagamoorthy Jun 23,2007 5:47 pm

      I need to implement the pop-up calendar control using MasterPage in asp.net..

      Ordinary pop-up doen’t work well…

      Thanks&Regard,
      D karbagamoorthy

    7. Reply Michael Sync Jun 27,2007 10:32 am

      All codes that I posted my blog are tested well. I would love to hear the reason my code doesnt work in your side.
      Could you please tel me how did you use those codes? I’ll figure out the reason..

      Thanks..

    8. Reply azeez Sep 10,2007 3:10 pm

      hi

      i am using this yahoo calender control in my web application. its deployed also. in one page i using two controls for from date and todate . but while selecting the date more than current date it will give the error .

      please send the reply quickly

    9. Reply lime Oct 21,2007 6:50 pm

      hey, I’m using your first example. i got one question…how can i change the visibility of the calendar if the date picked is the same as the one in the text box. I’m using a panel to set the visibility so it would not ruin my layout. thanks in advance…

    10. Reply Rthomas Oct 30,2007 8:30 am

      it doesnt showing prev & next month arrows

    11. Reply Kusno Nov 8,2007 8:15 pm

      Dear Michael,
      How if I want do some events parent form after clicking date in pop up calendar ?
      Example : After clicking a certain date, a GridView in parent form automatically fill in by records from SQL Database table

    12. Reply Nagabhushan Ammu Feb 2,2008 7:39 pm

      Hi,
      I used the Yahoo calendar control in my page but it is changing all my fonts and styles of the other controls also which is because of the linking of the required style sheets. How to avoid this. Please suggest me.
      Thanks,
      Nagabhushan Ammu.

    13. Reply kavi Feb 8,2008 2:04 pm

      Hi

      I like the pop up calender, please help to do in VB.NET…i tried, but Response.Write(“window.opener.” + Request.QueryString["field"].ToString() + “.value=’” + retDate + “‘;window.close();”)

      throwinf error

    14. Reply Michael Sync Feb 9,2008 6:20 am

      Hello Kavi,

      Can you tell me what error you are getting?

    15. Reply Venkat Apr 18,2008 6:58 am

      I have used the code but I am getting a java script error saying that… “‘this .oDomContainer’ is null or not an object”.

      The error is appearing in the following code…

      function showCalendar1(txtDateClientID,btnCalendarID) {
      this.link1 = document.getElementById(btnCalendarID);
      this.oTxtDate = document.getElementById(txtDateClientID);
      var pos = YAHOO.util.Dom.getXY(link1);
      alert(“The Position is :” + pos);
      YAHOO.example.calendar.cal1.oDomContainer.style.display=’block’;
      alert(“Blocked the view.”);
      YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.oDomContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
      alert(‘After setting XY.’);
      }

      Could you please help me out in solving this issue. I am using ASP.NET 2.0 version.

      The first alert is shown but after that, the code in next line is raising an error.

    16. Reply Michael Sync Apr 18,2008 8:32 am

      I think there is one sample for ASP.NET 2.0 .. you can search that demo in my blog.

      It’s because of the javascript reference. Could you please check the link of JS and the order of JS??

    17. Reply Vidya Apr 30,2008 1:48 am

      Hi,
      I used the calendar control and it is working fine.
      But the calendar gets hidden if i place a asp dropdown control below the text box.

      Thanks
      Vidya

    18. Reply Michael Sync Apr 30,2008 2:25 am

      You can change the z-index for that..

    19. Reply Meenakshi Jul 14,2008 11:11 pm

      thanx this is the useful thing I found

    20. Pingback: 51 Ajax scripts for .net « The Adventures of Amit Dua

    21. Pingback: 16 calendar scripts « The Adventures of Amit Dua

    22. Reply zeke Oct 30,2008 5:07 am

      Hi,

      What do I have to do to make my asp.net calendar disappear when it’s showing it. I just make it disapear by clicking the same button I click to make it appear!!

    23. Reply Menaka Nov 11,2008 6:11 am

      Would somebody let me know if we can display a multi-page calendar in VB.NET? This calendar control should display three months — SEP | OCT | NOV, on clicking the next month link , it should display the calendar for OCT | NOV| DEC and similarly on clicking the previous link, it should display the calendar for AUG | SEP | OCT.

    24. Reply scsfdev Jan 13,2009 12:57 am

      Hi there Michael,
      Long time no see.

      currently i’m digging a source for asp.net calendar and i found this post.
      and it works well and OK at my side except….
      it didn’t disappear when i click other place except on this calendar.

      (What i mean is i want to make it disappear if i click anywhere on the page but not on the date of the calendar. Beside it also didn’t disappear when i clicked on the calendar title)

      Any idea? Thanks.

    25. Reply Sunshine Coast Web Designer Jul 9,2009 11:30 pm

      Anybody know why if you use the calendar control on a page that also contains AJAX controls, after the AJAX event has fired the calendar control stops working. You get a Javascript ‘error on page’, unspecified error.

    26. Reply traslochi milano Nov 26,2009 11:20 pm

      Thanks for sharing this article.That’s very helpful and interesting.

    27. Reply Aashish Jun 21,2010 10:24 pm

      Hi,

      Can u tel me how can i download the YUI Calendar Control.

    28. Reply Amol Feb 1,2011 7:14 am

      Not understood Can u give me ready made code without any effort

    Leave a Reply