From inspiration to realization

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) that when the user clicked the calendar button and the calendar showed up it always 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.

var dates = cal1.getSelectedDates();

if(dates.length > 0)
{
var l = dates[0];

cal1.cfg.setProperty("pagedate", l);
cal1.render();
}

What did we do here?
first, we checked if there are s
}elected dates in the calendar, if there are.. 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.

Avi Tzurel

My name is Avi Tzurel. I'm a professional web developer from Israel. I spend most of my day developing both web products and RIA applications as well as imparting my experience onto others. I speak, teach and write about my passions, and develop applications according to what I preach. I specialize in Flex, Adobe Air, HTML, XHTML, Javascript, jQuery and other Javascript libraries, on the server side I do .net along side with Ruby on Rails. You can connect with me on Twitter or email me through the contact page on this blog.