<style>

.example {

font-size:15px;

}

.example h4 {

border: none;

text-transform: none;

}

.example th {

background: none;

color: #000;

text-transform: none;

border: none;

}

</style>

<div class="intro">

<p>

This example demonstrates how to instantiate a simple Calendar, with an initial date setting of September 2011. The Calendar is preconfigured to show the previous and next month's dates.

</p>

<p>

Try clicking on the toggle buttons to change the initial settings for showing the previous and next months' dates. You can also select dates in the calendar and see selected date on the right, reported via a `selectionChange` event, and formatted using DataType utility.

</p>

</div>

<div class="example yui3-skin-sam">

{{>calendar-simple-source}}

</div>

<h2>Complete Example Source</h2>

```

{{>calendar-simple-source}}

```