Aug 5, 2007

How i hide left navigate and right navigate YUI Calendar ?

In my project i must use YUI Calendar control for build static calendar show to user.
but I can't find the solution to hide left navigate and right navigate.
after i search yahoo api , I don't found any thing.

but now,after i try to hack calendar.js
I know the solution for hide left navigator and right navigator

First solution
1.Open calendar.js this file is in yui2.3.0\yui\build\calendar\
2.you just go to line 2321 and you will see javascript code for about render left and right navigator
then you just comment this code
you must separate comment to two group because you should not comment code for display month name

/*
if (renderLeft) {
var leftArrow = this.cfg.getProperty(defCfg.NAV_ARROW_LEFT.key);
// Check for deprecated customization - If someone set IMG_ROOT, but didn't set NAV_ARROW_LEFT, then set NAV_ARROW_LEFT to the old deprecated value
if (leftArrow === null && YAHOO.widget.Calendar.IMG_ROOT !== null) {
leftArrow = YAHOO.widget.Calendar.IMG_ROOT + DEPR_NAV_LEFT;
}
var leftStyle = (leftArrow === null) ? "" : ' style="background-image:url(' + leftArrow + ')"';
html[html.length] = ' ';
}

*/
html[html.length] = this.buildMonthLabel(); /* This line is for display Month don't comment it */
/*
if (renderRight) {
var rightArrow = this.cfg.getProperty(defCfg.NAV_ARROW_RIGHT.key);
if (rightArrow === null && YAHOO.widget.Calendar.IMG_ROOT !== null) {
rightArrow = YAHOO.widget.Calendar.IMG_ROOT + DEPR_NAV_RIGHT;
}
var rightStyle = (rightArrow === null) ? "" : ' style="background-image:url(' + rightArrow + ')"';
html[html.length] = ' ';
}
*/
3.and then you just save calendar.js when you create Calendar you don't see left navigate button and right navigate button.

But this solution will make all of calendar of your app don't display left and right navigate button except you will separate calendar.js.
well I think we shoul have a better solution

Lets'go to second solution

Second solution.
1.like first solution.You just open calendar.js
2.you just set id of both left and right navgate button in this case I name ALeft and ARight.
if (renderLeft) {
var leftArrow = this.cfg.getProperty(defCfg.NAV_ARROW_LEFT.key);
// Check for deprecated customization - If someone set IMG_ROOT, but didn't set NAV_ARROW_LEFT, then set NAV_ARROW_LEFT to the old deprecated value
if (leftArrow === null && YAHOO.widget.Calendar.IMG_ROOT !== null) {
leftArrow = YAHOO.widget.Calendar.IMG_ROOT + DEPR_NAV_LEFT;
}
var leftStyle = (leftArrow === null) ? "" : ' style="background-image:url(' + leftArrow + ')"';
html[html.length] = ' ';
}


html[html.length] = this.buildMonthLabel();

if (renderRight) {
var rightArrow = this.cfg.getProperty(defCfg.NAV_ARROW_RIGHT.key);
if (rightArrow === null && YAHOO.widget.Calendar.IMG_ROOT !== null) {
rightArrow = YAHOO.widget.Calendar.IMG_ROOT + DEPR_NAV_RIGHT;
}
var rightStyle = (rightArrow === null) ? "" : ' style="background-image:url(' + rightArrow + ')"';
html[html.length] = ' ';
}
3.In a page you wish build calendar and wish to hide left and right navigator.
you just write this code



I use setTimeout because I want to object calendar loaded.
when first excute function HideNav if element ALeft or ARight dosen't loaded.
it will setTimeout again and again until ALeft and ARigh loaded and hide it.

Now.I think this solution work for me.
But you may have a problem.
e.g. When your page have more than one calendar and you want to hide navigate button of some calendar.and now each navigator button have same id (ALeft and ARight)

1 comment:

Anonymous said...

I solved this by using the built in start and end dates.

See http://snippets.dzone.com/posts/show/5198