diff --git a/examples/demos/customView.js b/examples/demos/customView.js index 4a6aa4842..876a55073 100644 --- a/examples/demos/customView.js +++ b/examples/demos/customView.js @@ -49,7 +49,7 @@ MyWeek.title = date => { let CustomView = () => ( diff --git a/examples/demos/dnd.js b/examples/demos/dnd.js index 7d57749e8..0b139c66e 100644 --- a/examples/demos/dnd.js +++ b/examples/demos/dnd.js @@ -59,7 +59,7 @@ class Dnd extends React.Component { onEventDrop={this.moveEvent} resizable onEventResize={this.resizeEvent} - defaultView="week" + defaultView={BigCalendar.Views.WEEK} defaultDate={new Date(2015, 3, 12)} /> ) diff --git a/examples/demos/rendering.js b/examples/demos/rendering.js index 556f0dee3..a257f42df 100644 --- a/examples/demos/rendering.js +++ b/examples/demos/rendering.js @@ -43,7 +43,7 @@ let Rendering = () => ( ( ( alert(event.title)} diff --git a/examples/demos/timeslots.js b/examples/demos/timeslots.js index 0cad219b1..09c4a8b21 100644 --- a/examples/demos/timeslots.js +++ b/examples/demos/timeslots.js @@ -7,7 +7,7 @@ let Timeslots = () => ( events={events} step={15} timeslots={8} - defaultView="week" + defaultView={BigCalendar.Views.WEEK} defaultDate={new Date(2015, 3, 12)} /> ) diff --git a/src/addons/dragAndDrop/DropWrappers.js b/src/addons/dragAndDrop/DropWrappers.js index 82e4cf66e..210549a27 100644 --- a/src/addons/dragAndDrop/DropWrappers.js +++ b/src/addons/dragAndDrop/DropWrappers.js @@ -16,12 +16,12 @@ function getEventDropProps(start, end, dropDate, droppedInAllDay) { /* * If the event is dropped in a "Day" cell, preserve an event's start time by extracting the hours and minutes off * the original start date and add it to newDate.value - * + * * note: this behavior remains for backward compatibility, but might be counter-intuitive to some: * dragging an event from the grid to the day header might more commonly mean "make this an allDay event * on that day" - but the behavior here implements "keep the times of the event, but move it to the * new day". - * + * * To permit either interpretation, we embellish a new `allDay` parameter which determines whether the * event was dropped on the day header or not. */ @@ -39,13 +39,16 @@ function getEventDropProps(start, end, dropDate, droppedInAllDay) { class DropWrapper extends React.Component { static propTypes = { connectDropTarget: PropTypes.func.isRequired, - type: PropTypes.string, isOver: PropTypes.bool, + range: PropTypes.arrayOf(PropTypes.instanceOf(Date)), + type: PropTypes.string, + value: PropTypes.instanceOf(Date), } static contextTypes = { onEventDrop: PropTypes.func, onEventResize: PropTypes.func, + components: PropTypes.object, dragDropManager: PropTypes.object, startAccessor: accessor, endAccessor: accessor, @@ -98,17 +101,35 @@ class DropWrapper extends React.Component { // }; render() { - const { connectDropTarget, children, type, isOver } = this.props - const BackgroundWrapper = BigCalendar.components[type] + const { + connectDropTarget, + children, + isOver, + range, + type, + value, + } = this.props + + // Check if wrapper component of this type was passed in, otherwise use library default + const { components } = this.context + const BackgroundWrapper = components[type] || BigCalendar.components[type] + const backgroundWrapperProps = { + value, + } + + if (range) { + backgroundWrapperProps.range = range + } let resultingChildren = children - if (isOver) + if (isOver) { resultingChildren = React.cloneElement(children, { className: cn(children.props.className, 'rbc-addons-dnd-over'), }) + } return ( - + {connectDropTarget(resultingChildren)} ) diff --git a/src/addons/dragAndDrop/withDragAndDrop.js b/src/addons/dragAndDrop/withDragAndDrop.js index fafff7b88..4d8b6faa4 100644 --- a/src/addons/dragAndDrop/withDragAndDrop.js +++ b/src/addons/dragAndDrop/withDragAndDrop.js @@ -52,8 +52,9 @@ try { * If you care about these corner cases, you can examine the `allDay` param suppled * in the callback to determine how the user dropped or resized the event. * - * Note: you cannot use custom `EventWrapper`, `DayWrapper` or `DateCellWrapper` - * components when using this HOC as they are overwritten here. + * Note: you cannot use custom `EventWrapper` components when using this HOC as it + * is overwritten here. + * * * @param {*} Calendar * @param {*} backend @@ -79,6 +80,7 @@ export default function withDragAndDrop( static defaultProps = { // TODO: pick these up from Calendar.defaultProps + components: {}, startAccessor: 'start', endAccessor: 'end', allDayAccessor: 'allDay', @@ -94,6 +96,7 @@ export default function withDragAndDrop( static childContextTypes = { onEventDrop: PropTypes.func, onEventResize: PropTypes.func, + components: PropTypes.object, startAccessor: accessor, endAccessor: accessor, draggableAccessor: accessor, @@ -105,6 +108,7 @@ export default function withDragAndDrop( return { onEventDrop: this.props.onEventDrop, onEventResize: this.props.onEventResize, + components: this.props.components, startAccessor: this.props.startAccessor, endAccessor: this.props.endAccessor, step: this.props.step, diff --git a/stories/Calendar.js b/stories/Calendar.js index 4c8085005..505ecfbc0 100644 --- a/stories/Calendar.js +++ b/stories/Calendar.js @@ -8,6 +8,7 @@ import '../src/less/styles.less' import '../src/addons/dragAndDrop/styles.less' import demoEvents from '../examples/events' import createEvents from './createEvents' +import customComponents from './customComponents' import resources from './resourceEvents' import withDragAndDrop from '../src/addons/dragAndDrop' @@ -119,7 +120,7 @@ storiesOf('module.Calendar.week', module) return (
moment('9:30am', 'h:mma').toDate()} @@ -372,6 +373,32 @@ storiesOf('module.Calendar.week', module)
) }) + .add('add custom dateCellWrapper', () => { + return ( +
+ +
+ ) + }) + .add('add custom dayWrapper', () => { + return ( +
+ +
+ ) + }) .add('no duration', () => { return (
@@ -505,7 +532,7 @@ storiesOf('module.Calendar.week', module) return (
+
+ ) + }) + .add('draggable and resizable with custom dateCellWrapper', () => { + return ( +
+ +
+ ) + }) + .add('draggable and resizable with custom dayWrapper', () => { + return ( +
+ { + // Show 'click me' text in arbitrary places by using the range prop + const hasAlert = dateCellWrapperProps.range + ? dateCellWrapperProps.range.some(date => { + return date.getDate() % 12 === 0 + }) + : false + + const style = { + display: 'flex', + flex: 1, + borderLeft: '1px solid #DDD', + backgroundColor: hasAlert ? '#f5f5dc' : '#fff', + } + return ( +
+ {hasAlert && ( + + Click me + + )} + {dateCellWrapperProps.children} +
+ ) + }, + dayWrapper: dayWrapperProps => { + // Show different styles at arbitrary time + const hasCustomInfo = dayWrapperProps.value + ? dayWrapperProps.value.getHours() === 4 + : false + const style = { + display: 'flex', + flex: 1, + backgroundColor: hasCustomInfo ? '#f5f5dc' : '#fff', + } + return ( +
+ {hasCustomInfo && 'Custom Day Wrapper'} + {dayWrapperProps.children} +
+ ) + }, +} + +export default customComponents