Calendar: Make sure option numberOfMonth could be changed after creation

2 files changed, 18 insertions, 12 deletions

diff --git a/tests/unit/calendar/options.js b/tests/unit/calendar/options.js
index c77841359..abfbaf016 100644
--- a/tests/unit/calendar/options.js
+++ b/tests/unit/calendar/options.js
@@ -278,13 +278,10 @@ QUnit.test( "numberOfMonths", function( assert ) {
 
 	var date = new Date( 2015, 8 - 1, 1 );
 
-	// Number of month option does not work after init
-	this.element
-		.calendar( "destroy" )
-		.calendar( {
-			numberOfMonths: 3,
-			value: date
-		} );
+	this.element.calendar( "option", {
+		numberOfMonths: 3,
+		value: date
+	} );
 
 	assert.equal( this.widget.find( ".ui-calendar-group" ).length, 3, "3 calendar grids" );
 	assert.equal(
@@ -304,10 +301,7 @@ QUnit.test( "numberOfMonths", function( assert ) {
 		"After mousedown last month: Last day is Saturday"
 	);
 
-	// Test if using cursor to go to the next / prev month advances three month
-	// Focus doesn't work here so we use an additional mouse down event
-	this.widget.find( "tbody:first td[id]:first button" ).trigger( "mousedown" );
-	$( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
+	this.widget.find( "button.ui-calendar-prev" ).simulate( "click" );
 	assert.equal( this.widget.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 256347054..4bac6c326 100644
--- a/ui/widgets/calendar.js
+++ b/ui/widgets/calendar.js
@@ -703,12 +703,16 @@ return $.widget( "ui.calendar", {
 
 	_setOptions: function( options ) {
 		var that = this,
+			create = false,
 			refresh = false,
 			dateAttributes = false;
 
 		$.each( options, function( key, value ) {
 			that._setOption( key, value );
 
+			if ( key === "numberOfMonths" ) {
+				create = true;
+			}
 			if ( key in that.refreshRelatedOptions ) {
 				refresh = true;
 			}
@@ -722,8 +726,16 @@ return $.widget( "ui.calendar", {
 			this.date.setAttributes( this._calendarDateOptions );
 			this.viewDate.setAttributes( this._calendarDateOptions );
 		}
-		if ( refresh ) {
+		if ( create || refresh ) {
 			this.viewDate.setTime( this.date.date().getTime() );
+		}
+		if ( create ) {
+			this.element.empty();
+			this._removeClass( this.element, "ui-calendar-multi" );
+			this._createCalendar();
+			refresh = false;
+		}
+		if ( refresh ) {
 			this.refresh();
 		}
 	},