Socket
Socket
Sign inDemoInstall

react-calendar

Package Overview
Dependencies
Maintainers
2
Versions
87
Alerts
File Explorer

Advanced tools

npm Scripts
License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.4.0 to 1.0.0

.babelrc
.editorconfig
.eslintignore
.eslintrc
src/util.js
test/Calendar.spec.js
test/Day.spec.js
test/mocha.opts
test/Month.spec.js
test/utils/document.js
test/Week.spec.js

67

demo.js

@@ -1,11 +0,12 @@

/** @jsx React.DOM */
"use strict";
import moment from 'moment';
import React from 'react';
import ReactDOM from 'react-dom';
var moment = require('moment');
var React = require('react');
var {Calendar, Month, Week, Day} = require('./react-calendar');
import Calendar from './src/Calendar';
import Week from './src/Week';
import Month from './src/Month';
require('./less/bootstrap-theme.less');
var PagingCalendar = React.createClass({
const PagingCalendar = React.createClass({
getInitialState: function () {

@@ -31,6 +32,2 @@ return {

handleClick: function (scope, m, e) {
alert("handleClick: " + scope + " " + m.format());
},
render: function () {

@@ -45,13 +42,39 @@ return (

</a>
<Calendar firstMonth={1}
date={this.state.date}
weekNumbers={true}
size={12}>
<Day onClick={this.handleClick} />
<Month date={moment()}
modifiers={{current: true}}
onClick={this.handleClick} />
<Day date={moment()}
modifiers={{current: true}} />
</Calendar>
<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' ]
},
{
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())
}
}
]
} />
</div>

@@ -62,5 +85,5 @@ );

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

1226

dist/react-calendar.js
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("lodash"), require("react"), require("moment"));
module.exports = factory(require("react"), require("moment"));
else if(typeof define === 'function' && define.amd)
define(["lodash", "react", "moment"], factory);
define(["react", "moment"], factory);
else if(typeof exports === 'object')
exports["ReactCalendar"] = factory(require("lodash"), require("react"), require("moment"));
exports["ReactCalendar"] = factory(require("react"), require("moment"));
else
root["ReactCalendar"] = factory(root["_"], root["React"], root["moment"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__) {
root["ReactCalendar"] = factory(root["React"], root["moment"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
return /******/ (function(modules) { // webpackBootstrap

@@ -57,280 +57,204 @@ /******/ // The module cache

"use strict";
'use strict';
module.exports = {
Calendar: __webpack_require__(1),
Month: __webpack_require__(2),
Week: __webpack_require__(3),
Day: __webpack_require__(4),
dateUtils: __webpack_require__(5)
};
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Calendar = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
Object.defineProperty(exports, 'Calendar', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Calendar).default;
}
});
"use strict";
var _Month = __webpack_require__(6);
var _ = __webpack_require__(6);
var React = __webpack_require__(7);
var moment = __webpack_require__(8);
Object.defineProperty(exports, 'Month', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Month).default;
}
});
var CalendarBaseMixin = __webpack_require__(9);
var propTypes = __webpack_require__(10);
var ClassNameMixin = __webpack_require__(11);
var Month = React.createFactory(__webpack_require__(2));
var _Week = __webpack_require__(8);
var Calendar = React.createClass({displayName: "Calendar",
mixins: [
CalendarBaseMixin,
propTypes.Mixin(false,
'Calendar',
'Year',
'Month',
'Week',
'Day'
),
ClassNameMixin
],
Object.defineProperty(exports, 'Week', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Week).default;
}
});
makeHeader: function (classes) {
if (this.getPropOrCtx('yearHeader')) {
return (
React.createElement("header", {key: "header",
className: classes.descendant('header')},
this.props.date.format(this.getPropOrCtx('yearHeaderFormat'))
)
);
} else {
return null;
}
},
var _Day = __webpack_require__(9);
getChildContext:function(){
return this.getCalendarCtx();
},
Object.defineProperty(exports, 'Day', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Day).default;
}
});
getMonthRange: function () {
var range, left, right;
var focus = this.moment(this.props.date).startOf('month');
var size = this.getPropOrCtx('size');
var firstMonth = this.getPropOrCtx('firstMonth') - 1;
var _util = __webpack_require__(5);
if (_.isNumber(firstMonth) && size === 12) {
var focusMonth = focus.month();
if (focusMonth < firstMonth) {
left = focusMonth + (12 - firstMonth);
} else {
left = focusMonth - firstMonth;
}
left = -left;
right = size + left;
} else if (firstMonth === 'current') {
left = 0;
right = size;
} else {
var half = size / 2;
left = -Math.floor(half);
right = Math.ceil(half);
}
return _.range(left, right).map(function(offset) {
return focus.clone().add(offset, 'months');
});
},
Object.defineProperty(exports, 'util', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_util).default;
}
});
render: function () {
var classes = this.className({
modifiers: this.props.modifiers,
classes: this.props.classes
});
var childrenMap = this.splitChildrenByDate(Month);
var months = this.getMonthRange().map(
this.makeDirectChild.bind(this, childrenMap, Month)
);
var _dateUtils = __webpack_require__(7);
var props = _.assign({
className: classes()
}, this.getEventHandlers());
return React.DOM.div(props, [
this.makeHeader(classes),
months
]);
Object.defineProperty(exports, 'dateUtils', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_dateUtils).default;
}
});
module.exports = Calendar;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ },
/* 2 */
/* 1 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
'use strict';
var _ = __webpack_require__(6);
var React = __webpack_require__(7);
Object.defineProperty(exports, "__esModule", {
value: true
});
var dateUtils = __webpack_require__(5);
var CalendarBaseMixin = __webpack_require__(9);
var propTypes = __webpack_require__(10);
var ClassNameMixin = __webpack_require__(11);
var Week = React.createFactory(__webpack_require__(3));
var Day = React.createFactory(__webpack_require__(4));
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 Month = React.createClass({displayName: "Month",
mixins: [
CalendarBaseMixin,
propTypes.Mixin(true,
'Month',
'Week',
'Day'
),
ClassNameMixin
],
var _react = __webpack_require__(2);
createMonthEdge: function (date, i) {
return Day({
key: 'edge-' + i,
date: date,
modifiers: {outside: true}
});
},
var _react2 = _interopRequireDefault(_react);
makeHeader: function (classes) {
if (this.getPropOrCtx('monthNames')) {
return (
React.createElement("header", {key: "header",
className: classes()},
this.props.date.format(this.getPropOrCtx('monthNameFormat'))
)
);
} else {
return null;
}
},
var _moment2 = __webpack_require__(3);
makeWeekHeader: function (classes) {
if (this.getPropOrCtx('weekdayNames')) {
var week = dateUtils.daysOfWeek(this.props.date);
var weekEls = week.map(function(w, i) {
return (
React.createElement("div", {key: i,
className: classes.descendant('weekday')()},
w.format(this.getPropOrCtx('weekdayFormat'))
)
);
}.bind(this));
return (
React.createElement("header", {key: "weekdays",
className: classes()},
weekEls
)
);
} else {
return null;
}
},
var _moment3 = _interopRequireDefault(_moment2);
getChildContext:function(){
return this.getCalendarCtx();
},
var _classnames = __webpack_require__(4);
render: function () {
var classes = this.className({
modifiers: this.props.modifiers,
classes: this.props.classes
});
var _classnames2 = _interopRequireDefault(_classnames);
var childrenMap = this.splitChildrenByDate(
Week,
dateUtils.monthEdges(this.props.date).map(this.createMonthEdge)
);
var weeks = dateUtils.weeksOfMonth(this.props.date).map(
this.makeDirectChild.bind(this, childrenMap, Week)
);
var _util = __webpack_require__(5);
var props = _.assign({
className: classes()
}, this.getEventHandlers());
var _Month = __webpack_require__(6);
return React.DOM.div(props, [
this.makeHeader(classes.descendant('header')),
this.makeWeekHeader(classes.descendant('weekdays')),
weeks
]);
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));
}
});
module.exports = Month;
_createClass(Calendar, [{
key: 'moment',
value: function moment() {
var localMoment = _moment3.default.apply(null, arguments);
localMoment.locale(this.props.locale);
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
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).startOf('month');
var start = this.moment(this.props.startDate);
var end = this.moment(this.props.endDate);
var size = end.diff(start, 'month') + 1;
"use strict";
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 _ = __webpack_require__(6);
var React = __webpack_require__(7);
var mods = this.props.mods;
var dateUtils = __webpack_require__(5);
var CalendarBaseMixin = __webpack_require__(9);
var propTypes = __webpack_require__(10);
var ClassNameMixin = __webpack_require__(11);
var Day = React.createFactory(__webpack_require__(4));
var monthMods = (0, _util.getModsByCompType)('month', mods);
var weekMods = (0, _util.getModsByCompType)('week', mods);
var dayMods = (0, _util.getModsByCompType)('day', mods);
var Week = React.createClass({displayName: "Week",
mixins: [
CalendarBaseMixin,
propTypes.Mixin(true,
'Week',
'Day'
),
ClassNameMixin
],
return _react2.default.createElement(
'div',
null,
this.renderHeader(),
this.getMonthRange().map(function (date, i) {
var fWeekMods = weekMods.filter(function (mod, j) {
return mod.date ? mod.date.get('month') === i : true;
});
var fDayMods = dayMods.filter(function (mod, k) {
return mod.date ? mod.date.get('month') === i : true;
});
makeWeekNumber: function (classes) {
if (this.getPropOrCtx('weekNumbers')) {
return (
React.createElement("div", {key: "weekNumber",
className: classes.descendant('number')()},
this.props.date.format(this.getPropOrCtx('weekNumberFormat'))
)
return _react2.default.createElement(_Month2.default, { key: 'month-' + i,
date: date,
weekNumbers: _this2.props.weekNumbers,
mods: monthMods,
week: fWeekMods,
day: fDayMods });
})
);
} else {
return null;
}
},
getChildContext:function(){
return this.getCalendarCtx();
},
}]);
render: function () {
var classes = this.className({
modifiers: this.props.modifiers,
classes: this.props.classes
});
return Calendar;
}(_react.Component);
var childrenMap = this.splitChildrenByDate(Day);
var days = dateUtils.daysOfWeek(this.props.date).map(
this.makeDirectChild.bind(this, childrenMap, Day)
);
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;
var props = _.assign({
className: classes()
}, this.getEventHandlers());
/***/ },
/* 2 */
/***/ function(module, exports) {
return React.DOM.div(props, [
this.makeWeekNumber(classes),
React.createElement("div", {key: "days", className: classes.descendant('days')},
days
)
]);
}
});
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
module.exports = Week;
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;

