Squashed commit of the following:

commit 0dcc6cd
Author: Giampaolo Bellavite <gpbellavite@gmail.com>
Date:   Tue Apr 25 12:30:01 2017 -0500

    Remove prop quick reference

commit fbc3979
Author: Giampaolo Bellavite <gpbellavite@gmail.com>
Date:   Tue Apr 25 12:29:38 2017 -0500

    Make example’s code cleaner

commit 536c8d0
Author: Giampaolo Bellavite <gpbellavite@gmail.com>
Date:   Tue Apr 25 12:25:08 2017 -0500

    Add docs for modifiersStyles

commit f96e389
Merge: 17f707e 461d377
Author: Giampaolo Bellavite <io@gpbl.org>
Date:   Thu Apr 20 11:13:56 2017 -0500

    Merge pull request #302 from gpbl/fix-function-modifier

    Fix function modifiers

commit 461d377
Author: Giampaolo Bellavite <gpbellavite@gmail.com>
Date:   Thu Apr 20 11:02:39 2017 -0500

    Add example

commit f997d6b
Author: Giampaolo Bellavite <gpbellavite@gmail.com>
Date:   Thu Apr 20 10:59:02 2017 -0500

    Accept function in array of modifiers

docs/API.md

@@ -1,47 +1,4 @@
 # Component API
 
 * [Component props](APIProps.md)
