Calendar component: Support auto-navigation when selected date changes via props

common/changes/master_2017-04-27-00-31.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Calendar: Support auto-navigation to next/previous month when selected date changes via props",
+      "type": "patch"
+    }
+  ],
+  "email": "johannao@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx

@@ -3,6 +3,7 @@ import { ICalendar, ICalendarProps } from './Calendar.Props';
 import { DayOfWeek, DateRangeType } from '../../utilities/dateValues/DateValues';
 import { CalendarDay } from './CalendarDay';
 import { CalendarMonth } from './CalendarMonth';
+import { compareDates } from '../../utilities/dateMath/DateMath';
 import {
   autobind,
   css,
@@ -54,7 +55,16 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   }
 
   public componentWillReceiveProps(nextProps: ICalendarProps) {
-    let { value } = nextProps;
+    let { autoNavigateOnSelection, value } = nextProps;
+
+    // Make sure auto-navigation is supported for programmatic changes to selected date, i.e.,
+    // if selected date is updated via props, we may need to modify the navigated date
+    let overrideNavigatedDate = (autoNavigateOnSelection && !compareDates(value, this.props.value));
+    if (overrideNavigatedDate) {
+      this.setState({
+        navigatedDate: value
+      });
+    }
 
     this.setState({
       selectedDate: value || new Date()

packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx

@@ -30,11 +30,11 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
             </ExampleCard>
             <ExampleCard title='Inline Calendar with week selection' code={ CalendarInlineExampleCode }>
               <CalendarInlineExample isMonthPickerVisible={ true } dateRangeType={ DateRangeType.Week } autoNavigateOnSelection={ true }
-                showGoToToday={ true } />
+                showGoToToday={ true } showNavigateButtons={ true } />
             </ExampleCard>
             <ExampleCard title='Inline Calendar with month selection' code={ CalendarInlineExampleCode }>
               <CalendarInlineExample isMonthPickerVisible={ true } dateRangeType={ DateRangeType.Month } autoNavigateOnSelection={ true }
-                showGoToToday={ true } />
+                showGoToToday={ true } showNavigateButtons={ true } />
             </ExampleCard>
             <ExampleCard title='Calendar launched from a button' code={ CalendarButtonExampleCode }>
               <CalendarButtonExample />

packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Button } from 'office-ui-fabric-react/lib/Button';
+import { addDays, getDateRangeArray } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
 import {
   Calendar,
   DayOfWeek
@@ -69,6 +71,7 @@ export interface ICalendarInlineExampleProps {
   dateRangeType: DateRangeType;
   autoNavigateOnSelection: boolean;
   showGoToToday: boolean;
+  showNavigateButtons?: boolean;
 }
 
 export class CalendarInlineExample extends React.Component<ICalendarInlineExampleProps, ICalendarInlineExampleState> {
@@ -82,14 +85,20 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
 
     this._onDismiss = this._onDismiss.bind(this);
     this._onSelectDate = this._onSelectDate.bind(this);
+    this._goNext = this._goNext.bind(this);
+    this._goPrevious = this._goPrevious.bind(this);
   }
 
   public render() {
     let divStyle: React.CSSProperties = {
-      height: '300px',
+      height: '330px',
       width: '400px'
     };
 
+    let buttonStyle: React.CSSProperties = {
+      margin: '0 10px 0 0'
+    };
+
     let dateRangeString: string = null;
     if (this.state.selectedDateRange != null) {
       let rangeStart = this.state.selectedDateRange[0];
@@ -118,6 +127,12 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
           strings={ DayPickerStrings }
         >
         </Calendar>
+        { this.props.showNavigateButtons &&
+          <div>
+            <Button style={ buttonStyle } onClick={ this._goPrevious } text='Previous' />
+            <Button style={ buttonStyle } onClick={ this._goNext } text='Next' />
+          </div>
+        }
       </div>
     );
   }
@@ -128,6 +143,33 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
     });
   }
 
+  private _goPrevious() {
+    this.setState((prevState: ICalendarInlineExampleState) => {
+      let selectedDate = prevState.selectedDate || new Date();
+      let dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday);
+
+      let subtractFrom = dateRangeArray[0];
+      let daysToSubtract = dateRangeArray.length;
+
+      if (this.props.dateRangeType === DateRangeType.Month) {
+        subtractFrom = new Date(subtractFrom.getFullYear(), subtractFrom.getMonth(), 1);
+        daysToSubtract = 1;
+      }
+
+      let newSelectedDate = addDays(subtractFrom, -daysToSubtract);
+      return prevState.selectedDate = newSelectedDate;
+    });
+  }
+
+  private _goNext() {
+    this.setState((prevState: ICalendarInlineExampleState) => {
+      let selectedDate = prevState.selectedDate || new Date();
+      let dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday);
+      let newSelectedDate = addDays(dateRangeArray.pop(), 1);
+      return prevState.selectedDate = newSelectedDate;
+    });
+  }
+
   private _onSelectDate(date: Date, dateRangeArray: Date[]) {
     this.setState((prevState: ICalendarInlineExampleState) => {
       prevState.selectedDate = date;