diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js
index 3c7ddc23e..5cf1e25da 100644
--- a/src/components/Calendar/index.js
+++ b/src/components/Calendar/index.js
@@ -44,6 +44,8 @@ class Calendar extends PureComponent {
     this.estimateMonthSize = this.estimateMonthSize.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
     this.dateOptions = { locale: props.locale };
+    if (this.props.weekStartsOn !== undefined)
+      this.dateOptions.weekStartsOn = this.props.weekStartsOn;
     this.styles = generateStyles([coreStyles, props.classNames]);
     this.listSizeCache = {};
     this.isFirstRender = true;
@@ -127,18 +129,25 @@ class Calendar extends PureComponent {
       date: 'date',
     };
     const targetProp = propMapper[this.props.displayMode];
-    if (prevProps.locale !== this.props.locale) {
+    if (this.props[targetProp] !== prevProps[targetProp]) {
+      this.updateShownDate(this.props);
+    }
+
+    if (
+      prevProps.locale !== this.props.locale ||
+      prevProps.weekStartsOn !== this.props.weekStartsOn
+    ) {
       this.dateOptions = { locale: this.props.locale };
+      if (this.props.weekStartsOn !== undefined)
+        this.dateOptions.weekStartsOn = this.props.weekStartsOn;
       this.setState({
         monthNames: [...Array(12).keys()].map(i => this.props.locale.localize.month(i)),
       });
     }
+
     if (JSON.stringify(prevProps.scroll) !== JSON.stringify(this.props.scroll)) {
       this.setState({ scrollArea: this.calcScrollArea(this.props) });
     }
-    if (this.props[targetProp] !== prevProps[targetProp]) {
-      this.updateShownDate(this.props);
-    }
   }
 
   changeShownDate(value, mode = 'set') {
@@ -544,6 +553,7 @@ Calendar.propTypes = {
   dateDisplayFormat: PropTypes.string,
   monthDisplayFormat: PropTypes.string,
   weekdayDisplayFormat: PropTypes.string,
+  weekStartsOn: PropTypes.number,
   dayDisplayFormat: PropTypes.string,
   focusedRange: PropTypes.arrayOf(PropTypes.number),
   initialFocusedRange: PropTypes.arrayOf(PropTypes.number),
diff --git a/src/components/DateRange/README.md b/src/components/DateRange/README.md
index 50b8c9978..f26451ce5 100644
--- a/src/components/DateRange/README.md
+++ b/src/components/DateRange/README.md
@@ -1,5 +1,14 @@
-#### Example: Editable Date Inputs
+This component extends all the props of **[Calendar](#calendar)** component. In addition to those props, it has the following props: 
+
+| Prop Name  |  Type |
+|---|---|
+|  **moveRangeOnFirstSelection** |  boolean |
+|   **onRangeFocusChange** |  function |
+|   **rangeColors**  |  array |
+|   **ranges**  |  array |
 
+
+#### Example: Editable Date Inputs
 ```jsx inside Markdown
 import {useState} from 'react'
 const [state, setState] = useState([
diff --git a/src/components/DateRangePicker/README.md b/src/components/DateRangePicker/README.md
index 8957db70e..5f044a8a1 100644
--- a/src/components/DateRangePicker/README.md
+++ b/src/components/DateRangePicker/README.md
@@ -1,3 +1,5 @@
+This component wraps **[DefinedRange](#definedrange)** and **[Calendar](#calendar)** components together, and extends all the props of them.
+
 #### Example: 2 Month View
 
 ```jsx inside Markdown
diff --git a/styleguide.config.js b/styleguide.config.js
index 729e0ef29..617bd20cd 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -109,6 +109,7 @@ module.exports = {
         },
         {
           components: () => ['src/components/DateRange/index.js'],
+          usageMode: 'hide',
         },
         {
           components: () => ['src/components/Calendar/index.js'],