diff --git a/examples/demos/basic.js b/examples/demos/basic.js index ad3b0dfd6..a040d6121 100644 --- a/examples/demos/basic.js +++ b/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 }) => ( ( 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} /> ) diff --git a/src/Calendar.js b/src/Calendar.js index 71bc0ec5c..8da45977a 100644 --- a/src/Calendar.js +++ b/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, diff --git a/src/index.js b/src/index.js index 5f87f846a..889099bcd 100644 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,7 @@ Object.assign(Calendar, { move, components: { eventWrapper: EventWrapper, - dayWrapper: BackgroundWrapper, + timeSlotWrapper: BackgroundWrapper, dateCellWrapper: BackgroundWrapper, }, }) diff --git a/stories/Calendar.js b/stories/Calendar.js index bad9fe302..8be67e0c1 100644 --- a/stories/Calendar.js +++ b/stories/Calendar.js @@ -165,13 +165,13 @@ storiesOf('Big Calendar', module) /> ) }) - .add('add custom dayWrapper', () => { + .add('add custom timeSlotWrapper', () => { return ( ) diff --git a/stories/DragAndDrop.js b/stories/DragAndDrop.js index ce66df897..3ad618ec4 100644 --- a/stories/DragAndDrop.js +++ b/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 ( ) }, - 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 (
{hasCustomInfo && 'Custom Day Wrapper'} - {dayWrapperProps.children} + {timeSlotWrapperProps.children}
) },