Yahoo! Developer Network Home - Help

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.

  May 2025  
Su Mo Tu We Th Fr Sa
27 28 29 30 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
1 2 3 4 5 6 7

Setting up the Calendar

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

1<div id="cal1Container"></div> 
view plain | print | ?

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.

1<script> 
2        YAHOO.namespace("example.calendar"); 
3 
4        YAHOO.example.calendar.init = function() { 
5            YAHOO.example.calendar.cal1 = 
6                new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT: true } ); 
7 
8            YAHOO.example.calendar.cal1.render(); 
9        } 
10 
11        YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init); 
12</script> 
view plain | print | ?

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.

Copyright © 2008 Yahoo! Inc. All rights reserved.

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