Example: Simple Calendar with Selection

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.

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.

Toggle Previous Month's Dates

Toggle Next Month's Dates

Selected date:

Complete Example Source

<!-- Load the YUI CSSButton CSS file from gallery to create simple and quick buttons -->
<link href="http://yui.yahooapis.com/gallery-2011.08.31-20-57/build/gallerycss-cssbutton/gallerycss-cssbutton.css" type="text/css" rel="stylesheet" />

<!-- Add an additional blue button style -->
<style>
.yui3-skin-sam .yui3-button-color-blue {
  color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#599bdc), to(#3476b7));
  background-image: -webkit-linear-gradient(top, #599bdc, #3476b7);
  background-image: -moz-linear-gradient(top, #599bdc, #3476b7);
  background-image: -ms-linear-gradient(top, #599bdc, #3476b7);
  background-image: -o-linear-gradient(top, #599bdc, #3476b7);
  background-image: linear-gradient(top, #599bdc, #3476b7);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#599bdc', EndColorStr='#3476b7');
  background-color: #3476b7;
}
</style>

<div id="demo" class="yui3-skin-sam yui3-g">
  <div id="leftcolumn" class="yui3-u">
     <!-- Container for the calendar -->
     <div id="mycalendar"></div>
  </div>
  <div id="rightcolumn" class="yui3-u">
   <div id="links" style="padding-left:20px;">
      <!-- The buttons are created simply by assigning the correct CSS class -->
      <div id="togglePrevMonth" class="yui3-button yui3-button-color-blue">Toggle Previous Month's Dates</div><br>
      <div id="toggleNextMonth" class="yui3-button yui3-button-color-blue">Toggle Next Month's Dates</div><br>
      Selected date: <span id="selecteddate"></span>
   </div>
  </div>
</div>

<script type="text/javascript">
YUI().use('calendar', 'datatype-date',  function(Y) {
    
    // Create a new instance of calendar, placing it in 
    // #mycalendar container, setting its width to 340px,
    // the flags for showing previous and next month's 
    // dates in available empty cells to true, and setting 
    // the date to August 2011.           
    var calendar = new Y.Calendar({
      contentBox: "#mycalendar",
      width:'340px',
      showPrevMonth: true,
      showNextMonth: true,
      date: new Date(2011, 07, 01)}).render();
    
    // Get a reference to Y.DataType.Date
    var dtdate = Y.DataType.Date;

    // Listen to calendar's selectionChange event.
    calendar.on("selectionChange", function (ev) {

      // Get the date from the list of selected
      // dates returned with the event (since only
      // single selection is enabled by default,
      // we expect there to be only one date)
      var newDate = ev.newSelection[0];

      // Format the date and output it to a DOM
      // element.
      Y.one("#selecteddate").setContent(dtdate.format(newDate));
    });


    // When the 'Show Previous Month' link is clicked,
    // modify the showPrevMonth property to show or hide
    // previous month's dates
    Y.one("#togglePrevMonth").on('click', function (ev) {
      ev.preventDefault();
      calendar.set('showPrevMonth', !(calendar.get("showPrevMonth")));      
    });

    // When the 'Show Next Month' link is clicked,
    // modify the showNextMonth property to show or hide
    // next month's dates
    Y.one("#toggleNextMonth").on('click', function (ev) {
      ev.preventDefault();
      calendar.set('showNextMonth', !(calendar.get("showNextMonth")));      
    });
});
</script>

Example: Simple Calendar with Selection

Complete Example Source

Examples