diff --git a/examples/App.js b/examples/App.js index 88e51939b..bfbd05cd3 100644 --- a/examples/App.js +++ b/examples/App.js @@ -40,6 +40,7 @@ const Example = React.createClass({ popup events={events} defaultDate={new Date(2015, 1, 1)} + eventPropGetter={e => ({ className: 'hi-event'})} components={{ event: EventWeek, agenda: { diff --git a/src/Calendar.jsx b/src/Calendar.jsx index b05a27edf..d7b4a5ba2 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -89,6 +89,21 @@ let Calendar = React.createClass({ */ selectable: PropTypes.bool, + /** + * Optionally provide a function that returns an object of className or style props + * to be applied to the the event node. + * + * ```js + * function( + * event: object, + * start: date, + * end: date, + * isSelected: bool + * ) -> { className: string?, style: object? } + * ``` + */ + eventPropGetter: PropTypes.func, + /** * Accessor for the event title, used to display event information. Should * resolve to a `renderable` value. diff --git a/src/DaySlot.jsx b/src/DaySlot.jsx index 40408e383..7a616dca9 100644 --- a/src/DaySlot.jsx +++ b/src/DaySlot.jsx @@ -116,7 +116,7 @@ let DaySlot = React.createClass({ renderEvents(numSlots, totalMin) { let { - events, step, min, culture + events, step, min, culture, eventPropGetter , selected, eventTimeRangeFormat, eventComponent , startAccessor, endAccessor, titleAccessor } = this.props; @@ -136,14 +136,18 @@ let DaySlot = React.createClass({ let title = get(event, titleAccessor) let label = localizer.format({ start, end }, eventTimeRangeFormat, culture); + let _isSelected = isSelected(event, selected); + + if (eventPropGetter) + var { style: xStyle, className } = eventPropGetter(event, start, end, _isSelected); return (