Repository: freiksenet/react-calendar
Branch: master
Commit: 2dd32f345f4b
Files: 29
Total size: 56.3 KB

Directory structure:
gitextract_utd994_w/

├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── css/
│   └── bootstrap-theme.css
├── demo.js
├── dist/
│   └── react-calendar.js
├── index.html
├── less/
│   └── bootstrap-theme.less
├── package.json
├── react-calendar.js
├── scripts/
│   └── gh-pages.sh
├── src/
│   ├── Calendar.js
│   ├── Day.js
│   ├── Month.js
│   ├── Week.js
│   ├── dateUtils.js
│   └── util.js
├── test/
│   ├── Calendar.spec.js
│   ├── Day.spec.js
│   ├── Month.spec.js
│   ├── Week.spec.js
│   ├── mocha.opts
│   └── utils/
│       └── document.js
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [ "es2015", "stage-0", "react" ]
}


================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

[*]

# Change these settings to your own preference
indent_style = space
indent_size = 2

# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false


================================================
FILE: .eslintignore
================================================
lib
dist
**/node_modules
**/webpack.config.js
examples/**/server.js


================================================
FILE: .eslintrc
================================================
{
  "parser": "babel-eslint",

  "plugins": [ "react" ],

  "ecmaFeatures": {
    "jsx": true
  },
  "env": {
    "es6": true,
    "browser": true,
    "mocha": true,
    "node": true
  },

  "rules": {
    "array-bracket-spacing": 0,
    "camelcase": 2,
    "consistent-return": 2,
    "dot-notation": 0,
    "eol-last": 2,
    "eqeqeq": 2,
    "new-cap": [
      2,
      {
        "capIsNew": false
      }
    ],
    "no-eq-null": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-multiple-empty-lines": [
      2,
      {
        "max": 2
      }
    ],
    "no-trailing-spaces": 2,
    "no-use-before-define": [
      2,
      "nofunc"
    ],
    "no-undef": 2,
    "no-underscore-dangle": 0,
    "no-var": 2,
    "object-curly-spacing": [
      2,
      "always"
    ],
    "quotes": [
      2,
      "single"
    ],
    "keyword-spacing": 2,
    "space-before-blocks": [
      2,
      "always"
    ],
    "space-before-function-paren": [
      2,
      "always"
    ],
    "strict": 0,
    "vars-on-top": 2,
    "indent": [
      2,
      2,
      {
        "SwitchCase": 1
      }
    ]
  },

  "react/display-name": 0,
  "react/jsx-boolean-value": 2,
  "react/jsx-quotes": 2,
  "react/jsx-no-undef": 2,
  "react/jsx-sort-props": 0,
  "react/jsx-uses-react": 2,
  "react/jsx-uses-vars": 2,
  "react/no-did-mount-set-state": 2,
  "react/no-did-update-set-state": 2,
  "react/no-multi-comp": 0,
  "react/no-unknown-property": 2,
  "react/prop-types": 2,
  "react/react-in-jsx-scope": 2,
  "react/self-closing-comp": 2,
  "react/wrap-multilines": 2
}


================================================
FILE: .gitignore
================================================
build/
node_modules/
npm-debug.log
.idea
.DS_Store


================================================
FILE: .npmignore
================================================
build/
node_modules/
npm-debug.log

================================================
FILE: LICENSE
================================================
Copyright (c) 2014 Mikhail Novikov

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

================================================
FILE: README.md
================================================
react-calendar
==============
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][downloads-url]

Calendars for React v15.

Not just calendar component, but a modular toolkit for building everything
related to calendars in React, such as Datepickers.

In early alpha stage, documentation and features will arrive.

Example
-------

```
npm install
npm run
```

