diff --git a/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json
new file mode 100644
index 00000000000000..c3c4a5f41b02d7
--- /dev/null
+++ b/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": "aur@gmx.de"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx
index f44ab13a7ce206..cf50e4755bc670 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx
+++ b/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', () => {
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
index 8326b0fc239564..a79e89f50895ce 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
+++ b/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',
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts
index dc2b7d68f0856d..d6401d66e5f613 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts
+++ b/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