[added] eventPropsGetter for event markup customization

Author: jquense

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: {

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.

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 (
         <div
           key={'evt_' + idx}
-          style={style}
+          style={{...xStyle, ...style}}
           onClick={this._select.bind(null, event)}
-          className={cn('rbc-event', {
-            'rbc-selected': isSelected(event, selected)
+          className={cn('rbc-event', className, {
+            'rbc-selected': _isSelected
           })}
         >
           <div className='rbc-event-label' title={label}>{label}</div>

src/EventCell.jsx

@@ -6,7 +6,7 @@ import { accessor as get } from './utils/accessors';
 let EventCell = React.createClass({
   render() {
     let {
-        className, event, selected
+        className, event, selected, eventPropGetter
       , startAccessor, endAccessor, titleAccessor
       , slotStart, slotEnd, onSelect, component, ...props } = this.props;
 
@@ -16,10 +16,14 @@ let EventCell = React.createClass({
       , end = get(event, endAccessor)
       , start = get(event, startAccessor)
 
+    if (eventPropGetter)
+      var { style, className: xClassName } = eventPropGetter(event, start, end, selected);
+
     return (
       <div
         {...props}
-        className={cn('rbc-event', className, {
+        style={{...props.style, ...style}}
+        className={cn('rbc-event', className, xClassName, {
           'rbc-selected': selected,
           'rbc-event-continues-prior': dates.lt(start, slotStart),
           'rbc-event-continues-after': dates.gt(end, slotEnd)

src/EventRow.jsx

@@ -66,13 +66,14 @@ let EventRow = React.createClass({
 
   renderEvent(event, start, end, props = {}){
     let {
-        selected, startAccessor, endAccessor
+        eventPropGetter, selected, startAccessor, endAccessor
       , titleAccessor, eventComponent, onSelect } = this.props;
 
 
     return (
       <EventCell
         event={event}
+        eventPropGetter={eventPropGetter}
         onSelect={onSelect}
         selected={isSelected(event, selected)}
         startAccessor={startAccessor}

src/Month.jsx

@@ -298,6 +298,7 @@ let MonthView = React.createClass({
           slotEnd={overlay.end}
           selected={this.props.selected}
           onSelect={this._selectEvent}
+          eventPropGetter={this.props.eventPropGetter}
           startAccessor={this.props.startAccessor}
           endAccessor={this.props.endAccessor}
           titleAccessor={this.props.titleAccessor}