One year calendar ([Demo](http://freiksenet.github.io/react-calendar/)):

```html
<Calendar startDate={ moment() }
          endDate={ moment().endOf('year') } <!-- Base calendar component -->
          weekNumbers={true}
          size={12}
          mods={
            [                           <!-- Pass modifier objects to change rendering -->
              {
                date: moment(),
                classNames: [ 'current' ],
                component: [ 'day', 'month', 'week' ] <!-- This shows the current day, week, and month. -->
              }
            ]
          }

          />
```

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()} />
```

If a modifier is passed without date it modifies *all* components of this type in
the tree. Useful, for example, for passing callbacks.

```html
<Calendar firstMonth={1}
          date={moment("2014-01-01")}
          weekNumbers={true}
          size={12}
          startDate={ moment() }
          endDate={ moment().endOf('year') } <!-- Base calendar compoment -->
          weekNumbers={true}
          size={12}
          mods={
            [
              {
                component: [ 'day' ],
                events: {
                  onClick: (date) => alert(date)
                }
              }
            ]
          } />
```

Events
------

All mouse and touch events are supported on all components with react style
onCamelCase props (eg. onClick). Event handlers receives two arguments -
date in moment.js format and the original react event.

Styling
-------

There is no style by default, but an example theme using bootstrap is included
in less/bootstrap-theme.less.

react-calendar uses SuitCSS style (a variant of BEM) to make default class hierarchy,
if you want to add a class that is separate from that hierarchy just pass `classes`
prop to any component. `classes` is an object with keys as class names and values as
boolean-like values (this will be probably changed to just passing array of classes in
future API). If you want to add SuitCSS modifier classes (eg `rc-Day--current`),
pass similar object via `modifiers` prop (again this will probably become an array
in next version of API).

For example:

```html
<Day date={moment()} mods={[{bar: true}]} />
```

will yield the following classes: `"rc-Day rc-Day--bar".`

TODO
----

- [ ] Merging of modifiers and classe
- [ ] Docs
- [ ] Calendar should be able to page
- [ ] A component for Year - Calendar is supposed to be a 'controller' component for pageable stuff
- [ ] A component that is on lower level that Day - for events.
- [x] ~~Utils to create range of components for modifying multiple components easier~~
- [ ] An example datepicker component using react-calendar
- [x] ~~Basic unit tests~~
- [ ] More Tests!

[npm-image]: https://img.shields.io/npm/v/react-calendar.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-calendar
[downloads-image]: https://img.shields.io/npm/dm/react-calendar.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/react-calendar


================================================
FILE: css/bootstrap-theme.css
================================================
.cell {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding: 5px;
  text-align: center;
}
.rc-Calendar-header {
  text-align: center;
  font-weight: bolder;
}
.rc-Month {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 10px 10px;
}
.rc-Month-header {
  text-align: center;
  font-weight: bolder;
}
.rc-Month-weekdays {
  margin-left: 32px;
}
.rc-Month-weekdays-weekday {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding: 5px;
  text-align: center;
  font-weight: bolder;
}
.rc-Month--current .rc-Month-header {
  color: #337ab7;
}
.rc-Week {
  height: 32px;
}
.rc-Week-number {
  color: #777777;
  display: inline-block;
  width: 32px;
  height: 32px;
  padding: 5px;
  text-align: center;
}
.rc-Week-days {
  border-left: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
  display: inline-block;
}
.rc-Week:last-child .rc-Week-days {
  border-bottom: 1px solid #eeeeee;
}
.rc-Week--current {
  background-color: #5bc0de;
}
.rc-Day {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding: 5px;
  text-align: center;
  border-right: 1px solid #eeeeee;
  cursor: pointer;
}
.rc-Day:hover {
  background-color: #5bc0de;
}
.rc-Day--outside {
  cursor: default;
  color: #eeeeee;
}
.rc-Day--outside:hover {
  background-color: transparent;
}
.rc-Day--event {
  background-color: #eeeeee;
}
.rc-Day--current {
  background-color: #337ab7;
}
.rc-Day--longEvent {
  background-color: #5cb85c;
}
.rc-Day--warning {
  background-color: #f0ad4e;
}


================================================
FILE: demo.js
================================================
import moment from 'moment';
import React from 'react';
import ReactDOM from 'react-dom';

import Calendar from './src/Calendar';
import Week from './src/Week';
import Month from './src/Month';

require('./less/bootstrap-theme.less');

const PagingCalendar = React.createClass({
  getInitialState: function () {
    return {
      date: moment().startOf('year')
    };
  },

  handlePrevYear: function (e) {
    e.preventDefault();
    this.setState({
      date: this.state.date.clone().subtract(1, 'year')
    });
  },

  handleNextYear: function (e) {
    e.preventDefault();
    this.setState({
      date: this.state.date.clone().add(1, 'year')
    });
  },

  render: function () {
    return (
      <div>
        <a href="#" className="prevYear" onClick={this.handlePrevYear}>
          Prev Year
        </a>
        <a href="#" className="nextYear" onClick={this.handleNextYear}>
          Next Year
        </a>
        <Calendar weekNumbers={ true }
                  startDate={ this.state.date }
                  date={ this.state.date }
                  endDate={ this.state.date.clone().endOf('year') }
                  mods={
                  [
                    {
                      date: moment(),
                      classNames: [ 'current' ],
                      component: [ 'day', 'month', 'week' ]
                    },
                    {
                      startDate: moment().add(3, 'days'),
                      endDate: moment().add(7, 'days'),
                      classNames: [ 'longEvent' ],
                      component: [ 'day' ]
                    },
                    {
                      date: moment().add(3, 'days'),
                      classNames: [ 'appointment' ],
                      component: [ 'day' ]
                    },
                    {
                      date: moment().add(4, 'days'),
                      classNames: [ 'event', 'warning' ],
                      component: [ 'day' ],
                      events: {
                        onClick: (date, e) => alert(`${date.format('dddd')}'s event!`)
                      }
                    },
                    {
                      date: moment().add(5, 'days'),
                      classNames: [ 'event' ],
                      component: [ 'day' ]
                    },
                    {
                      component: 'day',
                      events: {
                        onClick: (date, e) => alert(date.format())
                      }
                    }
                  ]
                } />
      </div>
    );
  }
});

ReactDOM.render(
  <PagingCalendar />,
  document.getElementById('app')
);


================================================
FILE: dist/react-calendar.js
================================================
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"), require("moment"));
	else if(typeof define === 'function' && define.amd)
		define(["react", "moment"], factory);
	else if(typeof exports === 'object')
		exports["ReactCalendar"] = factory(require("react"), require("moment"));
	else
		root["ReactCalendar"] = factory(root["React"], root["moment"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}


/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});

	var _Calendar = __webpack_require__(1);

	Object.defineProperty(exports, 'Calendar', {
	  enumerable: true,
	  get: function get() {
	    return _interopRequireDefault(_Calendar).default;
	  }
	});

	var _Month = __webpack_require__(6);

	Object.defineProperty(exports, 'Month', {
	  enumerable: true,
	  get: function get() {
	    return _interopRequireDefault(_Month).default;
	  }
	});

	var _Week = __webpack_require__(8);

	Object.defineProperty(exports, 'Week', {
	  enumerable: true,
	  get: function get() {
	    return _interopRequireDefault(_Week).default;
	  }
	});

	var _Day = __webpack_require__(9);

	Object.defineProperty(exports, 'Day', {
	  enumerable: true,
	  get: function get() {
	    return _interopRequireDefault(_Day).default;
	  }
	});

	var _util = __webpack_require__(5);

	Object.defineProperty(exports, 'util', {
	  enumerable: true,
	  get: function get() {
	    return _interopRequireDefault(_util).default;
	  }
	});

	var _dateUtils = __webpack_require__(7);

	Object.defineProperty(exports, 'dateUtils', {
	  enumerable: true,
	  get: function get() {
	    return _interopRequireDefault(_dateUtils).default;
	  }
	});

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});

	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

	var _react = __webpack_require__(2);

	var _react2 = _interopRequireDefault(_react);

	var _moment2 = __webpack_require__(3);

	var _moment3 = _interopRequireDefault(_moment2);

	var _classnames = __webpack_require__(4);

	var _classnames2 = _interopRequireDefault(_classnames);

	var _util = __webpack_require__(5);

	var _Month = __webpack_require__(6);

	var _Month2 = _interopRequireDefault(_Month);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

	var Calendar = function (_Component) {
	  _inherits(Calendar, _Component);

	  function Calendar(props, context) {
	    _classCallCheck(this, Calendar);

	    return _possibleConstructorReturn(this, Object.getPrototypeOf(Calendar).call(this, props, context));
	  }

	  _createClass(Calendar, [{
	    key: 'moment',
	    value: function moment() {
	      var localMoment = _moment3.default.apply(null, arguments);

	      localMoment.locale(this.props.locale);

	      return localMoment;
	    }
	  }, {
	    key: 'renderHeader',
	    value: function renderHeader() {
	      return _react2.default.createElement(
	        'header',
	        { key: 'header', className: (0, _classnames2.default)('rc-Calendar-header') },
	        this.moment(this.props.date).format(this.props.yearHeaderFormat)
	      );
	    }
	  }, {
	    key: 'getMonthRange',
	    value: function getMonthRange() {
	      var focus = this.moment(this.props.date || this.props.startDate).startOf('month');
	      var start = this.moment(this.props.startDate);
	      var end = this.moment(this.props.endDate);
	      var size = end.diff(start, 'month') + 1;

	      return Array(size).fill(0).map(function (n, i) {
	        return focus.clone().add(n + i, 'months');
	      });
	    }
	  }, {
	    key: 'render',
	    value: function render() {
	      var _this2 = this;

	      var mods = this.props.mods;

	      var monthMods = (0, _util.getModsByCompType)('month', mods);
	      var weekMods = (0, _util.getModsByCompType)('week', mods);
	      var dayMods = (0, _util.getModsByCompType)('day', mods);

	      return _react2.default.createElement(
	        'div',
	        null,
	        this.renderHeader(),
	        this.getMonthRange().map(function (date, i) {
	          return _react2.default.createElement(_Month2.default, { key: 'month-' + i,
	            date: date,
	            weekNumbers: _this2.props.weekNumbers,
	            mods: monthMods,
	            week: weekMods,
	            day: dayMods });
	        })
	      );
	    }
	  }]);

	  return Calendar;
	}(_react.Component);

	Calendar.propTypes = {
	  startDate: _react.PropTypes.object.isRequired,
	  endDate: _react.PropTypes.object.isRequired,
	  weekNumbers: _react.PropTypes.bool,
	  locale: _react.PropTypes.string,
	  month: _react.PropTypes.array,
	  yearHeaderFormat: _react.PropTypes.string
	};
	Calendar.defaultProps = {
	  locale: 'en',
	  yearHeaderFormat: 'YYYY'
	};
	exports.default = Calendar;

