Setting up the Calendar

Although the default Calendar control only allows for a single selection to be made, it's easy to configure a Calendar to accept multiple selections.

The markup for our multi-select Calendar example looks indentical to the 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 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"); function init() { YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT: true } ); YAHOO.example.calendar.cal1.render(); } YAHOO.util.Event.addListener(window, "load", 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.