1015N/A<style>

1015N/A.yui3-button {

1015N/A margin:10px 0px 10px 0px;

1015N/A color: #fff;

1015N/A background-color: #3476b7;

1015N/A}

1015N/A</style>

1015N/A

1015N/A<div id="demo" class="yui3-skin-sam yui3-g">

1015N/A <div id="leftcolumn" class="yui3-u">

1015N/A <!-- Container for the calendar -->

1015N/A <div id="mycalendar"></div>

1015N/A </div>

1015N/A <div id="rightcolumn" class="yui3-u">

1015N/A <div id="links" style="padding-left:20px;">

1015N/A <!-- The buttons are created simply by assigning the correct CSS class -->

1015N/A <button id="togglePrevMonth" class="yui3-button">Toggle Previous Month's Dates</button><br>

1015N/A <button id="toggleNextMonth" class="yui3-button">Toggle Next Month's Dates</button><br>

1015N/A Selected date: <span id="selecteddate"></span>

1015N/A </div>

1015N/A </div>

1015N/A</div>

1015N/A

1015N/A<script type="text/javascript">

1015N/AYUI().use('calendar', 'datatype-date', 'cssbutton', function(Y) {

1015N/A

1015N/A // Create a new instance of calendar, placing it in

1015N/A // #mycalendar container, setting its width to 340px,

1015N/A // the flags for showing previous and next month's

1015N/A // dates in available empty cells to true, and setting

1015N/A // the date to today's date.

1015N/A var calendar = new Y.Calendar({

1015N/A contentBox: "#mycalendar",

1015N/A width:'340px',

1015N/A showPrevMonth: true,

1015N/A showNextMonth: true,

1015N/A date: new Date()}).render();

1015N/A

1015N/A // Get a reference to Y.DataType.Date

1015N/A var dtdate = Y.DataType.Date;

1015N/A

1015N/A // Listen to calendar's selectionChange event.

1015N/A calendar.on("selectionChange", function (ev) {

1015N/A

1015N/A // Get the date from the list of selected

1015N/A // dates returned with the event (since only

1015N/A // single selection is enabled by default,

1015N/A // we expect there to be only one date)

1015N/A var newDate = ev.newSelection[0];

1015N/A

1015N/A // Format the date and output it to a DOM

1015N/A // element.

1015N/A Y.one("#selecteddate").setContent(dtdate.format(newDate));

1015N/A });

1015N/A

1015N/A

1015N/A // When the 'Show Previous Month' link is clicked,

1015N/A // modify the showPrevMonth property to show or hide

1015N/A // previous month's dates

1015N/A Y.one("#togglePrevMonth").on('click', function (ev) {

1015N/A ev.preventDefault();

1015N/A calendar.set('showPrevMonth', !(calendar.get("showPrevMonth")));

1015N/A });

1015N/A

1015N/A // When the 'Show Next Month' link is clicked,

1015N/A // modify the showNextMonth property to show or hide

1015N/A // next month's dates

1015N/A Y.one("#toggleNextMonth").on('click', function (ev) {

1015N/A ev.preventDefault();

1015N/A calendar.set('showNextMonth', !(calendar.get("showNextMonth")));

1015N/A });

1015N/A});

1015N/A</script>

1015N/A