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.