From 720675e622ae53ebad9d36a68c76f714a7bbb79e Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 13 Sep 2015 18:30:12 +0300
Subject: [PATCH] [added] eventPropsGetter for event markup customization

---
 examples/App.js   |  1 +
 src/Calendar.jsx  | 15 +++++++++++++++
 src/DaySlot.jsx   | 12 ++++++++----
 src/EventCell.jsx |  8 ++++++--
 src/EventRow.jsx  |  3 ++-
 src/Month.jsx     |  1 +
 6 files changed, 33 insertions(+), 7 deletions(-)

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 (
         <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>
diff --git a/src/EventCell.jsx b/src/EventCell.jsx
index 6425308eb..b0657b4bf 100644
--- a/src/EventCell.jsx
+++ b/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)
diff --git a/src/EventRow.jsx b/src/EventRow.jsx
index fee01597f..90793ce32 100644
--- a/src/EventRow.jsx
+++ b/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}
diff --git a/src/Month.jsx b/src/Month.jsx
index 1907b13a3..534a3209a 100644
--- a/src/Month.jsx
+++ b/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}