YUI Calendar page to the selected date (multi calendar)

I have been working with YUI calendar for a couple of weeks now on a project. I found that it is highly customizable although the documentation are not always clear and you have to dig around the internet to find your answers.

So, I am here to help.

In this new website I have a multi-calendar where you can page forwards and backwards through the dates. The calendar is also showing and hiding according to a user click (see photo).

The problem was (for me anyway) that when the user clicked the calendar’s button and the calendar showed the last paging position.

Let’s say I selected a date, or even better a date interval (from Feb 2nd to Feb 10th) and then paged to see other months available dates, closed the calendar and re-opened it, it seemed as if the selection cleared and the paging position kept.

My client’s request was “if the client selected a date and paged, always take him back to his selection when the calendar is shown”

Well, this is the way to do it.

[js]

var dates = cal1.getSelectedDates();

if(dates.length > 0)

{

var l = dates[0];

cal1.cfg.setProperty(“pagedate”, l);

cal1.render();

}

[/js]

What did we do here?

First, we checked if there are selected dates in the calendar. If there were, we got the lowest date (the first date of the interval). Then we set a property on the calendar called “pagedate” with this lowest date and WHALLLA, it works!

Now, every time you open the calendar it pages to the selected dates section, no matter if you paged forward before hiding the calendar.