Date: December 5, 2006
The YUI Calendar Control's default user interface is tailored for a specific interaction pattern: date selection of one or more dates that are localized within the span of a few months. As such, it provides month-by-month navigation but not year-by-year navigation. This UI is suitable for its intended use case but not for use cases wherein users will be selecting dates that are widely spaced across many months or years.
The Calendar Control can easily be configured to provide alternative interfaces that allow for quick year-selection; this example explores the construction of one such interface.
In this example, we'll use a simple
<select> menu to allow for the selection of a specific year across a wide range (1963-2019). We'll include navigation arrows to the left and right of the
<select> to provide year-by-year clickthrough in that same range. Here is our markup for the navigation control:
We need a function that will keep our
<select> menu in sync with the year displayed on the first page of our two-page CalendarGroup. We can do that by monitoring the
renderEvent, which fires when the calendar is initially displayed and when a user pages to a new calendar month; we'll check an arbitrary date in the middle of the first page (cell 17, in this case) and set our
<select> menu to the appropriate year whenever the page changes:
When the user selects a new year using the
<select> menu, we need to navigate to that year; we do that using the Calendar Control's
setYear() method (which works both for Calendar and for CalendarGroup). We create a function to listen for a change in the
<select>; when that event fires we simply set the year to the
<select> field's new value.
We can wire up our "next year" button using Calendar's
nextYear() method. We'll write a quick check and only do the navigation if we're not at the end of our prescribed range. Here's the code for navigating forward; going backward, of course, is very similar (uses
In this example, we have some additional markup containing the navigation controls and an extra step where we append those controls to the Calendar's DOM structure once it has been rendered. In a more advanced implementation, we could subclass Calendar to build in these behaviors. But the pieces above illustrate some of the strategies you can use to wire year-navigation into your existing Calendar implementation.
— Eric Miraglia, Yahoo Presentation Platform Engineering
(c)2010 Yahoo Inc.