-* [Component methods](APIMethods.md)
-
-## Props quick reference
-
-| Prop | Default | Type |
-| --- | --- | --- |
-| [canChangeMonth](APIProps.md#canchangemonth) | true | `Bool` |
-| [captionElement](APIProps.md#captionelement) | | `Element` |
-| [className](APIProps.md#className) | | `String` |
-| [classNames](APIProps.md#classNames) | | `Object` |
-| [containerProps](APIProps.md#containerprops) | | `Object` |
-| [disabledDays](APIProps.md#disableddays) | | See [modifiers](Modifiers.md) |
-| [enableOutsideDays](APIProps.md#enableoutsidedays) | false | `Bool` |
-| [firstDayOfWeek](APIProps.md#firstdayofweek) | 0 | `Number` |
-| [fixedWeeks](APIProps.md#fixedWeeks) | false | `Bool` |
-| [fromMonth](APIProps.md#frommonth) | | `Date` |
-| [initialMonth](APIProps.md#initialmonth) | Current month | `Date` |
-| [labels](APIProps.md#labels) | `{ nextMonth: "Next Month", previousMonth: "Previous Month" }` | `Object` |
-| [locale](APIProps.md#locale) | en | `String` |
-| [localeUtils](APIProps.md#localeutils) | | `Object` |
-| [modifiers](APIProps.md#modifiers) | | `Object` of [modifiers](Modifiers.md) |
-| [month](APIProps.md#month) | | `Date` |
-| [months](APIProps.md#months) | | `Array<String>` |
-| [navbarElement](APIProps.md#navbarelement) | | `Element` |
-| [numberOfMonths](APIProps.md#numberofmonths) | 1 | `Number` |
-| [onCaptionClick](APIProps.md#oncaptionclick) | | `(currentMonth: Date, e: SyntethicEvent) ⇒ void` |
-| [onBlur](APIProps.md#onblur) | | `(e: SyntethicEvent) ⇒ void` |
-| [onDayClick](APIProps.md#ondayclick) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
-| [onDayMouseEnter](APIProps.md#ondaymouseenter) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
-| [onDayMouseLeave](APIProps.md#ondaymouseleave) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
-| [onDayTouchStart](APIProps.md#ondaytouchstart) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
-| [onDayTouchEnd](APIProps.md#ondaytouchend) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
-| [onFocus](APIProps.md#onfocus) | | `(e: SyntethicEvent) ⇒ void` |
-| [onKeyDown](APIProps.md#onkeydown) | | `(e: SyntethicEvent) ⇒ void` |
-| [onMonthChange](APIProps.md#onmonthchange) | | `(month: Date) ⇒ void` |
-| [pagedNavigation](APIProps.md#pagednavigation) |false | `Bool` |
-| [renderDay](APIProps.md#renderday) | day ⇒ day.getDate() | `(day: Date) ⇒ Element` |
-| [reverseMonths](APIProps.md#reversemonths) | false | `Bool` |
-| [selectedDays](APIProps.md#selecteddays) | | See [modifiers](Modifiers.md) |
-| [tabIndex](APIProps.md#tabindex) | | `Number` |
-| [toMonth](APIProps.md#tomonth) | | `Date` |
-| [weekdayElement](APIProps.md#weekdayelement) | | `Element` |
-| [weekdaysShort](APIProps.md#weekdaysshort) | | `Array<String>` |
-| [weekdaysLong](APIProps.md#weekdayslong) | | `Array<String>` |
+* [Component methods](APIMethods.md)

docs/APIProps.md

@@ -2,7 +2,7 @@
 
 **Rendering months**: [initialMonth](#initialmonth), [month](#month), [fromMonth](#frommonth), [toMonth](#tomonth), [numberOfMonths](#numberofmonths), [pagedNavigation](#pagednavigation), [canChangeMonth](#canchangemonth), [reverseMonths](#reversemonths)
 
-**Day Modifiers**: [selectedDays](#selecteddays), [disabledDays](#disableddays), [modifiers](#modifiers)
+**Day Modifiers**: [selectedDays](#selecteddays), [disabledDays](#disableddays), [modifiers](#modifiers), [modifiersStyles](#modifiersstyles)
 
 **Customization**: [enableOutsideDays](#enableoutsidedays), [fixedWeeks](#fixedweeks)
 
@@ -169,6 +169,37 @@ An object of [day modifiers](Modifiers.md).
 
 As default, the calendar adds `today` and `outside` modifiers. (_Outside days_ are the days appearing on the calendar but don't belonging to the current month).
 
+### modifiersStyles
+
+**Type**: `Object<Any>`
+
+An object of inline styles added to the day cells when a [modifier](#modifiers) is met. Use this prop to style day cells inline instead of using CSS classes. Example:
+
+```jsx
+const modifiers = {
+  even: day => day.getDate() % 2 === 0,
+  odd: day => day.getDate() % 2 !== 0,
+  first: day => day.getDate() === 1,
+};
+
+<DayPicker
+  modifiers={modifiers}
+  modifiersStyles={{
+    even: {
+      background: "green",
+      fontWeight: "bold",
+    },
+    odd: {
+      background: "purple",
+    },
+    first: {
+      background: "green",
+    },
+  }}
+/>
+
+```
+
 ### month
 
 **Type**: `Date`

examples/src/examples/DisabledDays.js

@@ -3,6 +3,14 @@ import DayPicker from '../../../src';
 
 import '../../../src/style.css';
 
+function sundays(day) {
+  return day.getDay() === 0;
+}
+
+function saturdays(day) {
+  return day.getDay() === 6;
+}
+
 export default class DisabledDays extends React.Component {
   state = {
     selectedDay: null,
@@ -16,18 +24,17 @@ export default class DisabledDays extends React.Component {
     });
   };
   render() {
-    const { selectedDay } = this.state;
     return (
       <div>
         <DayPicker
           enableOutsideDays
-          selectedDays={selectedDay}
-          disabledDays={day => day.getDay() === 0 || day.getDay() === 6}
+          selectedDays={this.state.selectedDay}
+          disabledDays={[sundays, saturdays]}
           onDayClick={this.handleDayClick}
         />
         <p>
-          {selectedDay
-            ? selectedDay.toLocaleDateString()
+          {this.state.selectedDay
+            ? this.state.selectedDay.toLocaleDateString()
             : 'Please select a day 👻'}
         </p>
       </div>

examples/src/examples/Restricted.js

@@ -5,6 +5,7 @@ import '../../../src/style.css';
 
 const start = new Date(2015, 3, 1, 0, 0);
 const end = new Date(2015, 10, 30, 23, 59);
+const sundays = day => day.getDay() === 0;
 
 export default function Restricted() {
   return (
@@ -14,7 +15,7 @@ export default function Restricted() {
       initialMonth={start}
       fromMonth={start}
       toMonth={end}
-      disabledDays={[{ before: start }, { after: end }]}
+      disabledDays={[{ before: start }, { after: end }, sundays]}
       onDayClick={(day, { disabled }) => {
         if (!disabled) {
           console.log(day.toLocaleDateString());

src/Helpers.js

@@ -76,6 +76,9 @@ export function getModifiersForDay(d, modifiersObj = {}) {
           if (day.before) {
             return d < day.before;
           }
+          if (typeof day === 'function' && day(d)) {
+            return true;
+          }
           return false;
         })
       ) {

test/Helpers.js

@@ -238,6 +238,27 @@ describe('Helpers', () => {
       expect(modifiers).to.have.length(1);
       expect(modifiers.indexOf('foo')).to.equal(0);
     });
+    it('work with a mix of functions and days', () => {
+      const mixedModifiers = {
+        foo: [
+          { before: new Date(2015, 8, 15) },
+          day => day.getTime() === new Date(2015, 8, 17).getTime(),
+        ],
+      };
+      const modifiers = Helpers.getModifiersForDay(
+        new Date(2015, 8, 10),
+        mixedModifiers
+      );
+      expect(modifiers).to.have.length(1);
+      expect(modifiers.indexOf('foo')).to.equal(0);
+
+      const modifiers2 = Helpers.getModifiersForDay(
+        new Date(2015, 8, 17),
+        mixedModifiers
+      );
+      expect(modifiers2).to.have.length(1);
+      expect(modifiers2.indexOf('foo')).to.equal(0);
+    });
     it('works even without modifiers', () => {
       const modifiers = Helpers.getModifiersForDay(new Date(2015, 8, 19));
       expect(modifiers).to.have.length(0);