Added support for modifiers with date ranges.

Added ability to have WeekDay header in <Week />.
Clean up.

Author: Jon Brito

README.md

@@ -36,8 +36,8 @@ One year calendar ([Demo](http://freiksenet.github.io/react-calendar/)):
           />
 ```
 
-Each component can be used separately AND passed to other components to modify
-rendering.
+Each component can be used separately ~~AND passed to other components to modify
+rendering.~~ We have deprecated this in favor of passing a more flexible modifier object.
 
 ```html
 <Month date={moment()} />

demo.js

@@ -50,8 +50,9 @@ const PagingCalendar = React.createClass({
                       component: [ 'day', 'month', 'week' ]
                     },
                     {
-                      date: moment().add(3, 'days'),
-                      classNames: [ 'event' ],
+                      startDate: moment().add(3, 'days'),
+                      endDate: moment().add(7, 'days'),
+                      classNames: [ 'longEvent' ],
                       component: [ 'day' ]
                     },
                     {
@@ -79,7 +80,7 @@ const PagingCalendar = React.createClass({
                       }
                     }
                   ]
-                  } />
+                } />
       </div>
     );
   }

less/bootstrap-theme.less

@@ -79,6 +79,9 @@
     &--current {
       background-color: @brand-primary;
     }
+    &--longEvent {
+      background-color: @brand-success;
+    }
     &--warning {
       background-color: @brand-warning;
     }

src/Calendar.js

@@ -41,7 +41,7 @@ export default class Calendar extends Component {
   }
 
   getMonthRange () {
-    const focus = this.moment(this.props.date).startOf('month');
+    const focus = this.moment(this.props.date || this.props.startDate).startOf('month');
     const start = this.moment(this.props.startDate);
     const end = this.moment(this.props.endDate);
     const size = end.diff(start, 'month') + 1;

src/Month.js

@@ -23,6 +23,10 @@ const renderWeekHeader = (props) => {
 };
 
 const renderHeader = (props) => {
+  if (props.renderHeader) {
+    return props.renderHeader(props);
+  }
+
   if (!props.monthNames) {
     return null;
   }
@@ -32,7 +36,7 @@ const renderHeader = (props) => {
       { props.date.format(props.monthNameFormat) }
     </header>
   );
-}
+};
 
 const Month = (props) => {
   const { date, weekNumbers } = props;

src/Week.js

@@ -17,7 +17,25 @@ const makeWeekNumber = (props) => {
       { props.date.format(props.weekNumberFormat) }
     </div>
   );
-}
+};
+
+const renderWeekHeader = (props) => {
+  if (!props.weekHeader) {
+    return null;
+  }
+
+  return (
+    <div className={`${clsPrefix}-weekdays`}>
+      {
+        daysOfWeek(props.date).map((weekday, i) =>
+          <div key={ `weekday-header-${i}` } className={ classnames(`${clsPrefix}-weekdays-weekday`) }>
+            { weekday.format(props.weekdayFormat) }
+          </div>
+        )
+      }
+    </div>
+  );
+};
 
 const Week = (props) => {
   const { mods, date } = props;
@@ -37,6 +55,7 @@ const Week = (props) => {
 
   return (
     <div key="days" className={ classnames(clsPrefix, clsMods) } { ...events }>
+      { renderWeekHeader(props) }
       { makeWeekNumber(props) }
       <div className={ classnames(`${clsPrefix}-days`) }>
         {
@@ -56,13 +75,17 @@ const Week = (props) => {
 };
 
 Week.propTypes = {
+  weekHeader: PropTypes.bool,
   weekNumbers: PropTypes.bool,
-  weekNumberFormat: PropTypes.string
+  weekNumberFormat: PropTypes.string,
+  weekdayFormat: PropTypes.string,
 };
 
 Week.defaultProps = {
+  weekHeader: false,
   weekNumbers: false,
-  weekNumberFormat: 'w'
+  weekNumberFormat: 'w',
+  weekdayFormat: 'dd',
 };
 
 export default Week;

src/util.js

@@ -1,6 +1,8 @@
 const bindEvents = (events, date) => {
   const boundEvents = {};
 
+  if (!events) return null;
+
   Object.keys(events)
     .forEach((key) => boundEvents[key] = events[key].bind(null, date));
 
@@ -10,6 +12,9 @@ const bindEvents = (events, date) => {
 const getClsMods = (clsPrefix, mods) =>
   !mods || !mods.classNames ? null : mods.classNames.map((cls) => `${clsPrefix}--${cls}`);
 
+/**
+  * Internal: Creates a single modifier object for a date
+  */
 const getModByDate = (mods, date, type) => {
   const modifier = {
     date: null,
@@ -20,13 +25,38 @@ const getModByDate = (mods, date, type) => {
   mods.filter((mod) => mod.date ? mod.date.isSame(date, type) : null)
     .forEach((_mod) => {
       modifier.date = _mod.date;
-      modifier.events = Object.assign(modifier.events, _mod.events);
+      modifier.events = _mod.events;
       modifier.classNames.push(..._mod.classNames);
     });
 
   return modifier;
 }
 
+const getModsWithDateRange = (mods) =>
+  mods.filter((mod) => !!mod.startDate)
+
+const explodeDateRanges = (mods) => {
+  return mods.map((mod) => {
+    const diff = mod.endDate.diff(mod.startDate, 'days');
+
+    if (!diff) { // if the diff is 0 just return the mod
+      mod.date = mod.startDate.clone();
+      return mod;
+    }
+
+    return Array(diff).fill(mod).map((mod, i) => {
+      return {
+        ...mod,
+        date: mod.startDate.clone().add(i, 'days')
+      }
+    });
+  })
+  .reduce((a, b) => a.concat(b), []);
+}
+
+const getModsWithSingleDate = (mods) =>
+  mods.filter((mod) => !mod.startDate && mod.date)
+
 const getModsWithoutDate = (mods) =>
   mods.filter((mod) => !mod.date)
 
@@ -39,8 +69,8 @@ export const getMods = (mods, date, clsPrefix, type) => {
   }
 
   const events = {};
-
-  const mod = getModByDate(mods, date, type);
+  const exploded = explodeDateRanges(getModsWithDateRange(mods));
+  const mod = getModByDate([ ...mods, ...exploded ], date, type);
   const clsMods = getClsMods(clsPrefix, mod) || [];
   const clsCompMods = getClsMods(clsPrefix, getModsWithoutDate(mods)) || [];