Calendar: make today configurable to support different timezone

common/changes/users-hykwon-fixToday_2017-05-04-14-37.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Calendar: make today value configurable to support different timezone",
+      "type": "minor"
+    }
+  ],
+  "email": "hykwon@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Calendar/Calendar.Props.ts

@@ -34,6 +34,11 @@ export interface ICalendarProps extends React.Props<Calendar> {
    */
   isMonthPickerVisible?: boolean;
 
+  /**
+    * Value of today. If null, current time in client machine will be used.
+    */
+  today?: Date;
+
   /**
    * Default value of the Calendar, if any
    */

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

@@ -27,6 +27,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     onDismiss: null,
     isMonthPickerVisible: true,
     value: null,
+    today: new Date(),
     firstDayOfWeek: DayOfWeek.Sunday,
     dateRangeType: DateRangeType.Day,
     autoNavigateOnSelection: false,
@@ -45,7 +46,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   constructor(props: ICalendarProps) {
     super();
 
-    let currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : new Date();
+    let currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date());
     this.state = {
       selectedDate: currentDate,
       navigatedDate: currentDate
@@ -55,7 +56,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   }
 
   public componentWillReceiveProps(nextProps: ICalendarProps) {
-    let { autoNavigateOnSelection, value } = nextProps;
+    let { autoNavigateOnSelection, value, today = new Date() } = 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
@@ -67,7 +68,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     }
 
     this.setState({
-      selectedDate: value || new Date()
+      selectedDate: value || today
     });
   }
 
@@ -98,6 +99,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
                 <CalendarDay
                   selectedDate={ selectedDate }
                   navigatedDate={ navigatedDate }
+                  today={ this.props.today }
                   onSelectDate={ this._onSelectDate }
                   onNavigateDate={ this._onNavigateDate }
                   onDismiss={ this.props.onDismiss }
@@ -161,7 +163,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
 
   @autobind
   private _onGotoToday() {
-    this._navigateDay(new Date());
+    this._navigateDay(this.props.today);
     this._focusOnUpdate = true;
   };
 

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

@@ -47,6 +47,7 @@ export interface ICalendarDayProps {
   firstDayOfWeek: DayOfWeek;
   dateRangeType: DateRangeType;
   autoNavigateOnSelection: boolean;
+  today?: Date;
 }
 
 export interface ICalendarDayState {
@@ -63,18 +64,22 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
   public constructor(props: ICalendarDayProps) {
     super(props);
 
+    const { navigatedDate, selectedDate, today } = props;
+
     this.state = {
       activeDescendantId: getId('DatePickerDay-active'),
-      weeks: this._getWeeks(props.navigatedDate, props.selectedDate)
+      weeks: this._getWeeks(navigatedDate, selectedDate, today)
     };
 
     this._onSelectNextMonth = this._onSelectNextMonth.bind(this);
     this._onSelectPrevMonth = this._onSelectPrevMonth.bind(this);
   }
 
   public componentWillReceiveProps(nextProps: ICalendarDayProps) {
+    const { navigatedDate, selectedDate, today } = nextProps;
+
     this.setState({
-      weeks: this._getWeeks(nextProps.navigatedDate, nextProps.selectedDate)
+      weeks: this._getWeeks(navigatedDate, selectedDate, today)
     });
   }
 
@@ -246,10 +251,10 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     }
   }
 
-  private _getWeeks(navigatedDate: Date, selectedDate: Date): IDayInfo[][] {
+  private _getWeeks(navigatedDate: Date, selectedDate: Date, todayDate: Date): IDayInfo[][] {
     let { firstDayOfWeek, dateRangeType } = this.props;
     let date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);
-    let today = new Date();
+    let today = todayDate || new Date();
     let weeks = [];
     let week;