in ASP.NET

ASP.NET Calendar Control and Yahoo.UI.Calendar

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

  • Leave a Reply

    26 Comments

    1. 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!

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

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

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

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

    6. 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…

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

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

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

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

    11. 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??

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

    13. 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!!

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

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

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

    17. Hi,

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