/***/ },
/* 2 */
/***/ function(module, exports) {

	module.exports = __WEBPACK_EXTERNAL_MODULE_2__;

/***/ },
/* 3 */
/***/ function(module, exports) {

	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;

/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {

	var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
	  Copyright (c) 2016 Jed Watson.
	  Licensed under the MIT License (MIT), see
	  http://jedwatson.github.io/classnames
	*/
	/* global define */

	(function () {
		'use strict';

		var hasOwn = {}.hasOwnProperty;

		function classNames () {
			var classes = [];

			for (var i = 0; i < arguments.length; i++) {
				var arg = arguments[i];
				if (!arg) continue;

				var argType = typeof arg;

				if (argType === 'string' || argType === 'number') {
					classes.push(arg);
				} else if (Array.isArray(arg)) {
					classes.push(classNames.apply(null, arg));
				} else if (argType === 'object') {
					for (var key in arg) {
						if (hasOwn.call(arg, key) && arg[key]) {
							classes.push(key);
						}
					}
				}
			}

			return classes.join(' ');
		}

		if (typeof module !== 'undefined' && module.exports) {
			module.exports = classNames;
		} else if (true) {
			// register as 'classnames', consistent with npm package name
			!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
				return classNames;
			}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
		} else {
			window.classNames = classNames;
		}
	}());


/***/ },
/* 5 */
/***/ function(module, exports) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});

	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

	var bindEvents = function bindEvents(events, date) {
	  var boundEvents = {};

	  if (!events) return null;

	  Object.keys(events).forEach(function (key) {
	    return boundEvents[key] = events[key].bind(null, date);
	  });

	  return boundEvents;
	};

	var getClsMods = function getClsMods(clsPrefix, mods) {
	  return !mods || !mods.classNames ? null : mods.classNames.map(function (cls) {
	    return clsPrefix + '--' + cls;
	  });
	};

	/**
	  * Internal: Creates a single modifier object for a date
	  */
	var getModByDate = function getModByDate(mods, date, type) {
	  var modifier = {
	    date: null,
	    classNames: [],
	    events: {}
	  };

	  mods.filter(function (mod) {
	    return mod.date ? mod.date.isSame(date, type) : null;
	  }).forEach(function (_mod) {
	    modifier.date = _mod.date;
	    modifier.events = _mod.events;
	    if (Array.isArray(_mod.classNames)) {
	      var _modifier$classNames;

	      (_modifier$classNames = modifier.classNames).push.apply(_modifier$classNames, _toConsumableArray(_mod.classNames));
	    }
	  });

	  return modifier;
	};

	var getModsWithDateRange = function getModsWithDateRange(mods) {
	  return mods.filter(function (mod) {
	    return !!mod.startDate;
	  });
	};

	var explodeDateRanges = function explodeDateRanges(mods) {
	  return mods.map(function (mod) {
	    var 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(function (mod, i) {
	      return _extends({}, mod, {
	        date: mod.startDate.clone().add(i, 'days')
	      });
	    });
	  }).reduce(function (a, b) {
	    return a.concat(b);
	  }, []);
	};

	// const getModsWithSingleDate = (mods) =>
	// mods.filter((mod) => !mod.startDate && mod.date)

	var getModsWithoutDate = function getModsWithoutDate(mods) {
	  return mods.filter(function (mod) {
	    return !mod.date;
	  });
	};

	var getModsByCompType = exports.getModsByCompType = function getModsByCompType(componentType, mods) {
	  if (!mods) {
	    return [];
	  }

	  return mods.filter(function (_ref) {
	    var component = _ref.component;
	    return component.indexOf(componentType.toLowerCase()) > -1;
	  });
	};

	var getMods = exports.getMods = function getMods(mods, date, clsPrefix, type) {
	  if (!mods) {
	    return null;
	  }

	  var events = {};
	  var exploded = explodeDateRanges(getModsWithDateRange(mods));
	  var mod = getModByDate([].concat(_toConsumableArray(mods), _toConsumableArray(exploded)), date, type);
	  var clsMods = getClsMods(clsPrefix, mod) || [];
	  var clsCompMods = getClsMods(clsPrefix, getModsWithoutDate(mods)) || [];

	  getModsWithoutDate(mods).forEach(function (mod) {
	    return Object.assign(events, bindEvents(mod.events, date));
	  });

	  if (mod && mod.events) {
	    Object.assign(events, bindEvents(mod.events, date));
	  }

	  return { clsMods: [].concat(_toConsumableArray(clsMods), _toConsumableArray(clsCompMods)), events: events };
	};

