diff --git a/lib/Calendar.js b/lib/Calendar.js
index 75ac03294..9fbb49c85 100644
--- a/lib/Calendar.js
+++ b/lib/Calendar.js
@@ -104,7 +104,7 @@ var Calendar = (function (_Component) {
       var range = nextProps.range;
       var offset = nextProps.offset;
 
-      if (range && range['endDate'] && !range['endDate'].isSame(range['startDate'])) {
+      if (range && range['endDate'] && !range['endDate'].isSame(range['startDate'], 'day')) {
         this.setState({ shownDate: range['endDate'].clone().add(offset, 'months') });
       }
     }
diff --git a/lib/DateRange.js b/lib/DateRange.js
index 84867ed45..c4ad17bc2 100644
--- a/lib/DateRange.js
+++ b/lib/DateRange.js
@@ -178,12 +178,17 @@ var DateRange = (function (_Component) {
       var offsetPositive = _props.offsetPositive;
       var shownDate = _props.shownDate;
       var showMonthArrow = _props.showMonthArrow;
+      var rangedCalendars = _props.rangedCalendars;
       var _state = this.state;
       var range = _state.range;
       var link = _state.link;
       var styles = this.styles;
 
       var classes = _extends({}, _stylesJs.defaultClasses, classNames);
+      var yearsDiff = range.endDate.year() - range.startDate.year();
+      var monthsDiff = range.endDate.month() - range.startDate.month();
+      var diff = yearsDiff * 12 + monthsDiff;
+      var calendarsCount = Number(calendars) - 1;
 
       return _react2['default'].createElement(
         'div',
@@ -199,14 +204,18 @@ var DateRange = (function (_Component) {
         (function () {
           var _calendars = [];
           var _method = offsetPositive ? 'unshift' : 'push';
-          for (var i = Number(calendars) - 1; i >= 0; i--) {
+          for (var i = calendarsCount; i >= 0; i--) {
+            var offset = offsetPositive ? i : -i;
+            var realDiff = offsetPositive ? diff : -diff;
+            var realOffset = rangedCalendars && i == calendarsCount && diff != 0 ? realDiff : offset;
+
             _calendars[_method](_react2['default'].createElement(_CalendarJs2['default'], {
               showMonthArrow: showMonthArrow,
               shownDate: shownDate,
               disableDaysBeforeToday: disableDaysBeforeToday,
               lang: lang,
               key: i,
-              offset: offsetPositive ? i : -i,
+              offset: realOffset,
               link: linkedCalendars && link,
               linkCB: _this.handleLinkChange.bind(_this),
               range: range,
@@ -235,7 +244,8 @@ DateRange.defaultProps = {
   calendars: 2,
   onlyClasses: false,
   offsetPositive: false,
-  classNames: {}
+  classNames: {},
+  rangedCalendars: false
 };
 
 DateRange.propTypes = {
@@ -254,7 +264,8 @@ DateRange.propTypes = {
   onChange: _react.PropTypes.func,
   onlyClasses: _react.PropTypes.bool,
   offsetPositive: _react.PropTypes.bool,
-  classNames: _react.PropTypes.object
+  classNames: _react.PropTypes.object,
+  rangedCalendars: _react.PropTypes.bool
 };
 
 exports['default'] = DateRange;
diff --git a/lib/DayCell.js b/lib/DayCell.js
index 91671a44c..dbd0e8c78 100644
--- a/lib/DayCell.js
+++ b/lib/DayCell.js
@@ -145,7 +145,7 @@ var DayCell = (function (_Component) {
       return _react2['default'].createElement(
         'span',
         {
-          style: dayWrapperStyles,
+          style: onlyClasses ? undefined : dayWrapperStyles,
           onClick: this.handleSelect.bind(this) },
         _react2['default'].createElement(
           'span',
diff --git a/src/Calendar.js b/src/Calendar.js
index a5ecdbbfb..b953000f8 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -61,7 +61,7 @@ class Calendar extends Component {
   componentWillReceiveProps(nextProps) {
     const { range, offset } = nextProps;
 
-    if(range && range['endDate'] && !range['endDate'].isSame(range['startDate'])) {
+    if(range && range['endDate'] && !range['endDate'].isSame(range['startDate'], 'day')) {
       this.setState({ shownDate : range['endDate'].clone().add(offset, 'months') })
     }
   }
diff --git a/src/DateRange.js b/src/DateRange.js
index 2996f7a10..348116260 100644
--- a/src/DateRange.js
+++ b/src/DateRange.js
@@ -106,11 +106,15 @@ class DateRange extends Component {
   }
 
   render() {
-    const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek, minDate, maxDate, classNames, onlyClasses, lang, disableDaysBeforeToday, offsetPositive, shownDate, showMonthArrow } = this.props;
+    const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek, minDate, maxDate, classNames, onlyClasses, lang, disableDaysBeforeToday, offsetPositive, shownDate, showMonthArrow, rangedCalendars } = this.props;
     const { range, link } = this.state;
     const { styles } = this;
 
     const classes = { ...defaultClasses, ...classNames };
+    const yearsDiff = range.endDate.year() - range.startDate.year();
+    const monthsDiff = range.endDate.month() - range.startDate.month();
+    const diff = yearsDiff * 12 + monthsDiff;
+    const calendarsCount = Number(calendars) - 1;
 
     return (
       <div style={onlyClasses ? undefined : { ...styles['DateRange'], ...style }} className={classes.dateRange}>
@@ -128,7 +132,11 @@ class DateRange extends Component {
         {()=>{
           const _calendars = [];
           const _method = offsetPositive ? 'unshift' : 'push';
-          for (var i = Number(calendars) - 1; i >= 0; i--) {
+          for (var i = calendarsCount; i >= 0; i--) {
+            const offset = offsetPositive ? i : -i;
+            const realDiff = offsetPositive ? diff : -diff;
+            const realOffset = (rangedCalendars && i == calendarsCount && diff != 0) ? realDiff : offset;
+
             _calendars[_method](
               <Calendar
                 showMonthArrow={ showMonthArrow }
@@ -136,7 +144,7 @@ class DateRange extends Component {
                 disableDaysBeforeToday={ disableDaysBeforeToday }
                 lang={ lang }
                 key={i}
-                offset={ offsetPositive ? i : -i }
+                offset={ realOffset }
                 link={ linkedCalendars && link }
                 linkCB={ this.handleLinkChange.bind(this) }
                 range={ range }
@@ -164,7 +172,8 @@ DateRange.defaultProps = {
   calendars       : 2,
   onlyClasses     : false,
   offsetPositive  : false,
-  classNames      : {}
+  classNames      : {},
+  rangedCalendars : false,
 }
 
 DateRange.propTypes = {
@@ -183,7 +192,8 @@ DateRange.propTypes = {
   onChange        : PropTypes.func,
   onlyClasses     : PropTypes.bool,
   offsetPositive  : PropTypes.bool,
-  classNames      : PropTypes.object
+  classNames      : PropTypes.object,
+  rangedCalendars : PropTypes.bool,
 }
 
 export default DateRange;
diff --git a/src/DayCell.js b/src/DayCell.js
index e443e715e..c56b95727 100644
--- a/src/DayCell.js
+++ b/src/DayCell.js
@@ -108,7 +108,7 @@ class DayCell extends Component {
 
     return (
       <span
-        style={dayWrapperStyles}
+        style={onlyClasses ? undefined : dayWrapperStyles}
         onClick={ this.handleSelect.bind(this) }>
         <span
           onMouseEnter={ this.handleMouseEvent.bind(this) }