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