/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});

	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	var _react = __webpack_require__(2);

	var _react2 = _interopRequireDefault(_react);

	var _classnames = __webpack_require__(4);

	var _classnames2 = _interopRequireDefault(_classnames);

	var _dateUtils = __webpack_require__(7);

	var _util = __webpack_require__(5);

	var _Week = __webpack_require__(8);

	var _Week2 = _interopRequireDefault(_Week);

	var _Day = __webpack_require__(9);

	var _Day2 = _interopRequireDefault(_Day);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var clsPrefix = 'rc-Month';

	var renderWeekHeader = function renderWeekHeader(props) {
	  return _react2.default.createElement(
	    'div',
	    { className: clsPrefix + '-weekdays' },
	    (0, _dateUtils.daysOfWeek)(props.date).map(function (weekday, i) {
	      return _react2.default.createElement(
	        'div',
	        { key: 'weekday-header-' + i, className: (0, _classnames2.default)(clsPrefix + '-weekdays-weekday') },
	        weekday.format(props.weekdayFormat)
	      );
	    })
	  );
	};

	var renderHeader = function renderHeader(props) {
	  if (props.renderHeader) {
	    return props.renderHeader(props);
	  }

	  if (!props.monthNames) {
	    return null;
	  }

	  return _react2.default.createElement(
	    'header',
	    { key: 'header', className: (0, _classnames2.default)(clsPrefix + '-header') },
	    props.date.format(props.monthNameFormat)
	  );
	};

	var Month = function Month(props) {
	  var date = props.date;
	  var weekNumbers = props.weekNumbers;

	  var edges = (0, _dateUtils.monthEdges)(date);

	  var mods = props.mods;
	  var day = props.day;
	  var week = props.week;

	  var clsMods = void 0,
	      events = void 0;

	  if (!props.day) {
	    day = (0, _util.getModsByCompType)('day', mods);
	  }

	  if (!props.week) {
	    week = (0, _util.getModsByCompType)('week', mods);
	  }

	  if (!props.day || !props.week) {
	    // this means we're probably just rendering a single month and need to filter our component types again.
	    mods = (0, _util.getModsByCompType)('month', mods);
	  }

	  var fWeekMods = week.filter(function (mod, j) {
	    return mod.date ? mod.date.isSame(date, 'month') : true;
	  });
	  var fDayMods = day.filter(function (mod, k) {
	    return mod.date ? mod.date.isSame(date, 'month') : true;
	  });

	  var modifiers = (0, _util.getMods)(mods, date, clsPrefix, 'month');

	  if (modifiers) {
	    clsMods = modifiers.clsMods;
	    events = modifiers.events;
	  }

	  return _react2.default.createElement(
	    'div',
	    _extends({ className: (0, _classnames2.default)(clsPrefix, clsMods) }, events),
	    renderHeader(props),
	    renderWeekHeader(props),
	    (0, _dateUtils.weeksOfMonth)(props.date).map(function (wDate, i) {
	      return _react2.default.createElement(_Week2.default, { key: 'week-' + i,
	        date: wDate,
	        edges: edges,
	        weekNumbers: weekNumbers,
	        mods: fWeekMods,
	        day: fDayMods });
	    })
	  );
	};

	Month.propTypes = {
	  monthNames: _react.PropTypes.bool,
	  monthNameFormat: _react.PropTypes.string,
	  weekdayNames: _react.PropTypes.bool,
	  weekdayFormat: _react.PropTypes.string,
	  mod: _react.PropTypes.object
	};

	Month.defaultProps = {
	  monthNames: true,
	  monthNameFormat: 'MMMM YYYY',
	  weekdayNames: true,
	  weekdayFormat: 'dd'
	};

	exports.default = Month;

/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});
	exports.weeksOfMonth = weeksOfMonth;
	exports.monthEdges = monthEdges;
	exports.daysOfWeek = daysOfWeek;

	var _moment = __webpack_require__(3);

	var _moment2 = _interopRequireDefault(_moment);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	/** Returns moment objects for first day of each week of the month.
	 *  Can return moments from previous month if week start is in them.
	 *  @param {string|Date|moment} month any date in a month to create weeks for
	 */
	function weeksOfMonth(month) {
	  var thisMonth = month.month();
	  var weeks = [];

	  month = (0, _moment2.default)(month).startOf('month').startOf('week');

	  do {
	    weeks.push(month.clone());
	    month.add(1, 'week');
	  } while (month.month() === thisMonth);

	  return weeks;
	}

	/** Returns moments for each day that is not in the month, but is part of
	 *  weeks that are.
	 *  Week contents is locale aware.
	 *  @param {string|Date|moment} moment any date in the target month
	 */
	function monthEdges(month) {
	  var start = (0, _moment2.default)(month).startOf('month').startOf('week');
	  var end = (0, _moment2.default)(month).endOf('month').endOf('week');

	  var result = [];

	  while (start.month() !== month.month()) {
	    result.push(start.clone());
	    start.add(1, 'day');
	  }

	  while (end.month() !== month.month()) {
	    result.push(end.clone());
	    end.subtract(1, 'day');
	  }

	  return result;
	}

	/** Returns moment objects for each day of the week.
	 *  Ordering is locale aware.
	 *  @param {string|Date|moment} week any date in a week to create days for
	 */
	function daysOfWeek(week) {
	  week = (0, _moment2.default)(week).startOf('week');

	  return Array(7).fill(0).map(function (n, i) {
	    return week.clone().add(n + i, 'day');
	  });
	}

