Fork me on GitHub

Example: Navigation by year (and month)

Add navigation by year and month selector in a Calendar instance.

Basic example

Click on the month's label to display a new navigator in a panel.

Try with another locale (fr)

Two-pane Calendar

HTML

<div class='demoContainer' id='container1'></div>
<div class='demoContainer' id='container2'></div>
<div class='demoContainer' id='container3'></div>

JavaScript

Implementation

// example 1
YUI().use('calendar', 'inputex-calendar-year-navigator-plugin', function(Y) {
   
   var calendar = new Y.Calendar({
         contentBox: '#container1',
         width: "350px",
         showPrevMonth: true,
         showNextMonth: true,
         disabledDatesRule: 'disabled_days',
         // add the plugin to the config
         plugins: [Y.Plugin.CalendarYearNavigator]
   });
   
   calendar.render();
   
});

// example 2
YUI({ lang: 'fr' }).use('calendar', 'inputex-calendar-year-navigator-plugin', function(Y) {
   
   var calendar = new Y.Calendar({
         contentBox: '#container2',
         width: "350px",
         showPrevMonth: true,
         showNextMonth: true,
         disabledDatesRule: 'disabled_days'
   });
   
   calendar.render();
   
   // you can also manually plug calendarNavigationPlugin on the instance,
   // before or after the rendering.
   calendar.plug(Y.Plugin.CalendarYearNavigator);
   
});

// example 3
YUI().use('calendar', 'inputex-calendar-year-navigator-plugin', function(Y) {
   
   Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;
   
   var calendar = new Y.Calendar({
         contentBox: '#container3',
         width: "700px",
         showPrevMonth: true,
         showNextMonth: true,
         disabledDatesRule: 'disabled_days',
         headerRenderer: function (curDate) {
            var ydate = Y.DataType.Date;
            return (ydate.format(curDate, {format: "%B %Y"}) +
               " &mdash; " +
               ydate.format(ydate.addMonths(curDate, 1), {format: "%B %Y"}));
           }
   });
   
   calendar.plug(Y.Plugin.CalendarYearNavigator);
   calendar.render();
   
});