Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Calendar Control: Quickstart Tutorial

# Calendar Control: Quickstart Tutorial

This basic example walks you through the steps needed to get a default Calendar up and running. It covers the set of file dependencies which need to be included as well as the basic markup and JS code required to get you started.

View example in new window.

## Setting up the Calendar

Calendar has three required dependencies: the YAHOO Global object, the Event Utility, and the DOM Collection.

In addition, the JavaScript and CSS files for Calendar must be included. You can see what the full list of included files looks like below. The CSS file we choose to include is the default skin (look) for YUI, named "sam".

Note: Your file paths may vary depending on the location in which you installed the YUI libraries. The Calendar examples, when referring to file paths, use the build directory as the root for the YUI distribution.

<script type="text/javascript" src="build/yahoo/yahoo.js"></script> <script type="text/javascript" src="build/event/event.js" ></script> <script type="text/javascript" src="build/dom/dom.js" ></script> <script type="text/javascript" src="build/calendar/calendar.js"></script> <link type="text/css" rel="stylesheet" href="build/calendar/assets/skins/sam/calendar.css">

The only markup required by Calendar is an initial empty DIV into which the Calendar will be rendered. The DIV should have a unique id specified in the markup, which will match the id passed to the Calendar's constructor.

The markup for our simple Calendar example looks like this:

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

Finally, the Calendar can be instantiated in a script block, like this:

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

Note that to avoid using the global variable space, we are placing our example Calendar's variable and the init function, into the YAHOO.example.calendar namespace (see line 2 above). For more information about namespacing, see the YAHOO Global object.

The constructor in our example (line 5) takes two arguments: the id to be used for our new Calendar's table, which is created dynamically ("cal1" in this example) and the id of the inital container where we want to render the Calendar ("cal1Container" in this case).

We are also specifying that the init() function should not be executed until the the DOM for the page is ready, using the Event Utility. This allows us to create the Calendar as soon as the browser processes the markup on the page, and not have to wait for images to load.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Calendar Control Examples:

- Quickstart Tutorial
- Multi-Select Calendar
- Multi-Page Calendar
- Minimum/Maximum Dates
- Handling Calendar Events
- Calendar and Text Fields
- Calendar and Select Fields
- Using the Render Stack
- Popup Calendar
- Localization - Germany
- Localization - Japan
- Skinning The Calendar
- Calendar Plugin (included with examples for Rich Text Editor (beta))
- Inline Cell Editing (included with examples for DataTable Control (beta))
- Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility (beta))

### More Calendar Control Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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