/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});

	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	var _react = __webpack_require__(2);

	var _react2 = _interopRequireDefault(_react);

	var _classnames = __webpack_require__(4);

	var _classnames2 = _interopRequireDefault(_classnames);

	var _util = __webpack_require__(5);

	var _dateUtils = __webpack_require__(7);

	var _Day = __webpack_require__(9);

	var _Day2 = _interopRequireDefault(_Day);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var clsPrefix = 'rc-Week';

	var makeWeekNumber = function makeWeekNumber(props) {
	  if (!props.weekNumbers) {
	    return null;
	  }

	  return _react2.default.createElement(
	    'div',
	    { key: 'weekNumber', className: (0, _classnames2.default)(clsPrefix + '-number') },
	    props.date.format(props.weekNumberFormat)
	  );
	};

	var renderWeekHeader = function renderWeekHeader(props) {
	  if (!props.weekHeader) {
	    return null;
	  }

	  return _react2.default.createElement(
	    'div',
	    { className: clsPrefix + '-weekdays' },
	    (0, _dateUtils.daysOfWeek)(props.date).map(function (weekday, i) {
	      return _react2.default.createElement(
	        'div',
	        { key: 'weekday-header-' + i, className: (0, _classnames2.default)(clsPrefix + '-weekdays-weekday') },
	        weekday.format(props.weekdayFormat)
	      );
	    })
	  );
	};

	var Week = function Week(props) {
	  var mods = props.mods;
	  var date = props.date;
	  var clsMods = void 0;var events = void 0;var week = void 0;var day = props.day;


	  week = (0, _util.getModsByCompType)('week', mods);
	  var modifiers = (0, _util.getMods)(week, date, clsPrefix, 'week');

	  if (modifiers) {
	    clsMods = modifiers.clsMods;
	    events = modifiers.events;
	  }

	  if (!props.day) {
	    day = (0, _util.getModsByCompType)('day', mods);
	  }

	  return _react2.default.createElement(
	    'div',
	    _extends({ key: 'days', className: (0, _classnames2.default)(clsPrefix, clsMods) }, events),
	    renderWeekHeader(props),
	    makeWeekNumber(props),
	    _react2.default.createElement(
	      'div',
	      { className: (0, _classnames2.default)(clsPrefix + '-days') },
	      (0, _dateUtils.daysOfWeek)(props.date).map(function (date, i) {
	        var outside = void 0;

	        if (props.edges) {
	          outside = Boolean(props.edges.find(function (edge, j) {
	            return edge.isSame(date, 'month', 'week', 'year');
	          }));
	        }

	        return _react2.default.createElement(_Day2.default, { outside: !!outside, key: 'day-' + i, date: date, mods: day });
	      })
	    )
	  );
	};

	Week.propTypes = {
	  weekHeader: _react.PropTypes.bool,
	  weekNumbers: _react.PropTypes.bool,
	  weekNumberFormat: _react.PropTypes.string,
	  weekdayFormat: _react.PropTypes.string
	};

	Week.defaultProps = {
	  weekHeader: false,
	  weekNumbers: false,
	  weekNumberFormat: 'w',
	  weekdayFormat: 'dd'
	};

	exports.default = Week;

/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});

	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	var _react = __webpack_require__(2);

	var _react2 = _interopRequireDefault(_react);

	var _classnames = __webpack_require__(4);

	var _classnames2 = _interopRequireDefault(_classnames);

	var _util = __webpack_require__(5);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var clsPrefix = 'rc-Day';

	var renderHeader = function renderHeader(props) {
	  if (!props.dayHeader) {
	    return null;
	  }

	  return _react2.default.createElement(
	    'header',
	    { className: clsPrefix + '-Day-header' },
	    props.date.format(props.dayHeaderFormat)
	  );
	};

	var renderAgenda = function renderAgenda(props) {
	  if (!props.dayAgenda) {
	    return null;
	  }

	  return _react2.default.createElement(
	    'div',
	    { key: 'agenda', className: clsPrefix + '-Day-agenda' },
	    props.children
	  );
	};

	var Day = function Day(props) {
	  var clsPrefix = 'rc-Day';
	  var date = props.date;
	  var mods = props.mods;
	  var outside = props.outside;

	  var modifiers = (0, _util.getMods)(mods, date, clsPrefix, 'day');

	  var clsMods = void 0,
	      events = void 0;

	  if (modifiers) {
	    clsMods = modifiers.clsMods;
	    events = modifiers.events;
	  }

	  var clsDay = (0, _classnames2.default)(clsPrefix, { 'rc-Day--outside': outside }, clsMods);

	  return _react2.default.createElement(
	    'div',
	    _extends({ className: clsDay }, events),
	    renderHeader(props),
	    date.format(props.dayFormat),
	    renderAgenda(props)
	  );
	};

	Day.propTypes = {
	  date: _react2.default.PropTypes.object.isRequired,
	  dayAgenda: _react2.default.PropTypes.bool,
	  dayHeader: _react2.default.PropTypes.bool,
	  dayHeaderFormat: _react2.default.PropTypes.string,
	  dayFormat: _react2.default.PropTypes.string,
	  mods: _react.PropTypes.array
	};

	Day.defaultProps = {
	  dayAgenda: false,
	  dayHeader: false,
	  dayHeaderFormat: 'MMM Do',
	  dayFormat: 'D'
	};

	exports.default = Day;

/***/ }
/******/ ])
});
;

================================================
FILE: index.html
================================================
<!DOCTYPE html>
<head>
  <title>
    react-calendar demos
  </title>
  <style>
    #app {
      width: 1068px;
    }
    .nextYear {
      float: right;
    }
  </style>
<body>
  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">react-calendar examples</a>
    </div>
  </div>
  </nav>
  <div class="container-fluid">
    <div id="app"></div>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment-with-locales.min.js"></script>
  <script src="react-calendar.js"></script>
</body>


================================================
FILE: less/bootstrap-theme.less
================================================
// Sample bootstrap theme for react-calendar

@import '~bootstrap/less/bootstrap.less';
@import '~bootstrap/less/theme.less';

.cell {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding: 5px;
  text-align: center;
}

