Calendar: Fix view when moving between multiple months with keyboard

Make sure numberOfMonths is taken into account while navigating with keyboard
when rendering multiple calendar grids (numberOfMonths > 1).

diff --git a/tests/unit/calendar/options.js b/tests/unit/calendar/options.js
index 93f1995801558a9c0178298daf8cd3bfab46d2c6..01522ebee2b26cbf53c55e966fce526457dcd36b 100644 (file)
--- a/tests/unit/calendar/options.js
+++ b/tests/unit/calendar/options.js
@@ -257,9 +257,17 @@ test( "numberOfMonths", function() {
        );
 
        // Test for jumping in weekday rendering after click on last day of last grid
-       equal( container.find( "thead:last th:last" ).text(), "Sa", "Before click: Last day is saturday" );
        container.find( "tbody:last td[id]:last button" ).trigger( "mousedown" );
-       equal( container.find( "thead:last th:last" ).text(), "Sa", "After click: Last day is saturday" );
+       equal( container.find( "thead:last th:last" ).text(), "Sa",
+               "After mousedown last month: Last day is Saturday"
+       );
+
+       // Test if using cursor down to go to the next month advances three month
+       container.find( "tbody:first td[id]:first button" ).trigger( "mousedown" );
+       $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
+       equal( container.find( ".ui-calendar-month:first" ).text(), "May",
+               "After move to previous month: First month is May"
+       );
 });
 
 /*

diff --git a/ui/widgets/calendar.js b/ui/widgets/calendar.js
index a9a18994733d160e3d0535537eb6da0654947fa1..5952a184f2736013a36dd2affcd0d95399900993 100644 (file)
--- a/ui/widgets/calendar.js
+++ b/ui/widgets/calendar.js
@@ -150,7 +150,14 @@ return $.widget( "ui.calendar", {
                }
 
                if ( this._needsRefresh() ) {
-                       this._refresh();
+                       if ( this.options.numberOfMonths > 1 && this.date.year() === this.viewDate.year() ) {
+                               this.viewDate.adjust( "M", this.options.numberOfMonths *
+                                       ( this.date.month() > this.viewDate.month() ? 1 : -1 )
+                               );
+                               this.refresh();
+                       } else {
+                               this._refresh();
+                       }
                        this.grid.focus();
                }