Setting up the Calendar

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

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.

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.

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.