.rc {
  &-Calendar {
    &-header {
      text-align: center;
      font-weight: bolder;
    }
  }
  &-Month {
    display: inline-block;
    vertical-align: top;
    margin: 0 0 10px 10px;
    &-header {
      text-align: center;
      font-weight: bolder;
    }
    &-weekdays {
      margin-left: 32px;
      &-weekday {
        .cell();
        font-weight: bolder;
      }
    }
    &--current {
      .rc-Month-header {
        color: @brand-primary;
      }
    }
  }
  &-Week {
    height: 32px;
    &-number {
      color: @gray-light;
      .cell();
    }
    &-days {
      border-left: 1px solid @gray-lighter;
      border-top: 1px solid @gray-lighter;
      display: inline-block;
    }
    &:last-child {
      .rc-Week-days {
        border-bottom: 1px solid @gray-lighter;
      }
    }
    &--current {
      background-color: @brand-info;
    }
  }
  &-Day {
    .cell();
    border-right: 1px solid @gray-lighter;
    cursor: pointer;
    &:hover {
      background-color: @brand-info;
    }
    &--outside {
      cursor: default;
      color: @gray-lighter;
      &:hover {
        background-color: transparent;
      }
    }
    &--event {
      background-color: @gray-lighter;
    }
    &--current {
      background-color: @brand-primary;
    }
    &--longEvent {
      background-color: @brand-success;
    }
    &--warning {
      background-color: @brand-warning;
    }
  }
}


================================================
FILE: package.json
================================================
{
  "name": "react-calendar",
  "version": "1.1.0",
  "author": "Mikhail <freiksenet@gmail.com> Novikov",
  "description": "Calendar component for ReactJS",
  "keywords": [
    "react",
    "react-component",
    "calendar",
    "browser"
  ],
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/freiksenet/react-calendar.git"
  },
  "dependencies": {
    "classnames": "^2.2.3"
  },
  "peerDependencies": {
    "moment": "^2.8.3",
    "react": "15.x",
    "react-dom": "15.x"
  },
  "devDependencies": {
    "babel-cli": "^6.5.1",
    "babel-core": "^6.5.1",
    "babel-eslint": "^4.1.8",
    "babel-loader": "^6.2.2",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-runtime": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.5.0",
    "bootstrap": "~3.2.0",
    "chai": "^3.5.0",
    "css-loader": "^0.23.1",
    "enzyme": "^2.0.0",
    "eslint-plugin-react": "^3.16.1",
    "file-loader": "^0.7.2",
    "isparta": "^4.0.0",
    "jsx-loader": "^0.12.2",
    "less": "^2.6.0",
    "less-loader": "^2.2.2",
    "mocha": "^2.4.5",
    "moment": "^2.8.3",
    "raw-loader": "^0.5.1",
    "react": "15.x",
    "react-dom": "15.x",
    "react-addons-test-utils": "15.x",
    "react-hot-loader": "^1.3.0",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.5",
    "webpack": "^1.4.3",
    "webpack-dev-server": "^1.14.1"
  },
  "main": "./dist/react-calendar.js",
  "scripts": {
    "clean": "rimraf build dist",
    "test": "npm run umd && NODE_ENV=test mocha",
    "test:watch": "NODE_ENV=test mocha --watch",
    "prepublish": "webpack",
    "umd": "REACT_CALENDAR_WEBPACK=umd webpack",
    "umd-min": "REACT_CALENDAR_WEBPACK=umd_min webpack",
    "demo": "REACT_CALENDAR_WEBPACK=umd webpack --entry ./demo.js",
    "start": "REACT_CALENDAR_WEBPACK=server webpack-dev-server -d --entry ./demo.js --hot --progress --colors --inline",
    "gh-pages": "./scripts/gh-pages.sh"
  }
}


================================================
FILE: react-calendar.js
================================================
export { default as Calendar } from './src/Calendar';
export { default as Month } from './src/Month';
export { default as Week } from './src/Week';
export { default as Day } from './src/Day';
export { default as util } from './src/util';
export { default as dateUtils } from './src/dateUtils';


================================================
FILE: scripts/gh-pages.sh
================================================
#!/bin/bash

set -e
echo $(git rev-parse --show-toplevel) # to fail if we are in wrong place
cd "$(git rev-parse --show-toplevel)"
rm -rf build/
npm run demo
cp index.html build/
cd build/
git init .
git add .
git commit -m "Update pages"
git push git@github.com:freiksenet/react-calendar.git master:gh-pages --force
rm -rf .git


================================================
FILE: src/Calendar.js
================================================
import React, { Component, PropTypes } from 'react';
import moment from 'moment';
import classnames from 'classnames';
import { getModsByCompType } from './util';

import Month from './Month';

export default class Calendar extends Component {
  static propTypes = {
    startDate: PropTypes.object.isRequired,
    endDate: PropTypes.object.isRequired,
    weekNumbers: PropTypes.bool,
    locale: PropTypes.string,
    month: PropTypes.array,
    yearHeaderFormat: PropTypes.string
  };

  static defaultProps = {
    locale: 'en',
    yearHeaderFormat: 'YYYY'
  };

  constructor (props, context) {
    super(props, context);
  }

  moment () {
    const localMoment = moment.apply(null, arguments);

    localMoment.locale(this.props.locale);

    return localMoment;
  }

  renderHeader () {
    return (
      <header key="header" className={classnames('rc-Calendar-header')}>
        { this.moment(this.props.date).format(this.props.yearHeaderFormat) }
      </header>
    );
  }

  getMonthRange () {
    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;

    return Array(size).fill(0).map((n, i) => focus.clone().add(n + i, 'months'));
  }

  render () {
    const { mods } = this.props;
    const monthMods = getModsByCompType('month', mods);
    let weekMods = getModsByCompType('week', mods);
    let dayMods = getModsByCompType('day', mods);

    return (
      <div>
        { this.renderHeader() }
        {
          this.getMonthRange().map((date, i) =>
           <Month key={ `month-${i}` }
                  date={ date }
                  weekNumbers={ this.props.weekNumbers }
                  mods={ monthMods }
                  week={ weekMods }
                  day={ dayMods } />
          )
        }
      </div>
    );
  }
}


================================================
FILE: src/Day.js
================================================
import React, { PropTypes } from 'react';
import classnames from 'classnames';

import { getMods } from './util';

const clsPrefix = 'rc-Day';

const renderHeader = (props) => {
  if (!props.dayHeader) {
    return null;
  }

  return (
    <header className={`${clsPrefix}-Day-header`}>
      { props.date.format(props.dayHeaderFormat) }
    </header>
  );
};

const renderAgenda = (props) => {
  if (!props.dayAgenda) {
    return null;
  }

  return (
    <div key="agenda" className={`${clsPrefix}-Day-agenda`}>
      { props.children }
    </div>
  );
};

