HOW TO: Customizing YAHOO.UI.CALENDAR

February 27, 2007 · by · in

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.

  1. calltyear.gif
  2. 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 + Year
WebCalendarTest + …
Hosted by eSnips