in ASP.NET

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.

  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

Leave a Reply

21 Comments

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

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

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

  4. Hi ,

    I also have same requirement as Daveynin . Please Can you Tell me how to close the window without chose the date.
    Thanks

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

  6. I have the same problem.Please Tell me how to close the window without chosing the date.

    I will be waiting for ur reply.

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

  8. What about the previous month and next month option for yahoo calender control

  9. I want close button in yahoo.ui.calender……wht all modifications to do for that

  10. Please read the comment no.8 .. I have explained everything in this comment and you can download the demo sourcecode too.. hope it helps..

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

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

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

  14. Hi Brent,

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

    Thanks a lot for that. You can reach me with this mail. mchlsync AT gmail DOT com.

    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

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