added new customization 'dayPropGetter' #634
Conversation
src/BackgroundCells.js
Outdated
| let { selecting, startIdx, endIdx } = this.state; | ||
|
|
||
| return ( | ||
| <div className='rbc-row-bg'> | ||
| {range.map((date, index) => { | ||
| let selected = selecting && index >= startIdx && index <= endIdx; | ||
| const { className, style: dayStyles } = (dayPropGetter && dayPropGetter(date)) || {}; | ||
| const segmStyles = segStyle(1, range.length) | ||
| const styles = Object.assign({}, segmStyles, dayStyles) |
There was a problem hiding this comment.
segmentStyles should be assigned in last so they cannot be overridden by the dayPropGetter styles
src/DayColumn.js
Outdated
| dates.isToday(max) && 'rbc-today' | ||
| )} | ||
| style={Object.assign({}, slotStyle, style)} |
src/TimeSlot.js
Outdated
| @@ -22,7 +23,7 @@ export default class TimeSlot extends Component { | |||
| } | |||
|
|
|||
| render() { | |||
| const { value, slotPropGetter } = this.props; | |||
| const { value, slotPropGetter, dayPropGetter } = this.props; | |||
There was a problem hiding this comment.
this isn't used here (and shouldn't be)
src/TimeSlotGroup.js
Outdated
| return ( | ||
| <TimeSlot | ||
| key={slotNumber} | ||
| slotPropGetter={slotPropGetter} | ||
| dayPropGetter={dayPropGetter} |
src/TimeGrid.js
Outdated
| @@ -201,7 +202,7 @@ export default class TimeGrid extends Component { | |||
| } | |||
|
|
|||
| renderEvents(range, events, today){ | |||
| let { min, max, endAccessor, startAccessor, components } = this.props; | |||
| let { min, max, endAccessor, startAccessor, components, dayPropGetter } = this.props; | |||
There was a problem hiding this comment.
doesn't need to be spread out here
src/TimeGrid.js
Outdated
| dates.isToday(date) && 'rbc-today', | ||
| )} | ||
| style={segStyle(1, this.slots)} | ||
| style={Object.assign({}, segStyle(1, this.slots), style)} |
|
Hi Jason, thank you for the thorough review. I have updated my code according to your comments. Do I need to do anything additional (besides committing) from my side? Thanks again & best regards, |
|
Hi again, I have just moved the demo code for the new dayPropGetter to the 'rendering' demo. The 7th and 12th of each month get an orange background and a custom border color.
Thank you again & best regards, |
|
This new feature provides a solution for #272 . |
|
thanks! |
|
Hi Jason, thank you for the quick response. Should we create a new release 0.17.1 for this? Please let me know if you want to do so, then I'll update ChangeLog.md and bump the version in Regards, |
|
feel free to PR a change to the Changelog, i will handle bumping the versions |
|
Any idea when you'll publish this to npm? |
|
Any documentation on the usage of this function? Can't find I only see a reference in this source file, but it's not in my installed files? I just ran Do I need to install something else? From a MR or commit? |
Hi there,
I have extended the code with another optional customization function
dayPropGetter(date)that can be used to customize e.g. the background of days in the month, week, and work week views without the need for custom components, e.g. to render all past dates with a gray background.Please consider it for merging into master. Let me know if I should update anything (like the function's name) before you accept this pull request.
Best regards,
Erich