<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 showing the next month" and "Toggle showing the previous month" 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}}

```