Added className to Calendar component

common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Added optional className property to Calendar",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -171,6 +171,7 @@ describe('Calendar', () => {
           dateRangeType={ DateRangeType.Week }
           autoNavigateOnSelection={ true }
           onSelectDate={ onSelectDate() }
+          className='CalendarTestClass'
         />) as Calendar;
     });
 
@@ -244,6 +245,17 @@ describe('Calendar', () => {
       expect(lastSelectedDateRange!.length).toEqual(7);
       lastSelectedDateRange!.forEach((val, i) => expect(compareDates(val, addDays(firstDate, i))).toEqual(true));
     });
+
+    it('Verify class name', () => {
+      const calendarRoot = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'CalendarTestClass');
+      expect(calendarRoot).toBeDefined();
+      expect(calendarRoot.length).toEqual(1);
+      const root = calendarRoot[0];
+      expect(root.classList).toBeDefined();
+      expect(root.classList.length).toEqual(2);
+      expect(root.classList[0]).toEqual('ms-DatePicker');
+      expect(root.classList[1]).toEqual('CalendarTestClass');
+    });
   });
 
   describe('render with date boundaries', () => {

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

@@ -124,14 +124,14 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
 
   public render(): JSX.Element {
     const rootClass = 'ms-DatePicker';
-    const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, highlightSelectedMonth, navigationIcons, minDate, maxDate } = this.props;
+    const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, highlightSelectedMonth, navigationIcons, minDate, maxDate, className } = this.props;
     const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state;
     const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined;
     const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;
     const overlayedWithButton = showMonthPickerAsOverlay && showGoToToday;
 
     return (
-      <div className={ css(rootClass, styles.root) } role='application'>
+      <div className={ css(rootClass, styles.root, className) } role='application'>
         <div
           className={ css(
             'ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused',

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

@@ -16,6 +16,11 @@ export interface ICalendarProps extends React.Props<Calendar> {
    */
   componentRef?: (component: ICalendar | null) => void;
 
+  /**
+   * Optional class name to add to the root element.
+   */
+  className?: string;
+
   /**
   * Callback issued when a date is selected
   * @param date - The date the user selected