YUI Calendar: How to disable the nextMonth click

Question

Hi,

In the YUI Calendar header there are left/right arrows (links) that changes the current month. I'd like to be able to disable the click event of this links. I tried using changePageEvent() but it happens after the month have changed. YAHOO.util.Event.removeListener didn't seem to work (maybe I'm doing it wrong).

thanks

Answer 1

If changePageEvent() fires too late, why not take the easy way out? Add the following to your stylesheet and the buttons won't display at all:

.yui-calendar .calnavleft, .yui-calendar .calnavright{ display:none; }

If that's not what you'd like, you can physically remove the Events by using:

YAHOO.util.Event.removeListener(yourCalendarObject.linkLeft,'click');
YAHOO.util.Event.removeListener(yourCalendarObject.linkRight,'click');

But, the buttons will still appear and, since YUI uses a href of "#" on these links, your page will jump to the top. You'll need to apply some CSS to hide them either way.

Answer 2

You might want to disable "nextMonth click" because you actually want to restrict the input to a certain date at the top. If so, you should be able to set the max date value with calendar API.

Answer 3

You'll have to change the style after the calendar is rendered.

I did the following and the prev and next buttons were no longer showing:

...

companyCalendar.render();

...

var Dom = YAHOO.util.Dom;
var navLeft = Dom.getElementsByClassName("calnavleft", "a", "companyCalendarContainer")[0];
var navRight = Dom.getElementsByClassName("calnavright", "a", "companyCalendarContainer")[0];

// hide the existing nav buttons
Dom.setAttribute(navLeft, "style", "display: none");
Dom.setAttribute(navRight, "style", "display: none");