YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Calendar and Select Fields

# Calendar Control: Calendar and Select Fields

This example builds upon the Events example, by demonstrating how you can use the select event to set the state of some dropdowns. It also demonstates how the current page and selected date can be set on the Calendar after it is first rendered.

View example in new window.

## Setting up the Calendar

In this example, we will build a Calendar that can accept selections on any date from 1/1/2006 to 12/31/2010, and we will set up a series of select boxes that can be used to change the selected date. First, we will construct the Calendar with the minimum and maximum dates specified:

YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { mindate:"1/1/2006", maxdate:"12/31/2010" });

Next, we will place our markup, which includes a standard container for the Calendar, and the select elements needed to change the date:

<div id="cal1Container"></div> <form name="dates"> <select id="selMonth" name="selMonth"> ... </select> <select name="selDay" id="selDay"> ... </select> <select name="selYear" id="selYear"> ... </select> </form>

Next, we must define a handler that will fire when the user changes the selected date on the Calendar. This function will be named handleSelect, and will be subscribed to the Calendar's selectEvent:

function handleSelect(type,args,obj) { var dates = args[0]; var date = dates[0]; var year = date[0], month = date[1], day = date[2]; var selMonth = document.getElementById("selMonth"); var selDay = document.getElementById("selDay"); var selYear = document.getElementById("selYear"); selMonth.selectedIndex = month; selDay.selectedIndex = day; for (var y=0;y<selYear.options.length;y++) { if (selYear.options[y].text == year) { selYear.selectedIndex = y; break; } } } ... YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);

The handleSelect function receives an array of selected dates as an argument. Since this Calendar is only single-select, we will only need to retrieve the first (and only) item in the array. The date argument is passed as an easily sorted Integer array in the format: [yyyy, mm, dd]. The handleSelect function uses this array to properly select the corresponding values in each select field. Note that it's also necessary to subscribe the function to the selectEvent on the Calendar so that it will be fired when a selection is made.

Next, we will define a function called updateCal, which will be used to update the Calendar with the field values that are selected in each select field:

function updateCal() { var selMonth = document.getElementById("selMonth"); var selDay = document.getElementById("selDay"); var selYear = document.getElementById("selYear"); var month = parseInt(selMonth.options[selMonth.selectedIndex].text); var day = parseInt(selDay.options[selDay.selectedIndex].value); var year = parseInt(selYear.options[selYear.selectedIndex].value); if (! isNaN(month) && ! isNaN(day) && ! isNaN(year)) { var date = month + "/" + day + "/" + year; YAHOO.example.calendar.cal1.select(date); YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month + "/" + year); YAHOO.example.calendar.cal1.render(); } }

The updateCal function does two key things. First, it grabs the selected values from the select fields and uses them to make a new selection on the Calendar. Next, it changes the visible page of the Calendar to the Calendar's earliest selected date, so that the selection will be clear to the user. We can wire up the select fields to call updateCal when selections are made using the Event utility. In our example, we will do this after initializing the Calendar:

YAHOO.util.Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);

It's worth noting that this example doesn't cover advanced features like date validation or randomly changing the selectable days based on the day of the month, so you are able to select invalid dates like February 31. Calendar automatically attempts to compensate for the extra invalid dates by moving the selection forward into the next month.

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

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### 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 - Basic
- Popup Calendar - Advanced
- Interval Selection Calendar
- Localization - Germany
- Localization - Japan
- Localization - Taiwan (Year Offset)
- Skinning The Calendar
- Calendar Plugin (included with examples for Rich Text Editor)
- Inline Cell Editing (included with examples for DataTable Control)
- Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)
- Simple Profiling (included with examples for ProfilerViewer Control)

### More Calendar Control Resources:

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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