const Day = (props) => {
  const clsPrefix = 'rc-Day';
  const { date, mods, outside } = props;
  const modifiers = getMods(mods, date, clsPrefix, 'day');

  let clsMods, events;

  if (modifiers) {
    clsMods = modifiers.clsMods;
    events = modifiers.events;
  }

  const clsDay = classnames(clsPrefix, { 'rc-Day--outside': outside }, clsMods);

  return (
    <div className={ clsDay } { ...events }>
      { renderHeader(props) }
      { date.format(props.dayFormat) }
      { renderAgenda(props) }
    </div>
  );
};

Day.propTypes = {
  date: React.PropTypes.object.isRequired,
  dayAgenda: React.PropTypes.bool,
  dayHeader: React.PropTypes.bool,
  dayHeaderFormat: React.PropTypes.string,
  dayFormat: React.PropTypes.string,
  mods: PropTypes.array
};

Day.defaultProps = {
  dayAgenda: false,
  dayHeader: false,
  dayHeaderFormat: 'MMM Do',
  dayFormat: 'D'
};

export default Day;


================================================
FILE: src/Month.js
================================================
import React, { PropTypes } from 'react';
import classnames from 'classnames';

import { monthEdges, weeksOfMonth, daysOfWeek } from './dateUtils';
import { getMods, getModsByCompType } from './util';
import Week from './Week';
import Day from './Day';

const clsPrefix = 'rc-Month';

