YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Multi-Select Calendar

# Calendar Control: Multi-Select Calendar

By default the Calendar control is setup for single-select mode, allowing only a single date to be selected at a time. This example shows how you can easily configure the Calendar to support multiple date selections.

View example in new window.

## Setting up the Calendar

The markup for our multi-select Calendar example looks indentical to the basic single-select Calendar:

<div id="cal1Container"></div>

Instantiating a multi-select Calendar is similar to instantiating a single-select Calendar; however, to specify the multi-select configuration we pass a configuration object into the constructor. The configuration object is a JavaScript object literal which can be passed to the Calendar constructor in the form of key/value pairs for the purpose of setting the Calendar's various configuration properties. In this case, we'll specify that the "MULTI-SELECT" option has a value of true in line 6 below.

<script> YAHOO.namespace("example.calendar"); YAHOO.example.calendar.init = function() { YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT: true } ); YAHOO.example.calendar.cal1.render(); } YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init); </script>

You will see Calendar's various other configuration properties at work throughout the remainder of the tutorials, and you can also view the Calendar's configuration properties reference for more details.

### 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
- Interval Selection Calendar
- 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 (beta))
- 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 (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