Add prop for custom CSS classes on specific dates

README.md

@@ -100,6 +100,7 @@ For more usage examples, see [http://clauderic.github.io/react-infinite-calendar
 | rowHeight      | Number          | `56`                                                                                                                                 | Height of each row in the calendar (each week is considered a `row`)                                                                                                                                                             |
 | autoFocus      | Boolean         | `true`                                                                                                                               | Whether the Calendar root should be auto-focused when it mounts. This is useful when `keyboardSupport` is enabled (the calendar must be focused to listen for keyboard events)                                                   |
 | tabIndex       | Number          | `1`                                                                                                                                  | Tab-index of the calendar                                                                                                                                                                                                        |
+| dateClasses    | Array           |                                                                                                                                      | Array of objects used for assigning custom classes to dates: `{className: "my-class", dates: [new Date(2017, 1, 8), new Date(), new Date(2017, 5, 17)]}`                                                                         |
 
 ### Display Options
 | Property             | Type    | Default      | Description                                                                                                                                      |

src/.stories/index.js

@@ -50,6 +50,19 @@ storiesOf('Basic settings', module)
   ))
   .add('Disable Specific Weekdays', () => (
     <InfiniteCalendar disabledDays={[0, 6]} />
+  ))
+  .add('Assign Custom Classes Specific Dates', () => (
+    <InfiniteCalendar dateClasses={[{
+      className: "yellowBg",
+      dates: [-10, -5, -6, 5, 6, 7, 2].map(amount =>
+        addDays(today, amount)
+      ),
+    },{
+      className: "boldText",
+      dates: [-10, -7, 2, 5, 6, 10].map(amount =>
+        addDays(today, amount)
+      )
+    }]} />
   ));
 
 storiesOf('Higher Order Components', module)

src/.stories/stories.scss

@@ -34,4 +34,11 @@
     height: 100%;
     margin: 0;
   }
+  .yellowBg {
+    background: #ffff00;
+    border-radius: 50%;
+  }
+  .boldText {
+    font-weight: bold;
+  }
 }

src/Calendar/index.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {debounce, emptyFn, range, ScrollSpeed} from '../utils';
+import {debounce, emptyFn, range, ScrollSpeed, getDateClasses} from '../utils';
 import {defaultProps} from 'recompose';
 import defaultDisplayOptions from '../utils/defaultDisplayOptions';
 import defaultLocale from '../utils/defaultLocale';
@@ -57,6 +57,7 @@ export default class Calendar extends Component {
   static propTypes = {
     autoFocus: PropTypes.bool,
     className: PropTypes.string,
+    dateClasses: PropTypes.arrayOf(PropTypes.object),
     DayComponent: PropTypes.func,
     disabledDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
     disabledDays: PropTypes.arrayOf(PropTypes.number),
@@ -268,6 +269,7 @@ export default class Calendar extends Component {
     let {
 			className,
       passThrough,
+      dateClasses,
       DayComponent,
 			disabledDays,
       displayDate,
@@ -296,6 +298,7 @@ export default class Calendar extends Component {
     const locale = this.getLocale();
     const theme = this.getTheme();
     const today = this.today = startOfDay(new Date());
+    const dateClassObj = getDateClasses(dateClasses);
 
     return (
       <div
@@ -343,6 +346,7 @@ export default class Calendar extends Component {
               ref={instance => {
                 this._MonthList = instance;
               }}
+              dateClassObj={dateClassObj}
               DayComponent={DayComponent}
               disabledDates={disabledDates}
               disabledDays={disabledDays}

src/Month/index.js

@@ -9,6 +9,7 @@ import styles from './Month.scss';
 export default class Month extends PureComponent {
   renderRows() {
     const {
+      dateClassObj,
       DayComponent,
       disabledDates,
       disabledDays,
@@ -71,6 +72,7 @@ export default class Month extends PureComponent {
             monthShort={monthShort}
 						theme={theme}
             year={year}
+            className={dateClassObj[date]}
             {...passThrough.Day}
 					/>
 				);

src/MonthList/index.js

@@ -18,6 +18,7 @@ const AVERAGE_ROWS_PER_MONTH = 5;
 
 export default class MonthList extends Component {
   static propTypes = {
+    dateClassObj: PropTypes.object,
     disabledDates: PropTypes.arrayOf(PropTypes.string),
     disabledDays: PropTypes.arrayOf(PropTypes.number),
     height: PropTypes.number,
@@ -118,6 +119,7 @@ export default class MonthList extends Component {
 
   renderMonth = ({index, style}) => {
     let {
+      dateClassObj,
       DayComponent,
       disabledDates,
       disabledDays,
@@ -141,6 +143,7 @@ export default class MonthList extends Component {
       <Month
         key={key}
         selected={selected}
+        dateClassObj={dateClassObj}
         DayComponent={DayComponent}
         monthDate={date}
         disabledDates={disabledDates}

src/utils/index.js

@@ -187,3 +187,26 @@ export function range(start, stop, step = 1) {
 };
 
 export {default as animate} from './animate';
+
+export function getDateClasses(dateClasses){
+  const dateClassObj = {};
+
+  if(dateClasses){
+
+    dateClasses.forEach(dateClass => {
+
+      dateClass.dates.forEach(dateItem => {
+        const year = dateItem.getFullYear();
+        const month = dateItem.getMonth();
+        const day = dateItem.getDate();
+        const date = getDateString(year, month, day);
+        dateClassObj[date] = dateClassObj[date] ? `${dateClassObj[date]} ${dateClass.className}` : dateClass.className;
+
+      });
+
+    });
+
+  }
+
+  return dateClassObj;
+}