Fix #124 - Allow you to hide dates outside current month

README.md

@@ -51,6 +51,7 @@ class MyComponent extends Component {
 * **minDate:** *(String, Moment.js object, Function)* default: none
 * **maxDate:** *(String, Moment.js object, Function)* default: none
 * **lang:** *(String, 'cn' - Chinese, 'jp' - Japanese, 'fr' - French, 'it' - Italian, 'de' - German, 'es' - Spanish, 'ru' - Russian)* default: none
+* **showDatesFromOtherMonths:** *(Boolean)* - Shows or hides dates from next or previous months. default: true
 
 ### Range Picker
 ```javascript
@@ -95,3 +96,4 @@ class MyComponent extends Component {
 * **rangedCalendars** *(Boolean)* default: false
 * **lang:** *(String, 'cn' - Chinese, 'jp' - Japanese, 'fr' - French, 'it' - Italian, 'de' - German, 'es' - Spanish, 'ru' - Russian)* default: none
 * **specialDays:** *(Array [{date: Moment.js object}])* default: none
+* **showDatesFromOtherMonths:** *(Boolean)* - Shows or hides dates from next or previous months. default: true

src/Calendar.js

@@ -166,7 +166,7 @@ class Calendar extends Component {
     // TODO: Split this logic into smaller chunks
     const { styles }               = this;
 
-    const { range, minDate, maxDate, format, onlyClasses, disableDaysBeforeToday, specialDays } = this.props;
+    const { range, minDate, maxDate, format, onlyClasses, disableDaysBeforeToday, specialDays, showDatesFromOtherMonths = true } = this.props;
 
     const shownDate                = this.getShownDate();
     const { date, firstDayOfWeek } = this.state;
@@ -189,7 +189,7 @@ class Calendar extends Component {
     const diff = (Math.abs(firstDayOfWeek - (startOfMonth + 7)) % 7);
     for (let i = diff-1; i >= 0; i--) {
       const dayMoment  = lastMonth.clone().date(lastMonthDayCount - i);
-      days.push({ dayMoment, isPassive : true });
+      days.push({ dayMoment, isPassive : true, isHidden: !showDatesFromOtherMonths });
     }
 
     // Current month's days
@@ -208,7 +208,7 @@ class Calendar extends Component {
     const remainingCells = 42 - days.length; // 42cells = 7days * 6rows
     for (let i = 1; i <= remainingCells; i++ ) {
       const dayMoment  = nextMonth.clone().date(i);
-      days.push({ dayMoment, isPassive : true });
+      days.push({ dayMoment, isPassive : true, isHidden: !showDatesFromOtherMonths });
     }
 
     const today = moment().startOf('day');
@@ -298,7 +298,8 @@ Calendar.propTypes = {
   onlyClasses    : PropTypes.bool,
   specialDays    : PropTypes.array,
   classNames     : PropTypes.object,
-  locale         : PropTypes.string
+  locale         : PropTypes.string,
+  showDatesFromOtherMonths: PropTypes.bool
 }
 
 export default Calendar;

src/DateRange.js

@@ -107,7 +107,7 @@ class DateRange extends Component {
   }
 
   render() {
-    const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek, minDate, maxDate, classNames, onlyClasses, specialDays, lang, disableDaysBeforeToday, offsetPositive, shownDate, showMonthArrow, rangedCalendars } = this.props;
+    const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek, minDate, maxDate, classNames, onlyClasses, specialDays, lang, disableDaysBeforeToday, offsetPositive, shownDate, showMonthArrow, rangedCalendars, showDatesFromOtherMonths = true } = this.props;
     const { range, link } = this.state;
     const { styles } = this;
 
@@ -157,6 +157,7 @@ class DateRange extends Component {
 		            onlyClasses={ onlyClasses }
 		            specialDays={ specialDays }
                 classNames={ classes }
+                showDatesFromOtherMonths={showDatesFromOtherMonths}
                 onChange={ this.handleSelect.bind(this) }  />
             );
           }
@@ -200,6 +201,7 @@ DateRange.propTypes = {
   offsetPositive  : PropTypes.bool,
   classNames      : PropTypes.object,
   rangedCalendars : PropTypes.bool,
+  showDatesFromOtherMonths: PropTypes.bool
 }
 
 export default DateRange;

src/DayCell.js

@@ -53,12 +53,13 @@ class DayCell extends Component {
 
   getStateStyles() {
     const { hover, active } = this.state;
-    const { isSelected, isInRange, isPassive, isStartEdge, isEndEdge, dayMoment, isToday, isSunday, isSpecialDay } = this.props;
+    const { isSelected, isInRange, isPassive, isHidden, isStartEdge, isEndEdge, dayMoment, isToday, isSunday, isSpecialDay } = this.props;
     const { styles } = this;
 
     const hoverStyle    = hover ? styles['DayHover'] : {};
     const activeStyle   = active ? styles['DayActive'] : {};
     const passiveStyle  = isPassive ? styles['DayPassive'] : {};
+    const hiddenStyle  = isHidden ? styles['DayHidden'] : {};
     const startEdgeStyle = isStartEdge ? styles['DayStartEdge'] : {};
     const endEdgeStyle   = isEndEdge ? styles['DayEndEdge'] : {};
     const selectedStyle = isSelected ? styles['DaySelected'] : {};
@@ -74,6 +75,7 @@ class DayCell extends Component {
       ...inRangeStyle,
       ...hoverStyle,
       ...passiveStyle,
+      ...hiddenStyle,
       ...activeStyle,
       ...selectedStyle,
       ...startEdgeStyle,
@@ -82,12 +84,13 @@ class DayCell extends Component {
   }
 
   getClassNames(classes) {
-    const { isSelected, isInRange, isPassive, isStartEdge, isEndEdge, isToday, isSunday, isSpecialDay } = this.props;
+    const { isSelected, isInRange, isPassive, isHidden, isStartEdge, isEndEdge, isToday, isSunday, isSpecialDay } = this.props;
 
     return classnames({
       [classes.day]       : true,
       [classes.dayActive] : isSelected,
       [classes.dayPassive]: isPassive,
+      [classes.dayHidden]: isHidden,
       [classes.dayInRange]: isInRange,
       [classes.dayStartEdge] : isStartEdge,
       [classes.dayEndEdge] : isEndEdge,
@@ -139,6 +142,7 @@ DayCell.propTypes = {
   isSelected  : PropTypes.bool,
   isInRange   : PropTypes.bool,
   isPassive   : PropTypes.bool,
+  isHidden   : PropTypes.bool,
   theme       : PropTypes.shape({
     Day       : PropTypes.object.isRequired
   }).isRequired,

src/styles.js

@@ -11,6 +11,7 @@ export const defaultClasses = {
   day                        : 'rdr-Day',
   dayActive                  : 'is-selected',
   dayPassive                 : 'is-passive',
+  dayHidden                 : 'is-hidden',
   dayInRange                 : 'is-inRange',
   monthAndYearWrapper        : 'rdr-MonthAndYear-innerWrapper',
   prevButton                 : 'rdr-MonthAndYear-button prev',
@@ -55,6 +56,10 @@ const defaultTheme = {
     opacity       : 0.4,
     cursor        : 'normal'
   },
+  DayHidden : {
+    opacity: 0.0,
+    cursor: 'normal'
+  },
 
   DayHover : {
     background    : '#bdc3c7',
@@ -202,6 +207,7 @@ export default (customTheme = {}) => {
     },
 
     DayPassive : { ...defaultTheme.DayPassive, ...customTheme.DayPassive },
+    DayHidden : { ...defaultTheme.DayHidden, ...customTheme.DayHidden },
 
     DayHover : { ...defaultTheme.DayHover, ...customTheme.DayHover },