Be able to highlight day

Author: sideroad

css/CalendarMonth.scss

@@ -51,6 +51,16 @@
   }
 }
 
+.CalendarMonth__day--highlighted-calendar {
+  background: $react-dates-color-highlighted;
+  color: $react-dates-color-gray;
+  cursor: default;
+
+  &:active {
+    background: $react-dates-color-secondary;
+  }
+}
+
 .CalendarMonth__day--outside {
   border: 0;
   cursor: default;

css/variables.scss

@@ -16,6 +16,7 @@ $react-dates-color-gray: #565a5c !default;
 $react-dates-color-gray-dark: darken($react-dates-color-gray, 10.5%) !default;
 $react-dates-color-gray-light: lighten($react-dates-color-gray, 17.8%) !default;   // #82888a
 $react-dates-color-gray-lighter: lighten($react-dates-color-gray, 45%) !default;     // #cacccd
+$react-dates-color-highlighted: #ffe8bc !default;
 
 $react-dates-color-border: #dbdbdb !default;
 $react-dates-color-border-light: #dce0e0 !default;

src/components/DateRangePicker.jsx

@@ -33,6 +33,7 @@ const defaultProps = {
   focusedInput: null,
   minimumNights: 1,
   isDayBlocked: () => false,
+  isDayHighlighted: () => false,
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
   enableOutsideDays: false,
   numberOfMonths: 2,
@@ -162,6 +163,7 @@ export default class DateRangePicker extends React.Component {
   renderDayPicker() {
     const {
       isDayBlocked,
+      isDayHighlighted,
       isOutsideRange,
       numberOfMonths,
       orientation,
@@ -217,6 +219,7 @@ export default class DateRangePicker extends React.Component {
           navNext={navNext}
           minimumNights={minimumNights}
           isOutsideRange={isOutsideRange}
+          isDayHighlighted={isDayHighlighted}
           isDayBlocked={isDayBlocked}
           keepOpenOnDateSelect={keepOpenOnDateSelect}
         />

src/components/DayPickerRangeController.jsx

@@ -32,6 +32,7 @@ const propTypes = {
   minimumNights: PropTypes.number,
   isOutsideRange: PropTypes.func,
   isDayBlocked: PropTypes.func,
+  isDayHighlighted: PropTypes.func,
 
   // DayPicker props
   enableOutsideDays: PropTypes.bool,
@@ -70,6 +71,7 @@ const defaultProps = {
   minimumNights: 1,
   isOutsideRange() {},
   isDayBlocked() {},
+  isDayHighlighted() {},
 
   // DayPicker props
   enableOutsideDays: false,
@@ -226,6 +228,7 @@ export default class DayPickerRangeController extends React.Component {
   render() {
     const {
       isDayBlocked,
+      isDayHighlighted,
       isOutsideRange,
       numberOfMonths,
       orientation,
@@ -246,6 +249,7 @@ export default class DayPickerRangeController extends React.Component {
       'blocked-calendar': day => isDayBlocked(day),
       'blocked-out-of-range': day => isOutsideRange(day),
       'blocked-minimum-nights': day => this.doesNotMeetMinimumNights(day),
+      'highlighted-calendar': day => isDayHighlighted(day),
       valid: day => !this.isBlocked(day),
       // before anything has been set or after both are set
       hovered: day => this.isHovered(day),

src/components/SingleDatePicker.jsx

@@ -43,6 +43,7 @@ const defaultProps = {
   onFocusChange() {},
 
   isDayBlocked: () => false,
+  isDayHighlighted: () => false,
   disabledDays: [],
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
   enableOutsideDays: false,
@@ -237,6 +238,7 @@ export default class SingleDatePicker extends React.Component {
   renderDayPicker() {
     const {
       isDayBlocked,
+      isDayHighlighted,
       isOutsideRange,
       enableOutsideDays,
       numberOfMonths,
@@ -257,6 +259,7 @@ export default class SingleDatePicker extends React.Component {
       blocked: day => this.isBlocked(day),
       'blocked-calendar': day => isDayBlocked(day),
       'blocked-out-of-range': day => isOutsideRange(day),
+      'highlighted-calendar': day => isDayHighlighted(day),
       valid: day => !this.isBlocked(day),
       hovered: day => this.isHovered(day),
       selected: day => this.isSelected(day),

stories/DateRangePicker.js

@@ -218,6 +218,11 @@ storiesOf('DateRangePicker', module)
       isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
   ))
+  .addWithInfo('with some highlighted dates', () => (
+    <DateRangePickerWrapper
+      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+    />
+  ))
   .addWithInfo('with month specified on open', () => (
     <DateRangePickerWrapper
       initialVisibleMonth={() => moment('04 2017', 'MM YYYY')}