added new customization 'dayPropGetter'

examples/demos/rendering.js

@@ -21,6 +21,25 @@ function EventAgenda({ event }) {
 }
 
 
+const customDayPropGetter = (date) => {
+  if (date.getDate() === 7 || date.getDate() === 15)
+    return {
+      className: 'special-day',
+      style: {
+        border: 'solid 3px '+((date.getDate() === 7) ? '#faa' : '#afa'),
+      }
+    }
+  else return {}
+}
+
+const customSlotPropGetter = (date) => {
+  if (date.getDate() === 7 || date.getDate() === 15)
+    return {
+      className: 'special-day'
+    }
+  else return {}
+}
+
 let Rendering = React.createClass({
   render(){
     return (
@@ -29,6 +48,8 @@ let Rendering = React.createClass({
           events={events}
           defaultDate={new Date(2015, 3, 1)}
           defaultView='agenda'
+          dayPropGetter={customDayPropGetter}
+          slotPropGetter={customSlotPropGetter}
           components={{
             event: Event,
             agenda: {

examples/styles.less

@@ -241,3 +241,7 @@ h4:hover .anchor-icon,
 h4 a:focus .anchor-icon {
   opacity: 0.5;
 }
+
+.special-day {
+  background-color: #fec;
+}

src/BackgroundCells.js

@@ -16,6 +16,7 @@ class BackgroundCells extends React.Component {
     date: PropTypes.instanceOf(Date),
     cellWrapperComponent: elementType,
     container: PropTypes.func,
+    dayPropGetter: PropTypes.func,
     selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
     longPressThreshold: PropTypes.number,
 
@@ -56,23 +57,28 @@ class BackgroundCells extends React.Component {
   }
 
   render(){
-    let { range, cellWrapperComponent: Wrapper, date: currentDate } = this.props;
+    let { range, cellWrapperComponent: Wrapper, dayPropGetter, date: currentDate } = this.props;
     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({}, dayStyles, segmStyles)
+
           return (
             <Wrapper
               key={index}
               value={date}
               range={range}
             >
               <div
-                style={segStyle(1, range.length)}
+                style={styles}
                 className={cn(
                   'rbc-day-bg',
+                  className,
                   selected && 'rbc-selected-cell',
                   dates.isToday(date) && 'rbc-today',
                   currentDate && dates.month(currentDate) !== dates.month(date) && 'rbc-off-range-bg',

src/Calendar.js

@@ -304,6 +304,17 @@ class Calendar extends React.Component {
      */
     slotPropGetter: PropTypes.func,
 
+    /**
+     * Optionally provide a function that returns an object of className or style props
+     * to be applied to the the day background. Caution! Styles that change layout or
+     * position may break the calendar in unexpected ways.
+     *
+     * ```js
+     * (date: Date) => { className?: string, style?: Object }
+     * ```
+     */
+    dayPropGetter: PropTypes.func,
+
     /**
      * Accessor for the event title, used to display event information. Should
      * resolve to a `renderable` value.

src/DateContentRow.js

@@ -32,6 +32,7 @@ const propTypes = {
   onSelectSlot: PropTypes.func,
   onSelectEnd: PropTypes.func,
   onSelectStart: PropTypes.func,
+  dayPropGetter: PropTypes.func,
 
   now: PropTypes.instanceOf(Date).isRequired,
   startAccessor: accessor.isRequired,
@@ -143,6 +144,7 @@ class DateContentRow extends React.Component {
       range,
       className,
       selectable,
+      dayPropGetter,
       renderForMeasure,
       startAccessor,
       endAccessor,
@@ -178,6 +180,7 @@ class DateContentRow extends React.Component {
           range={range}
           selectable={selectable}
           container={this.getContainer}
+          dayPropGetter={dayPropGetter}
           onSelectStart={onSelectStart}
           onSelectEnd={onSelectEnd}
           onSelectSlot={this.handleSelectSlot}

src/DayColumn.js

@@ -61,6 +61,7 @@ class DayColumn extends React.Component {
     className: PropTypes.string,
     dragThroughEvents: PropTypes.bool,
     eventPropGetter: PropTypes.func,
+    dayPropGetter: PropTypes.func,
     dayWrapperComponent: elementType,
     eventComponent: elementType,
     eventWrapperComponent: elementType.isRequired,
@@ -97,25 +98,30 @@ class DayColumn extends React.Component {
       now,
       selectRangeFormat,
       culture,
+      dayPropGetter,
       ...props
     } = this.props
 
     this._totalMin = dates.diff(min, max, 'minutes')
     let { selecting, startSlot, endSlot } = this.state
-    let style = this._slotStyle(startSlot, endSlot)
+    let slotStyles = this._slotStyle(startSlot, endSlot)
 
     let selectDates = {
       start: this.state.startDate,
       end: this.state.endDate
     };
 
+    const { className, style: dayStyles } = (dayPropGetter && dayPropGetter(max)) || {};
+
     return (
       <TimeColumn
         {...props}
         className={cn(
           'rbc-day-slot',
+          className,
           dates.isToday(max) && 'rbc-today'
         )}
+        style={Object.assign({}, dayStyles, slotStyles)}
         now={now}
         min={min}
         max={max}

src/Month.js

@@ -37,6 +37,7 @@ let propTypes = {
 
   scrollToTime: PropTypes.instanceOf(Date),
   eventPropGetter: PropTypes.func,
+  dayPropGetter: PropTypes.func,
 
   culture: PropTypes.string,
   dayFormat: dateFormat,
@@ -161,6 +162,7 @@ class MonthView extends React.Component {
       endAccessor,
       allDayAccessor,
       eventPropGetter,
+      dayPropGetter,
       messages,
       selected,
       now,
@@ -192,6 +194,7 @@ class MonthView extends React.Component {
         endAccessor={endAccessor}
         allDayAccessor={allDayAccessor}
         eventPropGetter={eventPropGetter}
+        dayPropGetter={dayPropGetter}
         renderHeader={this.readerDateHeading}
         renderForMeasure={needLimitMeasure}
         onShowMore={this.handleShowMore}

src/TimeColumn.js

@@ -21,6 +21,7 @@ export default class TimeColumn extends Component {
     className: PropTypes.string,
 
     slotPropGetter: PropTypes.func,
+    dayPropGetter: PropTypes.func,
     dayWrapperComponent: elementType,
   }
   static defaultProps = {
@@ -33,7 +34,7 @@ export default class TimeColumn extends Component {
   }
 
   renderTimeSliceGroup(key, isNow, date) {
-    const { dayWrapperComponent, timeslots, showLabels, step, slotPropGetter, timeGutterFormat, culture } = this.props;
+    const { dayWrapperComponent, timeslots, showLabels, step, slotPropGetter, dayPropGetter, timeGutterFormat, culture } = this.props;
 
     return (
       <TimeSlotGroup
@@ -42,6 +43,7 @@ export default class TimeColumn extends Component {
         value={date}
         step={step}
         slotPropGetter={slotPropGetter}
+        dayPropGetter={dayPropGetter}
         culture={culture}
         timeslots={timeslots}
         showLabels={showLabels}

src/TimeGrid.js

@@ -37,6 +37,7 @@ export default class TimeGrid extends Component {
 
     scrollToTime: PropTypes.instanceOf(Date),
     eventPropGetter: PropTypes.func,
+    dayPropGetter: PropTypes.func,
     dayFormat: dateFormat,
     showMultiDayTimes: PropTypes.bool,
     culture: PropTypes.string,
@@ -270,6 +271,7 @@ export default class TimeGrid extends Component {
             selectable={selectable}
             onSelectSlot={this.handleSelectAllDaySlot}
             dateCellWrapper={components.dateCellWrapper}
+            dayPropGetter={this.props.dayPropGetter}
             eventComponent={this.props.components.event}
             eventWrapperComponent={this.props.components.eventWrapper}
             titleAccessor={this.props.titleAccessor}
@@ -288,13 +290,15 @@ export default class TimeGrid extends Component {
   }
 
   renderHeaderCells(range){
-    let { dayFormat, culture, components, getDrilldownView } = this.props;
+    let { dayFormat, culture, components, dayPropGetter, getDrilldownView } = this.props;
     let HeaderComponent = components.header || Header
 
     return range.map((date, i) => {
       let drilldownView = getDrilldownView(date);
       let label = localizer.format(date, dayFormat, culture);
 
+      const { className, style: dayStyles } = (dayPropGetter && dayPropGetter(date)) || {};
+
       let header = (
         <HeaderComponent
           date={date}
@@ -310,9 +314,10 @@ export default class TimeGrid extends Component {
           key={i}
           className={cn(
             'rbc-header',
+            className,
             dates.isToday(date) && 'rbc-today',
           )}
-          style={segStyle(1, this.slots)}
+          style={Object.assign({}, dayStyles, segStyle(1, this.slots))}
         >
           {drilldownView ? (
             <a