HOW TO: Customizing YAHOO.UI.CALENDAR
Note: This post is published for those who like to add two more arrows for scrolling the year of calender.. And also, it’s a reply for this comment of my article in CodeProject.
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….
HOW TO CUSTOMIZE THE HEADER OF YAHOO.UI.CALENDAR
Scenerio ~
1. Adding two arrows for scrolling the year of calendar.
Step #1: Adding two images in Images Folder of Project.
- calltyear.gif
- calrtyear.gif
Note: As I’m not very good at designing thing, I just changed the name of original image. It would be great if somebody can give me two arrows images.
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);
That’s all. 
Downloads
 |
| WebCalendarTest + … |
| Hosted by eSnips |
daveynin said
am July 19 2007 @ 5:26 pm
Impressive article, and it works as I tried the sample on one of my projects at my workplace. But there is one minor issue - there is no closing or hide the calendar box when the user clicks out those box without choosing any dates. This box won’t allow me to close it until I choose a date.
Reply me the email for solution of the issue is highly appreciated.
Michael Sync said
am July 19 2007 @ 9:08 pm
Yeah. you can customize it too. this post wil show you how to add extra elements in Yahoo.UI.Calendar. you need to check “selecting date ” functionality. and call it from close button.
let me know if you are not able to find it…. im thinking to test it for you but i dont visual studio 2003 installed in my machine.
daveynin said
am August 9 2007 @ 3:16 pm
Sorry to get back to you in less than one month. I couldn’t find this.
I am writing back-end coding on Visual Studio 2003, but not front-end development.
I am familiar with JavaScrtipt, but not talent with this for object oriened.
Michael Sync said
am August 10 2007 @ 2:20 am
Hi Daveynin,
I will try to add “close button” for you tonight. plz keep on waiting..
Prashant Bhale said
am August 22 2007 @ 5:11 am
Hi ,
I also have same requirement as Daveynin . Please Can you Tell me how to close the window without chose the date.
Thanks
Michael Sync said
am August 22 2007 @ 2:16 pm
I’m thinking to do that.. . but I don’t have VS 2003 installed in my machine….. I will try as soon as I can.. i wil email once done..
Mehreen Soofi said
am October 9 2007 @ 2:44 am
I have the same problem.Please Tell me how to close the window without chosing the date.
I will be waiting for ur reply.
Michael Sync said
am October 9 2007 @ 6:00 am
Please change the following in order to show the close button in calendar..
Demo Download : Yahoo Calendar with “close button”
YahooUICalendarSimplePage.aspx
function init() {
// CALENDAR INIT
//this.link1 = document.getElementById(’dateLink1′); // Moved to showCalendar1()
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar(”YAHOO.example.calendar.cal1″,”cal1Container”);
YAHOO.example.calendar.cal1.title = “ ”;
YAHOO.example.calendar.cal1.onSelect = setDate1;
YAHOO.example.calendar.cal1.render();
}
YAHOO.widget.Calendar.prototype.renderHeader of calendar.js
YAHOO.widget.Calendar.prototype.renderHeader = function() {
this.headerCell.innerHTML = “”;
var headerContainer = document.createElement(”DIV”);
headerContainer.className = this.Style.CSS_HEADER;
if(!this.titleDiv)
this.titleDiv = document.createElement(”DIV”);
this.titleDiv.innerHTML = this.title;
this.titleDiv.className = YAHOO.widget.Calendar2up.CSS_2UPTITLE;
var linkClose = document.createElement(”A”);
linkClose.href = “javascript:void(null)”;
YAHOO.util.Event.addListener(linkClose, “click”, this.hide, this);
var imgClose = document.createElement(”IMG”);
imgClose.src = YAHOO.widget.Calendar_Core.IMG_ROOT + “x_d.gif”;
imgClose.className = YAHOO.widget.Calendar2up.CSS_2UPCLOSE;
linkClose.appendChild(imgClose);
//this.linkClose = linkClose;
this.titleDiv.appendChild(linkClose);
this.headerCell.appendChild(this.titleDiv);
/* 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);
};
I haven’t changed the css file.. if you wanna get more nice-look, you need to change the css file a lit bit..
Rthomas said
am October 30 2007 @ 8:13 am
What about the previous month and next month option for yahoo calender control
Rthomas said
am October 30 2007 @ 1:09 pm
i got the output…thanks
Michael Sync said
am October 30 2007 @ 6:29 pm
I just read your comment. it is cool that you have solved your problem yourself, Rthomas.
rthomas said
am October 31 2007 @ 8:30 am
thanks, great help……………
rthomas said
am October 31 2007 @ 8:57 am
I want close button in yahoo.ui.calender……wht all modifications to do for that
Michael Sync said
am October 31 2007 @ 6:30 pm
Please read the comment no.8 .. I have explained everything in this comment and you can download the demo sourcecode too.. hope it helps..
Faizul Bari said
am November 13 2007 @ 9:12 am
Hi,
I am using yahoo.ui.calender in one of my projects. I want to restrict users from selecting any past dates, he has to select only future dates.
can this be done?
rthomas said
am January 9 2008 @ 1:42 pm
Hi Michael,
I am not good in programming. I am using yahoo.ui.calender in one of my projects. Right now it have only previous month and next month button. I like add Previous Year, Next Year and close button also to this. So can you please help me to do.
Thanks
Rthomas
rthomas said
am January 9 2008 @ 5:39 pm
Hi,
Thank you. I have found the way to do it
Michael Sync » ASP.NET Calendar Control and Yahoo.UI.Calendar said
am January 16 2008 @ 9:26 am
[...] HOW TO: Customizing YAHOO.UI.CALENDAR [...]
Brent said
am January 28 2008 @ 2:17 pm
Hi Michael,
Great control, thank you very much for sharing it with us. I have created some simple icons for the year and month navigation and could email them to you if you wish(what is your email?).
My question for you is, how could I add functionality for when the calendar is open, that closes the calendar by clicking anywhere on the page other than the calendar. I don’t want to use the close button because that destroys the look of the calendar with the year/month nav buttons. But I do want the user to be able to exit the calendar without having to click a day. I’ve seen the functionality that I described above on other websites, but unfortunately I am no JS expert.
Thanks!
Brent
Michael Sync said
am January 28 2008 @ 6:39 pm
Hi Brent,
Thanks a lot for that. You can reach me with this mail. mchlsync AT gmail DOT com.
Can you please wait for a while? I don’t have VS in front of me.. I will get back to you as soon as I can..
senthil said
am March 11 2008 @ 2:18 am
nicely ok