fix: bug with dayWrapper not applying (jquense#1196)

* Fixed bug with dayWrapper not applying

* Removed packagelock.json, updated dayWrapper to timeSlotWrapper

Author: NathanBP

examples/demos/basic.js

@@ -5,6 +5,13 @@ import dates from '../../src/utils/dates'
 
 let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
 
+const ColoredDateCellWrapper = ({ children }) =>
+  React.cloneElement(React.Children.only(children), {
+    style: {
+      backgroundColor: 'lightblue',
+    },
+  })
+
 let Basic = ({ localizer }) => (
   <BigCalendar
     events={events}
@@ -13,6 +20,9 @@ let Basic = ({ localizer }) => (
     showMultiDayTimes
     max={dates.add(dates.endOf(new Date(2015, 17, 1), 'day'), -1, 'hours')}
     defaultDate={new Date(2015, 3, 1)}
+    components={{
+      timeSlotWrapper: ColoredDateCellWrapper,
+    }}
     localizer={localizer}
   />
 )

src/Calendar.js

@@ -643,7 +643,6 @@ class Calendar extends React.Component {
      *   event: MyEvent, // used by each view (Month, Day, Week)
      *   eventWrapper: MyEventWrapper,
      *   eventContainerWrapper: MyEventContainerWrapper,
-     *   dayWrapper: MyDayWrapper,
      *   dateCellWrapper: MyDateCellWrapper,
      *   timeSlotWrapper: MyTimeSlotWrapper,
      *   timeGutterHeader: MyTimeGutterWrapper,
@@ -674,7 +673,6 @@ class Calendar extends React.Component {
       event: elementType,
       eventWrapper: elementType,
       eventContainerWrapper: elementType,
-      dayWrapper: elementType,
       dateCellWrapper: elementType,
       timeSlotWrapper: elementType,
       timeGutterHeader: elementType,
@@ -793,7 +791,6 @@ class Calendar extends React.Component {
       components: defaults(components[view] || {}, omit(components, names), {
         eventWrapper: NoopWrapper,
         eventContainerWrapper: NoopWrapper,
-        dayWrapper: NoopWrapper,
         dateCellWrapper: NoopWrapper,
         weekWrapper: NoopWrapper,
         timeSlotWrapper: NoopWrapper,

src/index.js

@@ -14,7 +14,7 @@ Object.assign(Calendar, {
   move,
   components: {
     eventWrapper: EventWrapper,
-    dayWrapper: BackgroundWrapper,
+    timeSlotWrapper: BackgroundWrapper,
     dateCellWrapper: BackgroundWrapper,
   },
 })

stories/Calendar.js

@@ -165,13 +165,13 @@ storiesOf('Big Calendar', module)
       />
     )
   })
-  .add('add custom dayWrapper', () => {
+  .add('add custom timeSlotWrapper', () => {
     return (
       <Calendar
         defaultView={Calendar.Views.DAY}
         events={events}
         components={{
-          dayWrapper: customComponents.dayWrapper,
+          timeSlotWrapper: customComponents.timeSlotWrapper,
         }}
       />
     )

stories/DragAndDrop.js

@@ -61,11 +61,11 @@ storiesOf('Drag and Drop', module)
       />
     )
   })
-  .add('draggable and resizable with custom dayWrapper', () => {
+  .add('draggable and resizable with custom timeSlotWrapper', () => {
     return (
       <DragAndDropCalendar
         components={{
-          dayWrapper: customComponents.dayWrapper,
+          timeSlotWrapper: customComponents.timeSlotWrapper,
         }}
         defaultDate={new Date()}
         defaultView={Calendar.Views.WEEK}

stories/helpers/customComponents.js

@@ -27,10 +27,10 @@ const customComponents = {
       </div>
     )
   },
-  dayWrapper: dayWrapperProps => {
+  timeSlotWrapper: timeSlotWrapperProps => {
     // Show different styles at arbitrary time
-    const hasCustomInfo = dayWrapperProps.value
-      ? dayWrapperProps.value.getHours() === 4
+    const hasCustomInfo = timeSlotWrapperProps.value
+      ? timeSlotWrapperProps.value.getHours() === 4
       : false
     const style = {
       display: 'flex',
@@ -40,7 +40,7 @@ const customComponents = {
     return (
       <div style={style}>
         {hasCustomInfo && 'Custom Day Wrapper'}
-        {dayWrapperProps.children}
+        {timeSlotWrapperProps.children}
       </div>
     )
   },