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

• Download Demo Project - 80 Kb

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

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
   • Path of the CSS of Calendar
     

     <link href="../CSS/Styles.css" 
            type="text/css" rel="stylesheet">
     

   • Path of the Calandar Image
     

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

3. Three things you need to add to the page that you want calendar to display
   • TextBox and HyperLink
     

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

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

   • 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">

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.
   
   

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

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

• Using the ASP.NET Calendar control
• Yahoo UI

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 52 (Total in Forum: 52) (Refresh) FirstPrevNext

I want date format like dd/mm/yyyy igaurav 19:10 21 Jun '09   Hi This is a very useful article. I needed this. thank...!! But i need date format like 25/06/2009. Itis showing... 6/25/2009 12:00:00 AM, i just need 25/06/2009 Thank you never let you down...always be happy.. Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: I want date format like dd/mm/yyyy igaurav 22:17 21 Jun '09   I got the ans..it's ToString("d/MM/yyyy") thanks, never let you down...always be happy.. Sign In·View Thread·PermaLink Is there any licence required to use Yahoo Calendar write2atif 20:47 13 May '09   hi michael, its nice article i want to ask u that if i want to use Yahoo calendar in my website which is for business purpose then is it free or any licence is required. atif Sign In·View Thread·PermaLink Re: Is there any licence required to use Yahoo Calendar write2atif 21:09 13 May '09   ok. i find that its licence free atif Sign In·View Thread·PermaLink Yahoo UI calendar is free? Jay K R 23:13 6 Mar '09   can we you Yahoo UI calendar free in commercial application? Sign In·View Thread·PermaLink 1.00/5 (3 votes) calender problem Neetu Maheshwari 22:23 28 Feb '08   it is giving this error--- "this.oDomContainer.appendChild(this.border); oDomContainer has no properties " please help Sign In·View Thread·PermaLink Re: calender problem Michael Sync 5:08 29 Feb '08   it's because you forget to reference the required javascript file or you referenced them in wrong sequence. Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net) Sign In·View Thread·PermaLink 1.00/5 (1 vote) Calendar Control Amy23love 4:53 18 Oct '07   This is a really good article but how can I close the calendar because if you click on a date but you want to change your mind and click the date again the box wont move, so I want a close function on this and a some date validation. As im using this for start date and finish date,both have they own calendars, i want the start calendar to select a date as it does but I want the finished calender to only select a date is is after the previous, visa versa So that the us doesn't select a date in the finish date thats before the start date. IS this possible or can you direct me to where I can view this. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Calendar Control Michael Sync 5:46 18 Oct '07   For "Close" button, you may check my reply in the link below.. there is the instruction how to update the code and you can download the demo file.. http://michaelsync.net/2007/02/27/how-to-customizing-yahoouicalendar#comment-1947[^] Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net) Sign In·View Thread·PermaLink Re: Calendar Control Amy23love 2:41 23 Oct '07   Im Using ASP.NET Calendar Control in ASP.NET Project, the first calendar option Sign In·View Thread·PermaLink 5.00/5 (1 vote) Help on the convertion of Calendar User Control Liu xiaoyan 12:39 20 Aug '07   Thanks for the posting, it works fine for me by following steps in Yahoo.UI.Calendar Control in ASP.NET Project. but when I convert it to a user control , I got some problems. I add two calendar user controls to my form, I click any one button, two calendars come out. Thanks in advance for any input. Sign In·View Thread·PermaLink Re: Help on the convertion of Calendar User Control Michael Sync 17:01 20 Aug '07   YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar( "YAHOO.example.calendar.cal1", "cal1Container"); maybe. this code is fired twice.. It is difficult to say how to fix the error without checking your code. You may probably send the sample to me. I will take a look. Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net) If you want to thank me for my help, please vote my message by clicking one of numbers beside "Rate this message". Why vote? Plz Read it here. Thank you. Sign In·View Thread·PermaLink Classes kcrewjap 14:10 22 May '07   I have the textbox and the image button on one aspx form and then the calendar on another aspx form. how do i get my form to bring over the calendar off of the Calendar form? make sense? do i need to add a class? lost, sorry Sign In·View Thread·PermaLink Re: Classes Michael Sync 20:18 4 Jul '07   >>how do i get my form to bring over the calendar off of the Calendar form? u mean, you wanna sent data from aspx form to calendar form? or you wanna retrieve the data from calendar from? Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net) If you want to thank me for my help, please vote my message by clicking one of numbers beside "Rate this message". Why vote? Plz Read it here. Thank you. Sign In·View Thread·PermaLink 5.00/5 (1 vote) databinding scooby888 8:07 25 Apr '07   Can you bind data to the control (Yahoo Calendar control)? Sign In·View Thread·PermaLink 2.00/5 (3 votes) Re: databinding Michael Sync 20:16 4 Jul '07   No. Could you please tell me the example why you need to bind the data to calendar control? thanks. Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net) If you want to thank me for my help, please vote my message by clicking one of numbers beside "Rate this message". Why vote? Plz Read it here. Thank you. Sign In·View Thread·PermaLink 2.00/5 (1 vote) hi sarithak548 4:33 20 Mar '07   ghg sarithak S/w Programmer Sign In·View Thread·PermaLink Need help !! ASP.NET Calendar Control in Popup Window maparash14 5:54 8 Mar '07   ASP.NET Calendar Control in Popup Window Can anyone pls explain how can I call this javascript ??? is there any HyperLink Event ? Calling JavaScript Function imgDate.NavigateUrl = "javascript:calendarPicker('document.Form1." + txtDOB.ClientID.ToString() + "');"; Thanks in advance !!! maparash Sign In·View Thread·PermaLink Re: Need help !! ASP.NET Calendar Control in Popup Window Michael Sync 22:16 19 Mar '07   try like imgDate.attribute.add("onclick","calendarPicker('document.Form1." + txtDOB.ClientID.ToString() + "');"); Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net) If you want to thank me for my help, please vote my message by clicking one of numbers beside "Rate this message". Why vote? Plz Read it here. Thank you. Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: Need help !! ASP.NET Calendar Control in Popup Window Member 3457853 22:06 11 Dec '08   I'm getting error.. Server Error in '/Application Name' Application. -------------------------------------------------------------------------------- The resource cannot be found. Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly. Help me out... Regards Anant Vijay Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: Need help !! ASP.NET Calendar Control in Popup Window Member 3457853 1:26 12 Dec '08   Hey !! i'm unable to get calendar's value to main page. Help me... Anant Vijay Sign In·View Thread·PermaLink 4.50/5 (2 votes) Add another arrows for year on calender Seuss 9:29 24 Feb '07   Hello I came across this article for my project as I had problems with ew:CalenderPopup control. The tutorial is very good and well explained. However I noticed when clicking on the date picker button and the calender pops up. It has the blue arrows for each month to scroll by. Is there anyway I can put an extra arrows to scroll for year by year? How can this be done please? Can you point me in the right directions of which file and what code to put in please? Much appreciated for your help.. Thanks Newbie.... Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: Add another arrows for year on calender Michael Sync 2:07 25 Feb '07   Sorry for late reply.. today is holiday.. >>Is there anyway I can put an extra arrows to scroll for year by year? ya. you can.. Actually, the base structure of Yahoo.UI.Header is as below. <table class="yui-calendar" cellspacing="0"> <thead> <tr> <th class="calhead" colspan="7"> <div class="calheader"> <a class="calnavleft" style="background-image: url(http://us.i1.yimg.com/us.yimg.com/i/us/tr/callt.gif);"> </a> February 2007 <a class="calnavright" style="background-image: url(http://us.i1.yimg.com/us.yimg.com/i/us/tr/calrt.gif);"> </a> </div> </th> </tr> <tr class="calweekdayrow"> <th class="calweekdaycell">Su</th><th class="calweekdaycell">Mo</th><th class="calweekdaycell">Tu</th> <th class="calweekdaycell">We</th><th class="calweekdaycell">Th</th><th class="calweekdaycell">Fr</th> <th class="calweekdaycell">Sa</th> </tr> </thead> The HTML above is generated from "renderHeader" function of calendar.js. YAHOO.widget.Calendar.prototype.renderHeader = function() { So, If you wanna add somethings (like: close img or another arrow for scrolling year) then you can need to change the "renderHeader" function of calendar.js. However, If you still have some problems in customizing, please show me the screen shots of what you want the calender look like. I'll try to made some changes in my free time and reply you.. Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net) If you want to thank me for my help, please vote my message by clicking one of numbers beside "Rate this message". Why vote? Plz Read it here. Thank you. Sign In·View Thread·PermaLink Re: Add another arrows for year on calender Seuss 3:46 25 Feb '07   Hi, no worries for late reply and sorry for asking today when it is a time for relaxation - I agree with you. I had looked at your reply and I had actually looked in the calender.js and saw the renderHeader function, I got confused whether to duplicate the code within the renderHeader function for the another arrows for scrolling year by year. I tried to add the screenshot but could't do it....what I am actually hoping to do is where the blue arrows for left and right, they can stay there as it is but I want to add another different coloured arrows next to the left blue arrow and right blue arrow for year. rather like this << < > >> year month month year How can renderHeader function be changed? is it duplicating it and changing it? or does it require another function? It looks really complicated. It would help me how you would change it and I am sure others will appreciate the tip on this. Thank you for your time and reply on this and this is greatly appreciated. Thanks Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: Add another arrows for year on calender Michael Sync 15:19 26 Feb '07   Plz check the following.. it's working fine in mozilla firefox.. but not on IE.. i hav to fix that issue.. but i'm quite busy during these days.. i'll take a look this issue as soon as possible.. Sorry for that.. Step #1: Adding two images in Images Folder of Project. calltyear.gif calrtyear.gif Note: Step #2: Changing the default imageroot in YAHOO.widget.Calendar_Core function //Modified By: Michael Sync (http://michaelsync.net) YAHOO.widget.Calendar_Core.IMG_ROOT = 'http://localhost/WebCalendarTest/Images'; Step #3: this.Config.Options this.Config.Options = { // Configuration variables MULTI_SELECT : false, SHOW_WEEKDAYS : true, START_WEEKDAY : 0, SHOW_WEEK_HEADER : false, SHOW_WEEK_FOOTER : false, HIDE_BLANK_WEEKS : false, NAV_ARROW_LEFT : YAHOO.widget.Calendar_Core.IMG_ROOT + "callt.gif", NAV_ARROW_RIGHT : YAHOO.widget.Calendar_Core.IMG_ROOT + "calrt.gif", NAV_ARROW_LEFTYEAR : YAHOO.widget.Calendar_Core.IMG_ROOT + "calltyear.gif", NAV_ARROW_ RIGHTYEAR : YAHOO.widget.Calendar_Core.IMG_ROOT + "calrtyear.gif" }; Step #4: this.Config.Style this.Config.Style = { // Style variables CSS_ROW_HEADER: "calrowhead", CSS_ROW_FOOTER: "calrowfoot", CSS_CELL : "calcell", CSS_CELL_SELECTED : "selected", CSS_CELL_RESTRICTED : "restricted", CSS_CELL_TODAY : "today", CSS_CELL_OOM : "oom", CSS_CELL_OOB : "previous", CSS_HEADER : "calheader", CSS_HEADER_TEXT : "calhead", CSS_WEEKDAY_CELL : "calweekdaycell", CSS_WEEKDAY_ROW : "calweekdayrow", CSS_FOOTER : "calfoot", CSS_CALENDAR : "yui-calendar", CSS_CONTAINER : "yui-calcontainer", CSS_2UPWRAPPER : "yui-cal2upwrapper", CSS_NAV_LEFT : "calnavleft", CSS_NAV_RIGHT : "calnavright", CSS_CELL_TOP : "calcelltop", CSS_CELL_LEFT : "calcellleft", CSS_CELL_RIGHT : "calcellright", CSS_NAV_LEFTYEAR : "calnavleftyear", CSS_NAV_RIGHTYEAR : "calnavrightyear", CSS_CELL_BOTTOM : "calcellbottom", CSS_CELL_HOVER : "calcellhover", CSS_CELL_HIGHLIGHT1 : "highlight1", CSS_CELL_HIGHLIGHT2 : "highlight2", CSS_CELL_HIGHLIGHT3 : "highlight3", CSS_CELL_HIGHLIGHT4 : "highlight4" }; Step #5: calendar.css /* Added by Michael Sync (http://michaelsync.net)*/ .yui-calendar .calnavleftyear { position:absolute; background-repeat:no-repeat; cursor:pointer; top:2px; bottom:0; width:9px; height:12px; left:2px; } .yui-calendar .calnavright { position:absolute; background-repeat:no-repeat; cursor:pointer; top:2px; bottom:0; width:9px; height:12px; right:2px; } .yui-calendar .calnavleft { position:absolute; background-repeat:no-repeat; cursor:pointer; top:2px; bottom:0; width:9px; height:12px; left:12px; /* Midified By : Michael Sync */ } .yui-calendar .calnavright { position:absolute; background-repeat:no-repeat; cursor:pointer; top:2px; bottom:0; width:9px; height:12px; right:12px; /* Midified By : Michael Sync */ } Step #6: YAHOO.widget.Calendar.prototype.renderHeader this.headerCell.innerHTML = ""; /* Modified By: Michael Sync (http://michaelsync.net) */ //Nav Link for Previous Year if (this.linkLeftYear) { YAHOO.util.Event.removeListener(this.linkLeftYear, "mousedown", this.previousYear); } this.linkLeftYear = document.createElement("A"); this.linkLeftYear.innerHTML = " "; YAHOO.util.Event.addListener(this.linkLeftYear, "mousedown", this.previousYear, this, true); this.linkLeftYear.style.backgroundImage = "url(" + this.Options.NAV_ARROW_LEFTYEAR + ")"; this.linkLeftYear.className = this.Style.CSS_NAV_LEFTYEAR; /* Modified By: Michael Sync (http://michaelsync.net) */ if (this.linkLeft) { YAHOO.util.Event.removeListener(this.linkLeft, "mousedown", this.previousMonth); } this.linkLeft = document.createElement("A"); this.linkLeft.innerHTML = " "; YAHOO.util.Event.addListener(this.linkLeft, "mousedown", this.previousMonth, this, true); this.linkLeft.style.backgroundImage = "url(" + this.Options.NAV_ARROW_LEFT + ")"; this.linkLeft.className = this.Style.CSS_NAV_LEFT; if (this.linkRight) { YAHOO.util.Event.removeListener(this.linkRight, "mousedown", this.nextMonth); } this.linkRight = document.createElement("A"); this.linkRight.innerHTML = " "; YAHOO.util.Event.addListener(this.linkRight, "mousedown", this.nextMonth, this, true); this.linkRight.style.backgroundImage = "url(" + this.Options.NAV_ARROW_RIGHT + ")"; this.linkRight.className = this.Style.CSS_NAV_RIGHT; /* Modified By: Michael Sync (http://michaelsync.net) */ //Nav Link for Next Year if (this.linkRightYear) { YAHOO.util.Event.removeListener(this.linkRightYear, "mousedown", this.nextYear); } this.linkRightYear = document.createElement("A"); this.linkRightYear.innerHTML = " "; YAHOO.util.Event.addListener(this.linkRightYear, "mousedown", this.nextYear, this, true); this.linkRightYear.style.backgroundImage = "url(" + this.Options.NAV_ARROW_RIGHTYEAR + ")"; this.linkRightYear.className = this.Style.CSS_NAV_RIGHTYEAR; headerContainer.appendChild(this.linkLeftYear); /* Modified By: Michael Sync (http://michaelsync.net) */ headerContainer.appendChild(this.linkLeft); headerContainer.appendChild(document.createTextNode(this.buildMonthLabel())); headerContainer.appendChild(this.linkRight); headerContainer.appendChild(this.linkRightYear); //Modified By Michael Sync this.headerCell.appendChild(headerContainer); Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net) If you want to thank me for my help, please vote my message by clicking one of numbers beside "Rate this message". Why vote? Plz Read it here. Thank you. Sign In·View Thread·PermaLink

Last Visit: 13:27 9 Feb '10     Last Update: 13:27 9 Feb '10 123 Next »