@@ -341,352 +265,226 @@ /***/ },

"use strict";
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 */
var _ = __webpack_require__(6);
var React = __webpack_require__(7);
(function () {
'use strict';
var propTypes = __webpack_require__(10);
var ClassNameMixin = __webpack_require__(11);
var hasOwn = {}.hasOwnProperty;
var Day = React.createClass({displayName: "Day",
mixins: [propTypes.Mixin(true,
'Day'
), ClassNameMixin],
function classNames () {
var classes = [];
makeHeader: function (classes) {
if (this.getPropOrCtx('dayHeader')) {
return (
React.createElement("header", {className: classes()},
this.props.date.format(this.getPropOrCtx('dayHeaderFormat'))
)
);
} else {
return null;
}
},
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
makeBody: function (classes) {
return (
React.createElement("span", {key: "body",
className: classes()},
this.props.date.format(this.getPropOrCtx('dayFormat'))
)
);
},
var argType = typeof arg;
makeAgenda: function (classes) {
if (this.getPropOrCtx('dayAgenda')) {
return (
React.createElement("div", {key: "agenda",
className: classes()},
this.props.children
)
);
} else {
return null;
}
},
getChildContext:function(){
return this.getCalendarCtx();
},
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);
}
}
}
}
render: function () {
var classes = this.className({
modifiers: this.props.modifiers,
classes: this.props.classes
});
return classes.join(' ');
}
var props = _.assign({
className: classes()
}, this.getEventHandlers());
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;
}
}());
return React.DOM.div(props, [
this.makeHeader(classes.descendant('header')),
this.makeBody(classes.descendant('body')),
this.makeAgenda(classes.descendant('agenda'))
]);
}
});
module.exports = Day;
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
/***/ function(module, exports) {
"use strict";
var _ = __webpack_require__(6);
var moment = __webpack_require__(8);
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = {
/** 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
*/
weeksOfMonth: function (month) {
var thisMonth = month.month();
var weeks = [];
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); } }
month = moment(month).startOf('month').startOf('week');
var bindEvents = function bindEvents(events, date) {
var boundEvents = {};
do {
weeks.push(month.clone());
month.add(1, 'week');
} while (month.month() === thisMonth)
Object.keys(events).forEach(function (key) {
return boundEvents[key] = events[key].bind(null, date);
});
return weeks;
},
return boundEvents;
};
/** 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
*/
monthEdges: function (month) {
var start = moment(month).startOf('month').startOf('week');
var end = moment(month).endOf('month').endOf('week');
var getClsMods = function getClsMods(clsPrefix, mods) {
return !mods || !mods.classNames ? null : mods.classNames.map(function (cls) {
return clsPrefix + "--" + cls;
});
};
var result = [];
var getModByDate = function getModByDate(mods, date, type) {
return mods.find(function (mod) {
return mod.date ? mod.date.isSame(date, type) : null;
});
};
while (start.month() !== month.month()) {
result.push(start.clone());
start.add(1, 'day');
}
var getModsWithoutDate = function getModsWithoutDate(mods) {
return mods.filter(function (mod) {
return !mod.date;
});
};
while (end.month() !== month.month()) {
result.push(end.clone());
end.subtract(1, 'day');
}
var getModsByCompType = exports.getModsByCompType = function getModsByCompType(componentType, mods) {
return mods.filter(function (_ref) {
var component = _ref.component;
return component.indexOf(componentType.toLowerCase()) > -1;
});
};
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
*/
daysOfWeek: function (week) {
week = moment(week).startOf('week');
return _.range(0, 7).map(function(day) {
return week.clone().add(day, 'day');
});
var getMods = exports.getMods = function getMods(mods, date, clsPrefix, type) {
if (!mods) {
return null;
}
};
var events = {};
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
var mod = getModByDate(mods, date, type);
var clsMods = getClsMods(clsPrefix, mod) || [];
var clsCompMods = getClsMods(clsPrefix, getModsWithoutDate(mods)) || [];
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
getModsWithoutDate(mods).forEach(function (mod) {
return Object.assign(events, bindEvents(mod.events, date));
});
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
if (mod && mod.events) {
Object.assign(events, bindEvents(mod.events, date));
}
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
return { clsMods: [].concat(_toConsumableArray(clsMods), _toConsumableArray(clsCompMods)), events: events };
};
/***/ },
/* 8 */
/* 6 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
'use strict';
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", {
value: true
});
"use strict";
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 _ = __webpack_require__(6);
var React = __webpack_require__(7);
var moment = __webpack_require__(8);
var _react = __webpack_require__(2);
var dateToComponentMap = {
Month: 'YYYY-MM',
Week: 'gggg-ww',
Day: 'YYYY-DDDD'
};
var _react2 = _interopRequireDefault(_react);
var CalendarBaseMixin = {
moment: function () {for (var args=[],$__0=0,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]);
var localMoment = moment.apply(this, args);
localMoment.locale(this.getPropOrCtx('locale'));
return localMoment;
},
var _classnames = __webpack_require__(4);
splitChildrenByDate: function (comp, children) {
var compType = comp().type;
if (!children) {
children = [];
}
React.Children.forEach(this.props.children, function(child) {
children.push(child);
});
var _classnames2 = _interopRequireDefault(_classnames);
var result = {
thisGlobals: [],
nextGlobals: []
};
var dateString = dateToComponentMap[compType.displayName];
children.forEach(function(child) {
if (child.props.date) {
var childDate = child.props.date.format(dateString);
var existing = result[childDate] || {
thisLevel: [],
nextLevels: []
};
if (child.type === compType) {
existing.thisLevel.push(child);
} else {
existing.nextLevels.push(child);
};
result[childDate] = existing;
} else if (child.type === compType) {
result.thisGlobals.push(child);
} else {
result.nextGlobals.push(child);
}
});
var _dateUtils = __webpack_require__(7);
return result;
},
var _util = __webpack_require__(5);
makeDirectChild: function (childrenMap, comp, date, key) {
var dateString = date.format(dateToComponentMap[comp().type.displayName]);
var props = {
key: key,
date: date
};
var _Week = __webpack_require__(8);
var thisChildren = childrenMap[dateString] || {};
var thisLevel = childrenMap.thisGlobals.concat(
thisChildren.thisLevel || []
);
var children = childrenMap.nextGlobals.concat(
thisChildren.nextLevels || []
);
var _Week2 = _interopRequireDefault(_Week);
thisLevel.forEach(function(child) {
React.Children.forEach(child.props.children, function(childChild) {
children.push(childChild);
});
var mergedProps = ['modifiers', 'classes'].reduce(function(merged, propKey) {
if (props.hasOwnProperty(propKey) &&
child.props.hasOwnProperty(propKey)) {
merged[propKey] = _.assign({},
props[propKey],
child.props[propKey]
);
}
return merged;
}, {});
props = _.assign({}, child.props, props, mergedProps);
});
var _Day = __webpack_require__(9);
var _Day2 = _interopRequireDefault(_Day);
return comp(props, children);
}
};
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = CalendarBaseMixin;
var clsPrefix = 'rc-Month';
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var _ = __webpack_require__(6);
var React = __webpack_require__(7);
var moment = __webpack_require__(8);
var momentOrString = function (props, propName, component) {
var prop = props[propName];
var valid = (
(prop === undefined) ||
moment.isMoment(prop) ||
(prop instanceof Date) ||
(prop instanceof String)
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)
);
})
);
if (!valid) {
return new Error(
"Invalid prop " + propName + " passed to " + component
);
} else {
return true;
}
};
var momentOrStringRequired = function (props, propName, component) {
if (props[propName] === undefined) {
return new Error (
propName + " is required in " + component
);
} else {
return true;
var renderHeader = function renderHeader(props) {
if (!props.monthNames) {
return null;
}
};
module.exports = {
types: {},
defaults: {}
return _react2.default.createElement(
'header',
{ key: 'header', className: (0, _classnames2.default)(clsPrefix + '-header') },
props.date.format(props.monthNameFormat)
);
};
module.exports.types.Generic = {
classNamespace: React.PropTypes.string,
classNameOptions: React.PropTypes.object,
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.arrayOf(React.PropTypes.string)
]),
modifiers: React.PropTypes.object,
classes: React.PropTypes.object,
moment: React.PropTypes.instanceOf(moment),
date: momentOrStringRequired
};
var Month = function Month(props) {
var date = props.date;
var day = props.day;
var mods = props.mods;
var week = props.week;
var weekNumbers = props.weekNumbers;
module.exports.defaults.Generic = {
classNamespace: 'rc',
locale: 'en',
modifiers: {},
classes: {}
};
var modifiers = (0, _util.getMods)(mods, date, clsPrefix, 'month');
var edges = (0, _dateUtils.monthEdges)(date);
module.exports.types.Calendar = {
minDate: momentOrString,
maxDate: momentOrString,
size: React.PropTypes.number,
firstMonth: React.PropTypes.oneOf([
'center',
'current',
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
])
};
var clsMods = void 0,
events = void 0;
module.exports.defaults.Calendar = {
size: 12,
firstMonth: 'center'
};
if (modifiers) {
clsMods = modifiers.clsMods;
events = modifiers.events;
}
module.exports.types.Year = {
yearHeader: React.PropTypes.bool,
yearHeaderFormat: React.PropTypes.string
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: week,
day: day });
})
);
};
module.exports.defaults.Year = {
yearHeader: true,
yearHeaderFormat: 'YYYY'
Month.propTypes = {
monthNames: _react.PropTypes.bool,
monthNameFormat: _react.PropTypes.string,
weekdayNames: _react.PropTypes.bool,
weekdayFormat: _react.PropTypes.string,
mod: _react.PropTypes.object
};
module.exports.types.Month = {
monthNames: React.PropTypes.bool,
monthNameFormat: React.PropTypes.string,
weekdayNames: React.PropTypes.bool,
weekdayFormat: React.PropTypes.string
};
module.exports.defaults.Month = {
Month.defaultProps = {
monthNames: true,

@@ -698,234 +496,266 @@ monthNameFormat: 'MMMM YYYY',

module.exports.types.Week = {
weekNumbers: React.PropTypes.bool,
weekNumberFormat: React.PropTypes.string
};
exports.default = Month;
module.exports.defaults.Week = {
weekNumbers: false,
weekNumberFormat: 'w'
};
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
module.exports.types.Day = {
dayAgenda: React.PropTypes.bool,
dayHeader: React.PropTypes.bool,
dayHeaderFormat: React.PropTypes.string,
dayFormat: React.PropTypes.string
};
'use strict';
module.exports.defaults.Day = {
dayAgenda: false,
dayHeader: false,
dayHeaderFormat: 'MMM Do',
dayFormat: 'D'
};
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.weeksOfMonth = weeksOfMonth;
exports.monthEdges = monthEdges;
exports.daysOfWeek = daysOfWeek;
var eventList = [
'onClick', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter',
'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop',
'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut',
'onMouseOver', 'onMouseUp', 'onTouchCancel', 'onTouchEnd', 'onTouchMove',
'onTouchStart'
];
var _moment = __webpack_require__(3);
['Day', 'Week', 'Month', 'Year'].forEach(function (item) {
eventList.forEach(function (event) {
module.exports.types[item][event] = React.PropTypes.func;
});
});
var _moment2 = _interopRequireDefault(_moment);
module.exports.Mixin = function (addContext ) {for (var types=[],$__0=1,$__1=arguments.length;$__0<$__1;$__0++) types.push(arguments[$__0]);
types.unshift('Generic');
var propTypes = {};
var defaultProps = {};
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
types.forEach(function(type) {
_.assign(propTypes, module.exports.types[type]);
_.assign(defaultProps, module.exports.defaults[type]);
});
/** 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 = [];
var result = {
propTypes: propTypes,
childContextTypes: propTypes
};
month = (0, _moment2.default)(month).startOf('month').startOf('week');
if (addContext) {
result.contextTypes = propTypes;
}
do {
weeks.push(month.clone());
month.add(1, 'week');
} while (month.month() === thisMonth);
result.getPropOrCtx = function (val) {
if (this.props[val] !== undefined) {
return this.props[val];
} else if (this.context[val] !== undefined) {
return this.context[val];
} else {
return defaultProps[val];
}
};
return weeks;
}
result.getCalendarCtx = function () {
return _.pick(this.props, _.keys(propTypes));
};
/** 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');
result.getEventHandlers = function () {
return _.mapValues(_.pick(this.props, function(value, key) {
return _.contains(eventList, key);
}), function(cb) {
return cb.bind(
null,
this.constructor.displayName,
this.props.date.clone()
);
}.bind(this));
};
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');
});
}
/***/ },
/* 11 */
/* 8 */
/***/ function(module, exports, __webpack_require__) {
var _ = __webpack_require__(6);
var React = __webpack_require__(7);
'use strict';
function nonEmptyString (str) {
return _.isString(str) && str.length > 0;
}
Object.defineProperty(exports, "__esModule", {
value: true
});
function getActiveClasses (classNames) {
return Object.keys(classNames).filter(function (className) {
return classNames[className];
});
};
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 ClassNamer = function (options) {
var fn = function () {
return fn.toString();
};
var _react = __webpack_require__(2);
fn.options = _.defaults(options, {
namespace: '',
parents: [],
className: '',
modifiers: {},
classes: {},
namespaceSeparator: '-',
descendantSeparator: '-',
modifierSeparator: '--'
});
var _react2 = _interopRequireDefault(_react);
fn.prototype = Object.create(Function.prototype);
_.mixin(fn, ClassNamer.prototype);
var _classnames = __webpack_require__(4);
return fn;
};
var _classnames2 = _interopRequireDefault(_classnames);
ClassNamer.prototype.getBaseClass = function () {
if (!nonEmptyString(this.options.className)) {
return '';
};
var _util = __webpack_require__(5);
var classNames = [];
if (nonEmptyString(this.options.namespace)) {
classNames.push(this.options.namespace);
}
var _dateUtils = __webpack_require__(7);
if (this.options.parents.length > 0) {
classNames.push(this.options.parents[0]);
classNames = [classNames.join(this.options.namespaceSeparator)];
classNames = classNames.concat(this.options.parents.slice(1));
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;
}
classNames.push(this.options.className);
return classNames.join(this.options.descendantSeparator);
return _react2.default.createElement(
'div',
{ key: 'weekNumber',
className: (0, _classnames2.default)(clsPrefix + '-number') },
props.date.format(props.weekNumberFormat)
);
};
ClassNamer.prototype.getModifierClasses = function () {
var baseClass = this.getBaseClass();
var modifiers = getActiveClasses(this.options.modifiers);
var Week = function Week(props) {
var mods = props.mods;
var date = props.date;
if (nonEmptyString(baseClass)) {
return modifiers.map(function(modifier) {
return [baseClass, modifier].join(this.options.modifierSeparator);
}.bind(this));
} else {
return modifiers;
var modifiers = (0, _util.getMods)(mods, date, clsPrefix, 'week');
var clsMods = void 0,
events = void 0;
if (modifiers) {
clsMods = modifiers.clsMods;
events = modifiers.events;
}
return _react2.default.createElement(
'div',
_extends({ key: 'days', className: (0, _classnames2.default)(clsPrefix, clsMods) }, events),
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: props.day });
})
)
);
};
ClassNamer.prototype.getOtherClasses = function () {
return getActiveClasses(this.options.classes);
Week.propTypes = {
weekNumbers: _react.PropTypes.bool,
weekNumberFormat: _react.PropTypes.string
};
ClassNamer.prototype.getAllClasses = function () {
return Array.prototype.concat(
[this.getBaseClass()],
this.getModifierClasses(),
this.getOtherClasses()
);
Week.defaultProps = {
weekNumbers: false,
weekNumberFormat: 'w'
};
ClassNamer.prototype.descendant = function (descendant, modifiers, classes) {
if (!_.isArray(descendant)) {
descendant = [descendant];
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;
}
var options = _.assign({}, this.options, {
parents: Array.prototype.concat(
this.options.parents,
nonEmptyString(this.options.className) ? [this.options.className] : [],
descendant.slice(0, -1)
),
className: descendant.slice(-1)[0],
modifiers: modifiers,
classes: classes
});
return new ClassNamer(options);
return _react2.default.createElement(
'header',
{ className: clsPrefix + '-Day-header' },
props.date.format(props.dayHeaderFormat)
);
};
ClassNamer.prototype.descendants = function () {for (var descendants=[],$__0=0,$__1=arguments.length;$__0<$__1;$__0++) descendants.push(arguments[$__0]);
return this.descendant(descendants, {}, {});
};
var renderAgenda = function renderAgenda(props) {
if (!props.dayAgenda) {
return null;
}
ClassNamer.prototype.toString = function () {
return this.getAllClasses().join(' ');
return _react2.default.createElement(
'div',
{ key: 'agenda',
className: clsPrefix + '-Day-agenda' },
props.children
);
};
var ClassNameMixin = {
propTypes: {
classNamespace: React.PropTypes.string,
className: React.PropTypes.oneOfType(
React.PropTypes.string,
React.PropTypes.arrayOf(React.PropTypes.string)
),
classNameOptions: React.PropTypes.object
},
var Day = function Day(props) {
var clsPrefix = 'rc-Day';
var date = props.date;
var mods = props.mods;
var outside = props.outside;
contextTypes: {
classNamespace: React.PropTypes.string,
classNameOptions: React.PropTypes.object
},
var modifiers = (0, _util.getMods)(mods, date, clsPrefix, 'day');
getNamespace: function () {
return this.getPropOrCtx('classNamespace');
},
var clsMods = void 0,
events = void 0;
getClassNameOptions: function () {
return this.getPropOrCtx('classNameOptions');
},
if (modifiers) {
clsMods = modifiers.clsMods;
events = modifiers.events;
}
className: function (options) {
return new ClassNamer(_.assign({
namespace: this.getNamespace(),
className: this.props.className || this.constructor.displayName
}, this.getClassNameOptions(), options));
}
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)
);
};
module.exports = ClassNameMixin;
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;
/***/ }

@@ -932,0 +762,0 @@ /******/ ])

