YUI Calendar: Tutorials

YUI Calendar Interactive Tutorials

The YUI Calendar Tutorials provide you with working examples of several common uses of the Calendar component. Each tutorial contains a working functional example, plus documentation describing how it works.

Quickstart Tutorial

Quickly get up and running with the most basic Calendar.

Multi-Select Calendar

Set up a Calendar that allows for the selection of one or more dates, rather than the single-select default.

Dual Calendars

Learn how to instantiate a Calendar with more than one month shown at a time.

Minimum / Maximum Dates

Configure the Calendar to disallow selection before or beyond specified date limits.

Handling Events

Use Calendar's events to react to various interesting moments, such as the selection or deselection of dates.

Calendar & Text Fields

Populate a form text input field using the Calendar's selected date and vice versa.

Calendar & Select Fields

Populate a series of form select input fields using the Calendar's selected date and vice versa.

Using the Render Stack

Configure custom functions that can be used to perform special rendering for specific dates or ranges of dates.

Localization: Germany

Use localization features to customize the Calendar for use in Germany.

Localization: Japan

Use localization features to customize the CalendarGroup for use in Japan.

Popup Calendar

Configure and Calendar and CalendarGroup for use as a popup layer that is displayed above the document.