const renderWeekHeader = (props) => {
  return (
    if (!props.weekdayNames) {
      return null;
    }
    
    <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 renderHeader = (props) => {
  if (props.renderHeader) {
    return props.renderHeader(props);
  }

  if (!props.monthNames) {
    return null;
  }

  return (
    <header key="header" className={ classnames(`${clsPrefix}-header`) }>
      { props.date.format(props.monthNameFormat) }
    </header>
  );
};

const Month = (props) => {
  const { date, weekNumbers } = props;
  const edges = monthEdges(date);

  let { mods, day, week } = props;
  let clsMods, events;

  if (!props.day) {
    day = getModsByCompType('day', mods);
  }

  if (!props.week) {
    week = getModsByCompType('week', mods);
  }

  if (!props.day || !props.week) { // this means we're probably just rendering a single month and need to filter our component types again.
    mods = getModsByCompType('month', mods);
  }

  let fWeekMods = week.filter((mod, j) => mod.date ? mod.date.isSame(date, 'month') : true);
  let fDayMods = day.filter((mod, k) => mod.date ? mod.date.isSame(date, 'month') : true);

  const modifiers = getMods(mods, date, clsPrefix, 'month');

  if (modifiers) {
    clsMods = modifiers.clsMods;
    events = modifiers.events;
  }

  return (
    <div className={ classnames(clsPrefix, clsMods) } { ...events }>
      { renderHeader(props) }
      { renderWeekHeader(props) }
      {
        weeksOfMonth(props.date).map((wDate, i) =>
          <Week key={ `week-${i}` }
                date={ wDate }
                edges={ edges }
                weekNumbers={ weekNumbers }
                mods={ fWeekMods }
                day={ fDayMods } />
        )
      }
    </div>
  );
};

Month.propTypes = {
  monthNames: PropTypes.bool,
  monthNameFormat: PropTypes.string,
  weekdayNames: PropTypes.bool,
  weekdayFormat: PropTypes.string,
  mod: PropTypes.object
};

Month.defaultProps = {
  monthNames: true,
  monthNameFormat: 'MMMM YYYY',
  weekdayNames: true,
  weekdayFormat: 'dd'
};

export default Month;


================================================
FILE: src/Week.js
================================================
import React, { PropTypes } from 'react';
import classnames from 'classnames';

import { getMods, getModsByCompType } from './util';
import { daysOfWeek } from './dateUtils';
import Day from './Day';

const clsPrefix = 'rc-Week';

const makeWeekNumber = (props) => {
  if (!props.weekNumbers) {
    return null;
  }

  return (
    <div key="weekNumber" className={ classnames(`${clsPrefix}-number`) }>
      { 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;
  let clsMods, events, week, { day } = props;

  week = getModsByCompType('week', mods);
  const modifiers = getMods(week, date, clsPrefix, 'week');

  if (modifiers) {
    clsMods = modifiers.clsMods;
    events = modifiers.events;
  }

  if (!props.day) {
    day = getModsByCompType('day', mods);
  }

  return (
    <div key="days" className={ classnames(clsPrefix, clsMods) } { ...events }>
      { renderWeekHeader(props) }
      { makeWeekNumber(props) }
      <div className={ classnames(`${clsPrefix}-days`) }>
        {
          daysOfWeek(props.date).map((date, i) => {
            let outside;

            if (props.edges) {
              outside = Boolean(props.edges.find((edge, j) => edge.isSame(date, 'month', 'week', 'year')));
            }

            return <Day outside={ !!outside } key={ `day-${i}` } date={ date } mods={ day } />
          })
        }
      </div>
    </div>
  );
};

Week.propTypes = {
  weekHeader: PropTypes.bool,
  weekNumbers: PropTypes.bool,
  weekNumberFormat: PropTypes.string,
  weekdayFormat: PropTypes.string,
};

Week.defaultProps = {
  weekHeader: false,
  weekNumbers: false,
  weekNumberFormat: 'w',
  weekdayFormat: 'dd',
};

export default Week;


================================================
FILE: src/dateUtils.js
================================================
'use strict';

import moment from 'moment';

/** Returns moment objects for first day of each week of the month.
 *  Can return moments from previous month if week start is in them.
 *  @param {string|Date|moment} month any date in a month to create weeks for
 */
export function weeksOfMonth (month) {
  const thisMonth = month.month();
  const weeks = [];

  month = moment(month).startOf('month').startOf('week');

  do {
    weeks.push(month.clone());
    month.add(1, 'week');
  } while (month.month() === thisMonth)

  return weeks;
}

/** Returns moments for each day that is not in the month, but is part of
 *  weeks that are.
 *  Week contents is locale aware.
 *  @param {string|Date|moment} moment any date in the target month
 */
export function monthEdges (month) {
  const start = moment(month).startOf('month').startOf('week');
  const end = moment(month).endOf('month').endOf('week');

  const result = [];

  while (start.month() !== month.month()) {
    result.push(start.clone());
    start.add(1, 'day');
  }

  while (end.month() !== month.month()) {
    result.push(end.clone());
    end.subtract(1, 'day');
  }

  return result;
}

/** Returns moment objects for each day of the week.
 *  Ordering is locale aware.
 *  @param {string|Date|moment} week any date in a week to create days for
 */
export function daysOfWeek (week) {
  week = moment(week).startOf('week');

  return Array(7).fill(0).map((n, i) => week.clone().add(n + i, 'day'));
}


================================================
FILE: src/util.js
================================================
const bindEvents = (events, date) => {
  const boundEvents = {};

  if (!events) return null;

  Object.keys(events)
    .forEach((key) => boundEvents[key] = events[key].bind(null, date));

  return boundEvents;
}

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,
    classNames: [],
    events: {}
  };

  mods.filter((mod) => mod.date ? mod.date.isSame(date, type) : null)
    .forEach((_mod) => {
      modifier.date = _mod.date;
      modifier.events = _mod.events;
      if (Array.isArray(_mod.classNames)) {
        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)

export const getModsByCompType = (componentType, mods) => {
  if (!Array.isArray(mods)) {
    return [];
  }

  return mods.filter(({ component }) => component.indexOf(componentType.toLowerCase()) > -1)
};

export const getMods = (mods, date, clsPrefix, type) => {
  if (!mods) {
    return null;
  }

  const events = {};
  const exploded = explodeDateRanges(getModsWithDateRange(mods));
  const mod = getModByDate([ ...mods, ...exploded ], date, type);
  const clsMods = getClsMods(clsPrefix, mod) || [];
  const clsCompMods = getClsMods(clsPrefix, getModsWithoutDate(mods)) || [];

  getModsWithoutDate(mods)
    .forEach((mod) => Object.assign(events, bindEvents(mod.events, date)));

  if (mod && mod.events) {
    Object.assign(events, bindEvents(mod.events, date));
  }

  return { clsMods: [ ...clsMods, ...clsCompMods ], events };
};


================================================
FILE: test/Calendar.spec.js
================================================
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';

import moment from 'moment';
import Calendar from '../src/Calendar';

describe('<Calendar />', () => {
  let wrapper;
  before(() => {
    const date = moment().startOf('year');

    wrapper = shallow(<Calendar date={ date }
               weekNumbers={ true }
               startDate={ date }
               endDate={ date.clone().endOf('year') }
               mods={
                 [
                   {
                     date: moment(),
                     classNames: [ 'current' ],
                     component: [ 'day', 'month', 'week' ]
                   },
                   {
                     date: moment().add(3, 'days'),
                     classNames: [ 'event' ],
                     component: [ 'day' ]
                   },
                   {
                     date: moment().add(4, 'days'),
                     classNames: [ 'event', 'warning' ],
                     component: [ 'day' ],
                     events: {
                       onClick: (date, e) => alert(`${date.format('dddd')}'s event!`)
                     }
                   },
                   {
                     date: moment().add(5, 'days'),
                     classNames: [ 'event' ],
                     component: [ 'day' ]
                   },
                   {
                     component: 'day',
                     events: {
                       onClick: (date, e) => alert(date.format())
                     }
                   }
                 ]
               } />);
  });

  it('should render a year', () => {
    expect(wrapper.find('Month')).to.have.length(12);
  });
});


================================================
FILE: test/Day.spec.js
================================================
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';

import moment from 'moment';
import Day from '../src/Day';

describe('<Day />', () => {
  let wrapper;
  before(() => {
    wrapper = shallow(<Day date={ moment() } />);
  });

  it('should render a single <Day />', () => {
    expect(wrapper.find('.rc-Day')).to.have.length(1);
  });
});


================================================
FILE: test/Month.spec.js
================================================
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';

import moment from 'moment';
import Month from '../src/Month';

describe('<Month />', () => {
  let wrapper;
  before(() => {
    wrapper = shallow(<Month date={ moment() } />);
  });

  it('should render 4 or 5 weeks depending on the month', () => {
    expect(wrapper.find('Week').length).to.be.gte(4);
  });
});


================================================
FILE: test/Week.spec.js
================================================
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';

import moment from 'moment';
import Week from '../src/Week';

describe('<Week />', () => {
  let wrapper;
  before(() => {
    wrapper = shallow(<Week date={ moment() } />);
  });

  it('should render 7 <Day />\'s', () => {
    expect(wrapper.find('Day')).to.have.length(7);
  });
});


================================================
FILE: test/mocha.opts
================================================
--compilers js:babel-core/register
--recursive


================================================
FILE: test/utils/document.js
================================================
if (typeof document === 'undefined') {
  global.document = {};
}


================================================
FILE: webpack.config.js
================================================
var webpack = require('webpack');

var config = {
  entry: './react-calendar.js',
  output: {
    path: 'dist',
    filename: 'react-calendar.js',
    library: 'ReactCalendar',
    libraryTarget: 'umd'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0',
        exclude: [ /node_modules/, /.less$/, 'demo.js' ]
      },
      // For sample theme
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
      { test: /\.css/, loader: 'style-loader!css-loader' },
      { test: /\.woff$/, loader: 'file-loader' },
      { test: /\.ttf$/, loader: 'file-loader' },
      { test: /\.eot$/, loader: 'file-loader' },
      { test: /\.svg$/, loader: 'file-loader' }
    ]
  },
  externals: {
    react: {
      root: 'React',
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react'
    },
    moment: 'moment'
  },
  plugins: []
};

if (process.env.REACT_CALENDAR_WEBPACK === 'umd_min') {
  config.plugins = [
    new webpack.optimize.UglifyJsPlugin()
  ];
  config.output.path = 'build';
  config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');
}

if (process.env.REACT_CALENDAR_WEBPACK === 'umd') {
  config.output.path = 'build';
}

if (process.env.REACT_CALENDAR_WEBPACK === 'server') {
  config.module.loaders = [
    {
      test: /\.js$/,
      loader: 'react-hot!babel?presets[]=react,presets[]=es2015,presets[]=stage-0',
    },
    { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
    { test: /\.css/, loader: 'style-loader!css-loader' },
    { test: /\.woff$/, loader: 'file-loader' },
    { test: /\.ttf$/, loader: 'file-loader' },
    { test: /\.eot$/, loader: 'file-loader' },
    { test: /\.svg$/, loader: 'file-loader' }
  ];
  config.plugins = [
    new webpack.NoErrorsPlugin()
  ];
}

module.exports = config;