Skip to content

Commit

Permalink
feat: add custom timeSlotWrapper support (jquense#930)
Browse files Browse the repository at this point in the history
* feat: pass components through to TimeGutter and TimeSlotGroup

* feat: allow timeSlotWrapper to be passed through

* Add story for custom timeSlotWrapper
  • Loading branch information
spacetag authored and jquense committed Aug 1, 2018
1 parent 06e08e2 commit 172c316
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 1 deletion.
2 changes: 2 additions & 0 deletions src/Calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -649,6 +649,7 @@ class Calendar extends React.Component {
eventContainerWrapper: elementType,
dayWrapper: elementType,
dateCellWrapper: elementType,
timeSlotWrapper: elementType,
timeGutterHeader: elementType,

toolbar: elementType,
Expand Down Expand Up @@ -767,6 +768,7 @@ class Calendar extends React.Component {
dayWrapper: NoopWrapper,
dateCellWrapper: NoopWrapper,
weekWrapper: NoopWrapper,
timeSlotWrapper: NoopWrapper,
}),
accessors: {
start: wrapAccessor(startAccessor),
Expand Down
1 change: 1 addition & 0 deletions src/TimeGrid.js
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,7 @@ export default class TimeGrid extends Component {
step={this.props.step}
getNow={this.props.getNow}
timeslots={this.props.timeslots}
components={components}
className="rbc-time-gutter"
/>
{this.renderEvents(range, rangeEvents, getNow(), resources || [null])}
Expand Down
4 changes: 3 additions & 1 deletion src/TimeGutter.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default class TimeGutter extends Component {
timeslots: PropTypes.number.isRequired,
step: PropTypes.number.isRequired,
getNow: PropTypes.func.isRequired,
components: PropTypes.object.isRequired,

localizer: PropTypes.object.isRequired,
resource: PropTypes.string,
Expand Down Expand Up @@ -47,7 +48,7 @@ export default class TimeGutter extends Component {
}

render() {
const { resource } = this.props
const { resource, components } = this.props

return (
<div className="rbc-time-gutter rbc-time-column">
Expand All @@ -57,6 +58,7 @@ export default class TimeGutter extends Component {
key={idx}
group={grp}
resource={resource}
components={components}
renderSlot={this.renderSlot}
/>
)
Expand Down
11 changes: 11 additions & 0 deletions stories/Calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,3 +197,14 @@ storiesOf('Big Calendar', module)
/>
)
})
.add('add custom timeSlotWrapper', () => {
return (
<Calendar
defaultView={Calendar.Views.WEEK}
events={events}
components={{
timeSlotWrapper: customComponents.timeSlotWrapper,
}}
/>
)
})
16 changes: 16 additions & 0 deletions stories/helpers/customComponents.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,22 @@ const customComponents = {
}
return <div style={style}>{eventWrapperProps.children}</div>
},
timeSlotWrapper: timeSlotWrapperProps => {
const style =
timeSlotWrapperProps.resource === null ||
timeSlotWrapperProps.value.getMinutes() !== 0
? {}
: {
border: '4px solid',
backgroundColor:
timeSlotWrapperProps.value.getHours() >= 8 &&
timeSlotWrapperProps.value.getHours() <= 17
? 'green'
: 'red',
padding: '5px',
}
return <div style={style}>{timeSlotWrapperProps.children}</div>
},
}

export default customComponents

0 comments on commit 172c316

Please sign in to comment.