+ blocking div for availableHourRange

src/AvailableTimes.jsx

@@ -218,6 +218,7 @@ export default class AvailableTimes extends PureComponent {
       recurring,
       touchToDeleteSelection,
       availableDays,
+      availableHourRange,
     } = this.props;
 
     const {
@@ -301,6 +302,7 @@ export default class AvailableTimes extends PureComponent {
                     recurring={recurring}
                     touchToDeleteSelection={touchToDeleteSelection}
                     availableDays={availableDays}
+                    availableHourRange={availableHourRange}
                   />
                 );
               })}
@@ -344,11 +346,16 @@ AvailableTimes.propTypes = {
   recurring: PropTypes.bool,
   touchToDeleteSelection: PropTypes.bool,
   availableDays: PropTypes.arrayOf(validateDays),
+  availableHourRange: PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number,
+  }).isRequired,
 };
 
 AvailableTimes.defaultProps = {
   timeZone: momentTimezone.tz.guess(),
   weekStartsOn: 'sunday',
   touchToDeleteSelection: 'ontouchstart' in window,
   availableDays: DAYS_IN_WEEK,
+  availableHourRange: { start: 8, end: 16 },
 };

src/Day.css

@@ -13,6 +13,10 @@
   border-bottom: none;
 }
 
+:local(.block) {
+  position: absolute;
+  width: 100%;
+}
 
 :local(.mouseTarget) {
   top: 0;

src/Day.jsx

@@ -11,6 +11,10 @@ import toDate from './toDate';
 
 const ROUND_TO_NEAREST_MINS = 15;
 
+function blockHeight(hours) {
+  return hours * HOUR_IN_PIXELS;
+}
+
 export default class Day extends PureComponent {
   constructor({ initialSelections }) {
     super();
@@ -219,11 +223,14 @@ export default class Day extends PureComponent {
       timeConvention,
       timeZone,
       touchToDeleteSelection,
+      availableHourRange,
     } = this.props;
 
     const { selections, index } = this.state;
-
     const classes = [styles.component];
+    const topLimit = blockHeight(availableHourRange.start);
+    const bottomLimit = blockHeight(23 - availableHourRange.end);
+    const gap = blockHeight(availableHourRange.end);
 
     if (!available) {
       classes.push(styles.grayed);
@@ -241,6 +248,20 @@ export default class Day extends PureComponent {
           width: availableWidth,
         }}
       >
+        <div
+          className={`${styles.grayed} ${styles.block}`}
+          style={{
+            height: topLimit,
+            top: 0,
+          }}
+        />
+        <div
+          className={`${styles.grayed} ${styles.block}`}
+          style={{
+            height: bottomLimit,
+            top: gap,
+          }}
+        />
         {events.map(({
           allDay,
           start,
@@ -288,6 +309,10 @@ export default class Day extends PureComponent {
 Day.propTypes = {
   available: PropTypes.bool,
   availableWidth: PropTypes.number.isRequired,
+  availableHourRange: PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number,
+  }).isRequired,
   timeConvention: PropTypes.oneOf(['12h', '24h']),
   timeZone: PropTypes.string.isRequired,
 

src/Week.jsx

@@ -133,6 +133,7 @@ export default class Week extends PureComponent {
       recurring,
       touchToDeleteSelection,
       availableDays,
+      availableHourRange,
     } = this.props;
     const { dayEvents, daySelections, daysWidth, widthOfAScrollbar } = this.state;
 
@@ -197,6 +198,7 @@ export default class Week extends PureComponent {
                 events={dayEvents[i]}
                 initialSelections={daySelections[i]}
                 onChange={this.handleDayChange}
+                availableHourRange={availableHourRange}
                 touchToDeleteSelection={touchToDeleteSelection}
               />
             ))}
@@ -230,4 +232,8 @@ Week.propTypes = {
   recurring: PropTypes.bool,
   touchToDeleteSelection: PropTypes.bool,
   availableDays: PropTypes.arrayOf(validateDays),
+  availableHourRange: PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number,
+  }).isRequired,
 };