YUI Library Home

YUI Library Examples: Calendar Control: Calendar Navigator

Calendar Control: Calendar Navigator

This example shows you how to enable and configure the Calendar Navigator, which will allow users to quickly jump to a specific year/month without having to scroll through months sequentially.

Setting up the Calendar

You have 2 ways in which you can enable the CalendarNavigation feature, which is available to both the Calendar and CalendarGroup controls. The easiest way to enable the feature is to simply set the navigator configuration property to true as show below:

The above code snippet generates the CalendarGroup with the CalendarNavigator UI enabled, and the default configuration for the CalendarNavigator applied.

If you want to change the default configuration of the CalendarNavigator UI, you can specify a configuration object for the navigator property. The properties of the configuration object are case sensitive, and are listed below:

strings
Object : An object with the properties shown below, defining the string labels to use in the Navigator's UI
month
String : The string to use for the month label. Defaults to "Month".
year
String : The string to use for the year label. Defaults to "Year".
submit
String : The string to use for the submit button label. Defaults to "Okay".
cancel
String : The string to use for the cancel button label. Defaults to "Cancel".
invalidYear
String : The string to use for the invalid year validation message. Defaults to "Year needs to be a number".
monthFormat
String : The month format to use. Either YAHOO.widget.Calendar.LONG, or YAHOO.widget.Calendar.SHORT. Defaults to YAHOO.widget.Calendar.LONG.
initialFocus
String : Either "year" or "month" specifying which input control should get initial focus. Defaults to "year".

For the Calendar instance, we setup the CalendarNavigator with a custom configuration:

NOTE: In the above code examples, we use the simpler version of the constructor, and only pass in the id of the container. We don't pass both an id and container id argument, as we do with other examples. This is a new constructor format available as of 2.4.0 and can used if you don't need a specific id set on the Calendar table.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings