Yahoo! Developer Network Home - Help

YDN Site Search

# 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.

View example in new window.

## 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:

YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1Container",{navigator:true}); YAHOO.example.calendar.cal1.render();

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:

var navConfig = { strings : { month: "Choose Month", year: "Enter Year", submit: "OK", cancel: "Cancel", invalidYear: "Please enter a valid year" }, monthFormat: YAHOO.widget.Calendar.SHORT, initialFocus: "year" }; YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar("cal2Container", {navigator:navConfig}); YAHOO.example.calendar.cal2.render();

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.

### Calendar Control Examples:

- Quickstart Tutorial
- Multi-Select Calendar
- Multi-Page Calendar
- Minimum/Maximum Dates
- Calendar Navigator
- Handling Calendar Events
- Calendar and Text Fields
- Calendar and Select Fields
- Using the Render Stack
- Popup Calendar
- Localization - Germany
- Localization - Japan
- Calendar inside a Container
- Skinning The Calendar
- Calendar Plugin (included with examples for Rich Text Editor (beta))
- Inline Cell Editing (included with examples for DataTable Control (beta))
- Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility (beta))
- Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button (included with examples for Button Control)
- Simple Application (included with examples for Layout Manager (beta))
- Complex Application (included with examples for Layout Manager (beta))
- Simple Profiling (included with examples for ProfilerViewer Control (beta))

### More Calendar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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