43

package.json
{
"name": "react-calendar",
"version": "0.4.0",
"version": "1.0.0",
"author": "Mikhail <freiksenet@gmail.com> Novikov",

@@ -18,28 +18,47 @@ "description": "Calendar component for ReactJS",

"dependencies": {
"lodash": "^2.4.1"
"classnames": "^2.2.3"
},
"peerDependencies": {
"react": "^0.13.x",
"react": "^0.14.x",
"react-dom": "^0.14.x",
"moment": "^2.8.3"
},
"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",
"css-loader": "^0.9.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": "^1.7.5",
"less-loader": "^0.7.7",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"mocha": "^2.4.5",
"moment": "^2.8.3",
"raw-loader": "^0.5.1",
"react": "^0.13.1",
"react-hot-loader": "^0.4.5",
"style-loader": "^0.8.1",
"react": "^0.14.3",
"react-addons-test-utils": "^0.14.7",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.5",
"webpack": "^1.4.3",
"webpack-dev-server": "^1.6.5",
"webpack-traceur-loader": "^0.3.0"
"webpack-dev-server": "^1.14.1"
},
"main": "./dist/react-calendar.js",
"scripts": {
"clean": "rm -r build && rm -r dist",
"clean": "rimraf build dist",
"test": "npm run umd && NODE_ENV=test mocha",
"test:watch": "NODE_ENV=test mocha --watch",
"prepublish": "webpack",

@@ -46,0 +65,0 @@ "umd": "REACT_CALENDAR_WEBPACK=umd webpack",

15

react-calendar.js

@@ -1,9 +0,6 @@

"use strict";
module.exports = {
Calendar: require('./src/Calendar'),
Month: require('./src/Month'),
Week: require('./src/Week'),
Day: require('./src/Day'),
dateUtils: require('./src/dateUtils')
};
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';

58

README.md
react-calendar
--------------
Calendars for React.
Calendars for React 0.14.3.

@@ -22,11 +22,17 @@ Not just calendar component, but a modular toolkit for building everything

```html
<Calendar firstMonth={1} <!-- Base calendar compoment -->
date={moment("2014-01-01")}
<Calendar startDate={ moment() }
endDate={ moment().endOf('year') } <!-- Base calendar compoment -->
weekNumbers={true}
size={12}>
<Month date={moment()} <!-- Pass subcomponents to mark -->
modifiers={{current: true}}/> <!-- current month and day -->
<Day date={moment()}
modifiers={{current: true}} />
</Calendar>
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. -->
}
]
}
/>
```

@@ -41,3 +47,3 @@

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

@@ -49,5 +55,17 @@

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

@@ -59,4 +77,4 @@

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

@@ -70,7 +88,7 @@ Styling

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`
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
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
pass similar object via `modifiers` prop (again this will probably become an array
in next version of API).

@@ -81,6 +99,6 @@

```html
<Day date={moment()} classes={{foo: true}} modifiers={{bar: true}} />
<Day date={moment()} mods={[{bar: true}]} />
```
will yield the following classes: `"rc-Day rc-Day--bar foo".`
will yield the following classes: `"rc-Day rc-Day--bar".`

@@ -87,0 +105,0 @@ TODO

143

src/Calendar.js

@@ -1,91 +0,78 @@

"use strict";
import React, { Component, PropTypes } from 'react';
import moment from 'moment';
import classnames from 'classnames';
import { getModsByCompType } from './util';
var _ = require('lodash');
var React = require('react');
var moment = require('moment');
import Month from './Month';
var CalendarBaseMixin = require('./CalendarBaseMixin');
var propTypes = require('./propTypes');
var ClassNameMixin = require('./ClassNameMixin');
var Month = React.createFactory(require('./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
};
var Calendar = React.createClass({
mixins: [
CalendarBaseMixin,
propTypes.Mixin(false,
'Calendar',
'Year',
'Month',
'Week',
'Day'
),
ClassNameMixin
],
static defaultProps = {
locale: 'en',
yearHeaderFormat: 'YYYY'
};
makeHeader: function (classes) {
if (this.getPropOrCtx('yearHeader')) {
return (
<header key="header"
className={classes.descendant('header')}>
{this.props.date.format(this.getPropOrCtx('yearHeaderFormat'))}
</header>
);
} else {
return null;
}
},
constructor (props, context) {
super(props, context);
}
getChildContext(){
return this.getCalendarCtx();
},
moment () {
const localMoment = moment.apply(null, arguments);
getMonthRange: function () {
var range, left, right;
var focus = this.moment(this.props.date).startOf('month');
var size = this.getPropOrCtx('size');
var firstMonth = this.getPropOrCtx('firstMonth') - 1;
localMoment.locale(this.props.locale);
if (_.isNumber(firstMonth) && size === 12) {
var focusMonth = focus.month();
if (focusMonth < firstMonth) {
left = focusMonth + (12 - firstMonth);
} else {
left = focusMonth - firstMonth;
}
left = -left;
right = size + left;
} else if (firstMonth === 'current') {
left = 0;
right = size;
} else {
var half = size / 2;
left = -Math.floor(half);
right = Math.ceil(half);
}
return _.range(left, right).map((offset) => {
return focus.clone().add(offset, 'months');
});
},
return localMoment;
}
render: function () {
var classes = this.className({
modifiers: this.props.modifiers,
classes: this.props.classes
});
var childrenMap = this.splitChildrenByDate(Month);
var months = this.getMonthRange().map(
this.makeDirectChild.bind(this, childrenMap, Month)
renderHeader () {
return (
<header key="header"
className={classnames('rc-Calendar-header')}>
{ this.moment(this.props.date).format(this.props.yearHeaderFormat) }
</header>
);
}
var props = _.assign({
className: classes()
}, this.getEventHandlers());
getMonthRange () {
const focus = this.moment(this.props.date).startOf('month');
const start = this.moment(this.props.startDate);
const end = this.moment(this.props.endDate);
const size = end.diff(start, 'month') + 1;
return React.DOM.div(props, [
this.makeHeader(classes),
months
]);
return Array(size).fill(0).map((n, i) => focus.clone().add(n + i, 'months'));
}
});
module.exports = Calendar;
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) => {
let fWeekMods = weekMods.filter((mod, j) => mod.date ? mod.date.get('month') === i : true);
let fDayMods = dayMods.filter((mod, k) => mod.date ? mod.date.get('month') === i : true);
return <Month key={ `month-${i}` }
date={ date }
weekNumbers={ this.props.weekNumbers }
mods={ monthMods }
week={ fWeekMods }
day={ fDayMods } />
})
}
</div>
);
}
}

92

src/dateUtils.js

@@ -1,59 +0,55 @@

"use strict";
'use strict';
var _ = require('lodash');
var moment = require('moment');
import moment from 'moment';
module.exports = {
/** 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
*/
weeksOfMonth: function (month) {
var thisMonth = month.month();
var weeks = [];
/** 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');
month = moment(month).startOf('month').startOf('week');
do {
weeks.push(month.clone());
month.add(1, 'week');
} while (month.month() === thisMonth)
do {
weeks.push(month.clone());
month.add(1, 'week');
} while (month.month() === thisMonth)
return weeks;
},
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
*/
monthEdges: function (month) {
var start = moment(month).startOf('month').startOf('week');
var end = moment(month).endOf('month').endOf('week');
/** 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');
var result = [];
const result = [];
while (start.month() !== month.month()) {
result.push(start.clone());
start.add(1, 'day');
}
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');
}
while (end.month() !== month.month()) {
result.push(end.clone());
end.subtract(1, 'day');
}
return result;
},
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
*/
daysOfWeek: function (week) {
week = moment(week).startOf('week');
return _.range(0, 7).map((day) => {
return week.clone().add(day, 'day');
});
}
};
/** 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'));
}

119

src/Day.js

@@ -1,69 +0,72 @@

"use strict";
import React, { PropTypes } from 'react';
import classnames from 'classnames';
var _ = require('lodash');
var React = require('react');
import { getMods } from './util';
var propTypes = require('./propTypes');
var ClassNameMixin = require('./ClassNameMixin');
const clsPrefix = 'rc-Day';
var Day = React.createClass({
mixins: [propTypes.Mixin(true,
'Day'
), ClassNameMixin],
const renderHeader = (props) => {
if (!props.dayHeader) {
return null;
}
makeHeader: function (classes) {
if (this.getPropOrCtx('dayHeader')) {
return (
<header className={classes()}>
{this.props.date.format(this.getPropOrCtx('dayHeaderFormat'))}
</header>
);
} else {
return null;
}
},
return (
<header className={`${clsPrefix}-Day-header`}>
{ props.date.format(props.dayHeaderFormat) }
</header>
);
};
makeBody: function (classes) {
return (
<span key="body"
className={classes()}>
{this.props.date.format(this.getPropOrCtx('dayFormat'))}
</span>
);
},
const renderAgenda = (props) => {
if (!props.dayAgenda) {
return null;
}
makeAgenda: function (classes) {
if (this.getPropOrCtx('dayAgenda')) {
return (
<div key="agenda"
className={classes()}>
{this.props.children}
</div>
);
} else {
return null;
}
},
getChildContext(){
return this.getCalendarCtx();
},
return (
<div key="agenda"
className={`${clsPrefix}-Day-agenda`}>
{ props.children }
</div>
);
};
render: function () {
var classes = this.className({
modifiers: this.props.modifiers,
classes: this.props.classes
});
const Day = (props) => {
const clsPrefix = 'rc-Day';
const { date, mods, outside } = props;
const modifiers = getMods(mods, date, clsPrefix, 'day');
var props = _.assign({
className: classes()
}, this.getEventHandlers());
let clsMods, events;
return React.DOM.div(props, [
this.makeHeader(classes.descendant('header')),
this.makeBody(classes.descendant('body')),
this.makeAgenda(classes.descendant('agenda'))
]);
if (modifiers) {
clsMods = modifiers.clsMods;
events = modifiers.events;
}
});
module.exports = Day;
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;

155

src/Month.js

@@ -1,97 +0,82 @@

"use strict";
import React, { PropTypes } from 'react';
import classnames from 'classnames';
var _ = require('lodash');
var React = require('react');
import { monthEdges, weeksOfMonth, daysOfWeek } from './dateUtils';
import { getMods } from './util';
import Week from './Week';
import Day from './Day';
var dateUtils = require('./dateUtils');
var CalendarBaseMixin = require('./CalendarBaseMixin');
var propTypes = require('./propTypes');
var ClassNameMixin = require('./ClassNameMixin');
var Week = React.createFactory(require('./Week'));
var Day = React.createFactory(require('./Day'));
const clsPrefix = 'rc-Month';
var Month = React.createClass({
mixins: [
CalendarBaseMixin,
propTypes.Mixin(true,
'Month',
'Week',
'Day'
),
ClassNameMixin
],
const renderWeekHeader = (props) => {
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>
);
};
createMonthEdge: function (date, i) {
return Day({
key: 'edge-' + i,
date: date,
modifiers: {outside: true}
});
},
const renderHeader = (props) => {
if (!props.monthNames) {
return null;
}
makeHeader: function (classes) {
if (this.getPropOrCtx('monthNames')) {
return (
<header key="header"
className={classes()}>
{this.props.date.format(this.getPropOrCtx('monthNameFormat'))}
</header>
);
} else {
return null;
}
},
return (
<header key="header" className={ classnames(`${clsPrefix}-header`) }>
{ props.date.format(props.monthNameFormat) }
</header>
);
}
makeWeekHeader: function (classes) {
if (this.getPropOrCtx('weekdayNames')) {
var week = dateUtils.daysOfWeek(this.props.date);
var weekEls = week.map((w, i) => {
return (
<div key={i}
className={classes.descendant('weekday')()}>
{w.format(this.getPropOrCtx('weekdayFormat'))}
</div>
);
});
return (
<header key="weekdays"
className={classes()}>
{weekEls}
</header>
);
} else {
return null;
}
},
const Month = (props) => {
const { date, day, mods, week, weekNumbers } = props;
const modifiers = getMods(mods, date, clsPrefix, 'month');
const edges = monthEdges(date);
getChildContext(){
return this.getCalendarCtx();
},
let clsMods, events;
render: function () {
var classes = this.className({
modifiers: this.props.modifiers,
classes: this.props.classes
});
if (modifiers) {
clsMods = modifiers.clsMods;
events = modifiers.events;
}
var childrenMap = this.splitChildrenByDate(
Week,
dateUtils.monthEdges(this.props.date).map(this.createMonthEdge)
);
var weeks = dateUtils.weeksOfMonth(this.props.date).map(
this.makeDirectChild.bind(this, childrenMap, Week)
);
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={ week }
day={ day } />
)
}
</div>
);
};
var props = _.assign({
className: classes()
}, this.getEventHandlers());
Month.propTypes = {
monthNames: PropTypes.bool,
monthNameFormat: PropTypes.string,
weekdayNames: PropTypes.bool,
weekdayFormat: PropTypes.string,
mod: PropTypes.object
};
return React.DOM.div(props, [
this.makeHeader(classes.descendant('header')),
this.makeWeekHeader(classes.descendant('weekdays')),
weeks
]);
}
});
Month.defaultProps = {
monthNames: true,
monthNameFormat: 'MMMM YYYY',
weekdayNames: true,
weekdayFormat: 'dd'
};
module.exports = Month;
export default Month;

106

src/Week.js

@@ -1,62 +0,64 @@

"use strict";
import React, { PropTypes } from 'react';
import classnames from 'classnames';
var _ = require('lodash');
var React = require('react');
import { getMods } from './util';
import { daysOfWeek } from './dateUtils';
import Day from './Day';
var dateUtils = require('./dateUtils');
var CalendarBaseMixin = require('./CalendarBaseMixin');
var propTypes = require('./propTypes');
var ClassNameMixin = require('./ClassNameMixin');
var Day = React.createFactory(require('./Day'));
const clsPrefix = 'rc-Week';
var Week = React.createClass({
mixins: [
CalendarBaseMixin,
propTypes.Mixin(true,
'Week',
'Day'
),
ClassNameMixin
],
const makeWeekNumber = (props) => {
if (!props.weekNumbers) {
return null;
}
makeWeekNumber: function (classes) {
if (this.getPropOrCtx('weekNumbers')) {
return (
<div key="weekNumber"
className={classes.descendant('number')()}>
{this.props.date.format(this.getPropOrCtx('weekNumberFormat'))}
</div>
);
} else {
return null;
}
},
getChildContext(){
return this.getCalendarCtx();
},
return (
<div key="weekNumber"
className={ classnames(`${clsPrefix}-number`) }>
{ props.date.format(props.weekNumberFormat) }
</div>
);
}
render: function () {
var classes = this.className({
modifiers: this.props.modifiers,
classes: this.props.classes
});
const Week = (props) => {
const { mods, date } = props;
const modifiers = getMods(mods, date, clsPrefix, 'week');
var childrenMap = this.splitChildrenByDate(Day);
var days = dateUtils.daysOfWeek(this.props.date).map(
this.makeDirectChild.bind(this, childrenMap, Day)
);
let clsMods, events;
var props = _.assign({
className: classes()
}, this.getEventHandlers());
if (modifiers) {
clsMods = modifiers.clsMods;
events = modifiers.events;
}
return React.DOM.div(props, [
this.makeWeekNumber(classes),
<div key="days" className={classes.descendant('days')}>
{days}
return (
<div key="days" className={ classnames(clsPrefix, clsMods) } { ...events }>
{ 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={ props.day } />
})
}
</div>
]);
}
});
</div>
);
};
module.exports = Week;
Week.propTypes = {
weekNumbers: PropTypes.bool,
weekNumberFormat: PropTypes.string
};
Week.defaultProps = {
weekNumbers: false,
weekNumberFormat: 'w'
};
export default Week;

67

webpack.config.js

@@ -1,2 +0,2 @@

var webpack = require("webpack");
var webpack = require('webpack');

@@ -6,16 +6,21 @@ var config = {

output: {
path: 'dist',
filename: 'react-calendar.js',
library: 'ReactCalendar',
libraryTarget: 'umd'
path: 'dist',
filename: 'react-calendar.js',
library: 'ReactCalendar',
libraryTarget: 'umd'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'jsx-loader?harmony'},
{
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: /\.woff$/, loader: "file-loader" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }
{ 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' }
]

@@ -25,8 +30,8 @@ },

react: {
root: "React",
commonjs: "react",
commonjs2: "react",
amd: "react"
root: 'React',
commonjs: 'react',
commonjs2: 'react',
amd: 'react'
},
moment: "moment"
moment: 'moment'
},

@@ -41,19 +46,27 @@ plugins: []

config.output.path = 'build';
config.output.filename = config.output.filename.replace(/\.js$/, ".min.js");
} else if (process.env.REACT_CALENDAR_WEBPACK === 'umd') {
config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');
}
if (process.env.REACT_CALENDAR_WEBPACK === 'umd') {
config.output.path = 'build';
} else if (process.env.REACT_CALENDAR_WEBPACK === 'server') {
config.module.loaders[0] = { test: /\.js$/, loader: 'react-hot!jsx-loader?harmony'};
}
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()
];
} else {
config.externals.lodash = {
root: "_",
commonjs: "lodash",
commonjs2: "lodash",
amd: "lodash"
};
}
module.exports = config;
dist/32941d6330044744c02493835b799e90.svg
dist/68ed1dac06bf0409c18ae7bc62889170.woff
dist/7ad17c6085dee9a33787bac28fb23d46.eot
dist/e49d52e74b7689a0727def99da31f3eb.ttf
src/CalendarBaseMixin.js
src/ClassNameMixin.js
src/propTypes.js
index.html

Sorry, the diff of this file is not supported yet

less/bootstrap-theme.less

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc