Skip to content

Commit

Permalink
fix: bug with dayWrapper not applying (jquense#1196)
Browse files Browse the repository at this point in the history
* Fixed bug with dayWrapper not applying

* Removed packagelock.json, updated dayWrapper to timeSlotWrapper
  • Loading branch information
NathanBP authored and jquense committed May 24, 2019
1 parent 0e0ebb2 commit f3ea6f8
Show file tree
Hide file tree
Showing 6 changed files with 19 additions and 12 deletions.
10 changes: 10 additions & 0 deletions examples/demos/basic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
/>
)
Expand Down
3 changes: 0 additions & 3 deletions src/Calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -674,7 +673,6 @@ class Calendar extends React.Component {
event: elementType,
eventWrapper: elementType,
eventContainerWrapper: elementType,
dayWrapper: elementType,
dateCellWrapper: elementType,
timeSlotWrapper: elementType,
timeGutterHeader: elementType,
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Object.assign(Calendar, {
move,
components: {
eventWrapper: EventWrapper,
dayWrapper: BackgroundWrapper,
timeSlotWrapper: BackgroundWrapper,
dateCellWrapper: BackgroundWrapper,
},
})
Expand Down
4 changes: 2 additions & 2 deletions stories/Calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}}
/>
)
Expand Down
4 changes: 2 additions & 2 deletions stories/DragAndDrop.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions stories/helpers/customComponents.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -40,7 +40,7 @@ const customComponents = {
return (
<div style={style}>
{hasCustomInfo && 'Custom Day Wrapper'}
{dayWrapperProps.children}
{timeSlotWrapperProps.children}
</div>
)
},
Expand Down

0 comments on commit f3ea6f8

Please sign in to comment.