react-event-calendar - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

demo/CalendarDemo.jsx

@@ -37,2 +37,3 @@ import React from 'react';
         this.handleEventMouseOut = this.handleEventMouseOut.bind(this);
+        this.handleDayClick = this.handleDayClick.bind(this);
         this.handleModalClose = this.handleModalClose.bind(this);
@@ -63,12 +64,12 @@ }
             popoverTarget: () => ReactDOM.findDOMNode(target),
-            overlayTitle: eventData.title,
-            overlayContent: eventData.description,
+                overlayTitle: eventData.title,
+                overlayContent: eventData.description,
         });
     }
 
-     handleEventMouseOut(target, eventData, day) {
+    handleEventMouseOut(target, eventData, day) {
         this.setState({
             showPopover: false,
         });
-     }
+    }
 
@@ -84,2 +85,19 @@ handleEventClick(target, eventData, day) {
 
+    handleDayClick(target, day) {
+        this.setState({
+            showPopover: false,
+            showModal: true,
+            overlayTitle: this.getMomentFromDay(day).format('Do of MMMM YYYY'),
+            overlayContent: 'User clicked day (but not event node).',
+        });
+    }
+
+    getMomentFromDay(day) {
+        return moment().set({
+            'year': day.year,
+            'month': (day.month + 0) % 12,
+            'date': day.day
+        });
+    }
+
     handleModalClose() {
@@ -95,3 +113,3 @@ this.setState({
 
-	render() {
+    render() {
 
@@ -102,3 +120,3 @@ const styles = {
 
-		return (
+        return (
             <div style={styles}>
@@ -113,3 +131,3 @@
                     target={this.state.popoverTarget}>
-                  <Popover id="event">{this.state.overlayTitle}</Popover>
+                    <Popover id="event">{this.state.overlayTitle}</Popover>
                 </Overlay>
@@ -138,5 +156,5 @@
                         </Col>
-                         <Col xs={6}>
+                        <Col xs={6}>
                             <div className="pull-right h2">{this.getHumanDate()}</div>
-                         </Col>
+                        </Col>
                     </Row>
@@ -153,11 +171,12 @@ <br />
                                 onEventMouseOut={this.handleEventMouseOut}
+                                onDayClick={this.handleDayClick}
                                 maxEventSlots={10}
-                                />
+                            />
                         </Col>
                     </Row>
                 </Grid> 
-            
+
             </div>
-		);
-	}
+        );
+    }
 }
@@ -164,0 +183,0 @@

dist-modules/components/CalendarDay.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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 = require('react');
@@ -18,36 +20,69 @@
 
-var CalendarDay = function CalendarDay(_ref) {
-    var day = _ref.day;
-    var isToday = _ref.isToday;
-    var events = _ref.events;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-    var dayClasses = (0, _classnames2.default)({
-        'flexColumn': true,
-        'day': true,
-        'inactive': day.siblingMonth,
-        'today': isToday
-    });
+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; }
 
-    return _react2.default.createElement(
-        'div',
-        { className: dayClasses },
-        _react2.default.createElement(
-            'div',
-            { className: 'inner-grid' },
-            _react2.default.createElement(
+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 CalendarDay = function (_React$Component) {
+    _inherits(CalendarDay, _React$Component);
+
+    function CalendarDay() {
+        _classCallCheck(this, CalendarDay);
+
+        return _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarDay).apply(this, arguments));
+    }
+
+    _createClass(CalendarDay, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props;
+            var day = _props.day;
+            var isToday = _props.isToday;
+            var events = _props.events;
+            var onClick = _props.onClick;
+
+            var dayClasses = (0, _classnames2.default)({
+                'flexColumn': true,
+                'day': true,
+                'inactive': day.siblingMonth,
+                'today': isToday
+            });
+
+            return _react2.default.createElement(
                 'div',
-                { className: 'date' },
-                day.day
-            ),
-            events
-        )
-    );
-};
+                {
+                    onClick: onClick.bind(null, this, day),
+                    className: dayClasses },
+                _react2.default.createElement(
+                    'div',
+                    { className: 'inner-grid' },
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'date' },
+                        day.day
+                    ),
+                    events
+                )
+            );
+        }
+    }]);
 
+    return CalendarDay;
+}(_react2.default.Component);
+
+exports.default = CalendarDay;
+
+
 CalendarDay.propTypes = {
     day: _react2.default.PropTypes.object.isRequired,
     isToday: _react2.default.PropTypes.bool,
-    events: _react2.default.PropTypes.array
+    events: _react2.default.PropTypes.array,
+    onClick: _react2.default.PropTypes.func
 };
 
+CalendarDay.defaultProps = {
+    onClick: function onClick() {}
+};
+
 exports.default = CalendarDay;

dist-modules/components/CalendarEvent.js

@@ -19,2 +19,4 @@ 'use strict';
 
+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); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -29,12 +31,25 @@
 
-    function CalendarEvent() {
+    function CalendarEvent(props) {
         _classCallCheck(this, CalendarEvent);
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarEvent).apply(this, arguments));
+        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarEvent).call(this, props));
+
+        _this.sharedArguments = [null, _this, _this.props.eventData, _this.props.day];
+        // Bind methods
+        _this.handleClick = _this.handleClick.bind(_this);
+        return _this;
     }
 
     _createClass(CalendarEvent, [{
+        key: 'handleClick',
+        value: function handleClick(e) {
+            var _props;
+
+            (_props = this.props).onClick.apply(_props, _toConsumableArray(this.sharedArguments.slice(1)));
+            e.stopPropagation();
+        }
+    }, {
         key: 'render',
         value: function render() {
-            var _props$onClick, _props$onMouseOut, _props$onMouseOver;
+            var _props$onMouseOut, _props$onMouseOver;
 
@@ -57,10 +72,8 @@ // Return a placeholder element if there is no event data
 
-            var sharedArguments = [null, this, this.props.eventData, this.props.day];
-
             return _react2.default.createElement(
                 'div',
                 { className: eventClasses,
-                    onClick: (_props$onClick = this.props.onClick).bind.apply(_props$onClick, sharedArguments),
-                    onMouseOut: (_props$onMouseOut = this.props.onMouseOut).bind.apply(_props$onMouseOut, sharedArguments),
-                    onMouseOver: (_props$onMouseOver = this.props.onMouseOver).bind.apply(_props$onMouseOver, sharedArguments)
+                    onClick: this.handleClick,
+                    onMouseOut: (_props$onMouseOut = this.props.onMouseOut).bind.apply(_props$onMouseOut, _toConsumableArray(this.sharedArguments)),
+                    onMouseOver: (_props$onMouseOver = this.props.onMouseOver).bind.apply(_props$onMouseOver, _toConsumableArray(this.sharedArguments))
                 },
@@ -67,0 +80,0 @@ _react2.default.createElement(

dist-modules/index.js

@@ -247,3 +247,5 @@ 'use strict';
                     events: events,
-                    isToday: isToday });
+                    isToday: isToday,
+                    onClick: _this5.props.onDayClick
+                });
             });
@@ -274,2 +276,3 @@ }
     onEventMouseOver: _react2.default.PropTypes.func,
+    onDayClick: _react2.default.PropTypes.func,
     wrapTitle: _react2.default.PropTypes.bool,
@@ -276,0 +279,0 @@ year: _react2.default.PropTypes.number.isRequired

dist/react-event-calendar.js

@@ -303,3 +303,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	                    events: events,
-	                    isToday: isToday });
+	                    isToday: isToday,
+	                    onClick: _this5.props.onDayClick
+	                });
 	            });
@@ -330,2 +332,3 @@ }
 	    onEventMouseOver: _react2.default.PropTypes.func,
+	    onDayClick: _react2.default.PropTypes.func,
 	    wrapTitle: _react2.default.PropTypes.bool,
@@ -705,2 +708,4 @@ year: _react2.default.PropTypes.number.isRequired
 	
+	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__(1);
@@ -716,36 +721,69 @@
 	
-	var CalendarDay = function CalendarDay(_ref) {
-	    var day = _ref.day;
-	    var isToday = _ref.isToday;
-	    var events = _ref.events;
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 	
-	    var dayClasses = (0, _classnames2.default)({
-	        'flexColumn': true,
-	        'day': true,
-	        'inactive': day.siblingMonth,
-	        'today': isToday
-	    });
+	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; }
 	
-	    return _react2.default.createElement(
-	        'div',
-	        { className: dayClasses },
-	        _react2.default.createElement(
-	            'div',
-	            { className: 'inner-grid' },
-	            _react2.default.createElement(
+	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 CalendarDay = function (_React$Component) {
+	    _inherits(CalendarDay, _React$Component);
+	
+	    function CalendarDay() {
+	        _classCallCheck(this, CalendarDay);
+	
+	        return _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarDay).apply(this, arguments));
+	    }
+	
+	    _createClass(CalendarDay, [{
+	        key: 'render',
+	        value: function render() {
+	            var _props = this.props;
+	            var day = _props.day;
+	            var isToday = _props.isToday;
+	            var events = _props.events;
+	            var onClick = _props.onClick;
+	
+	            var dayClasses = (0, _classnames2.default)({
+	                'flexColumn': true,
+	                'day': true,
+	                'inactive': day.siblingMonth,
+	                'today': isToday
+	            });
+	
+	            return _react2.default.createElement(
 	                'div',
-	                { className: 'date' },
-	                day.day
-	            ),
-	            events
-	        )
-	    );
-	};
+	                {
+	                    onClick: onClick.bind(null, this, day),
+	                    className: dayClasses },
+	                _react2.default.createElement(
+	                    'div',
+	                    { className: 'inner-grid' },
+	                    _react2.default.createElement(
+	                        'div',
+	                        { className: 'date' },
+	                        day.day
+	                    ),
+	                    events
+	                )
+	            );
+	        }
+	    }]);
 	
+	    return CalendarDay;
+	}(_react2.default.Component);
+	
+	exports.default = CalendarDay;
+	
+	
 	CalendarDay.propTypes = {
 	    day: _react2.default.PropTypes.object.isRequired,
 	    isToday: _react2.default.PropTypes.bool,
-	    events: _react2.default.PropTypes.array
+	    events: _react2.default.PropTypes.array,
+	    onClick: _react2.default.PropTypes.func
 	};
 	
+	CalendarDay.defaultProps = {
+	    onClick: function onClick() {}
+	};
+	
 	exports.default = CalendarDay;
@@ -775,2 +813,4 @@
 	
+	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); } }
+	
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -785,12 +825,25 @@
 	
-	    function CalendarEvent() {
+	    function CalendarEvent(props) {
 	        _classCallCheck(this, CalendarEvent);
 	
-	        return _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarEvent).apply(this, arguments));
+	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarEvent).call(this, props));
+	
+	        _this.sharedArguments = [null, _this, _this.props.eventData, _this.props.day];
+	        // Bind methods
+	        _this.handleClick = _this.handleClick.bind(_this);
+	        return _this;
 	    }
 	
 	    _createClass(CalendarEvent, [{
+	        key: 'handleClick',
+	        value: function handleClick(e) {
+	            var _props;
+	
+	            (_props = this.props).onClick.apply(_props, _toConsumableArray(this.sharedArguments.slice(1)));
+	            e.stopPropagation();
+	        }
+	    }, {
 	        key: 'render',
 	        value: function render() {
-	            var _props$onClick, _props$onMouseOut, _props$onMouseOver;
+	            var _props$onMouseOut, _props$onMouseOver;
 	
@@ -813,10 +866,8 @@ // Return a placeholder element if there is no event data
 	
-	            var sharedArguments = [null, this, this.props.eventData, this.props.day];
-	
 	            return _react2.default.createElement(
 	                'div',
 	                { className: eventClasses,
-	                    onClick: (_props$onClick = this.props.onClick).bind.apply(_props$onClick, sharedArguments),
-	                    onMouseOut: (_props$onMouseOut = this.props.onMouseOut).bind.apply(_props$onMouseOut, sharedArguments),
-	                    onMouseOver: (_props$onMouseOver = this.props.onMouseOver).bind.apply(_props$onMouseOver, sharedArguments)
+	                    onClick: this.handleClick,
+	                    onMouseOut: (_props$onMouseOut = this.props.onMouseOut).bind.apply(_props$onMouseOut, _toConsumableArray(this.sharedArguments)),
+	                    onMouseOver: (_props$onMouseOver = this.props.onMouseOver).bind.apply(_props$onMouseOver, _toConsumableArray(this.sharedArguments))
 	                },
@@ -823,0 +874,0 @@ _react2.default.createElement(

dist/react-event-calendar.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.ReactEventCalender=t(require("react")):e.ReactEventCalender=t(e.React)}(this,function(e){return function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),u=n(1),l=a(u),d=n(2),p=n(3),f=(a(p),n(4)),y=a(f),c=n(5),h=a(c),v=n(6),D=a(v),b=function(e){function t(e){r(this,t);var n=s(this,Object.getPrototypeOf(t).call(this,e));return n._eventTargets={},n.state={today:n.getToday()},n.calendar=new d.Calendar({siblingMonths:!0}),n.getCalendarDays=n.getCalendarDays.bind(n),n.getDaysWithEvents=n.getDaysWithEvents.bind(n),n.getEventMeta=n.getEventMeta.bind(n),n.getToday=n.getToday.bind(n),n}return o(t,e),i(t,[{key:"getToday",value:function(){var e=new Date;return{day:e.getDate(),month:e.getMonth(),year:e.getFullYear()}}},{key:"getCalendarDays",value:function(){var e=this;return this.calendar.getCalendar(this.props.year,this.props.month).map(function(t){return t.eventSlots=Array(e.props.maxEventSlots).fill(!1),t})}},{key:"getEventMeta",value:function(e,t,n){var a=this.calendar.isDateSelected(t),r=this.calendar.isDateSelected(n),s=e[0],o=e[e.length-1],i={isVisibleInView:!1,visibleEventLength:e.length,firstVisibleDayIndex:a?d.Calendar.interval(s,t)-1:0};return a||r?i.isVisibleInView=!0:t.month<this.props.month&&n.month>this.props.month&&(i.isVisibleInView=!0),a&&r?i.visibleEventLength=d.Calendar.interval(t,n):!a&&r?i.visibleEventLength=d.Calendar.interval(s,n):a&&!r&&(i.visibleEventLength=d.Calendar.interval(t,o)),i}},{key:"getDaysWithEvents",value:function(){var e=this,t=this.getCalendarDays();return this.calendar.setStartDate(t[0]),this.calendar.setEndDate(t[t.length-1]),this.props.events.forEach(function(n){var a=e.getCalendarDayObject(n.start),r=e.getCalendarDayObject(n.end),s=e.getEventMeta(t,a,r);if(s.isVisibleInView)for(var o=s.visibleEventLength,i=t[s.firstVisibleDayIndex].eventSlots.indexOf(!1),u=0;o>u;){var l=Object.assign({},n);0===u&&(l.isFirstDay=!0),u===o-1&&(l.isLastDay=!0),l.isFirstDay&&l.isLastDay||(l.isBetweenDay=!0),t[s.firstVisibleDayIndex+u].eventSlots[i]=l,u++}}),t}},{key:"getCalendarDayObject",value:function(e){var t=e.split("-");return{year:t[0],month:t[1]-1,day:t[2]}}},{key:"getLastIndexOfEvent",value:function(e){var t=e.map(function(e,t){return e!==!1?t:!1}).filter(function(e){return e}).pop();return 3>t||void 0===t?2:t}},{key:"getSerializedDay",value:function(e){return[e.weekDay,e.day,e.month,e.year].join("")}},{key:"renderDaysOfTheWeek",value:function(){return this.props.daysOfTheWeek.map(function(e,t){return l["default"].createElement(D["default"],{key:"title_"+t,title:e})})}},{key:"renderEvents",value:function(e){var t=this,n=e.eventSlots.slice(0,this.getLastIndexOfEvent(e.eventSlots)+1);return n.map(function(n,a){return l["default"].createElement(h["default"],{key:"event_"+a+t.getSerializedDay(e),day:e,eventData:n,onClick:t.props.onEventClick,onMouseOut:t.props.onEventMouseOut,onMouseOver:t.props.onEventMouseOver,wrapTitle:t.props.wrapTitle})})}},{key:"renderCalendarDays",value:function(){var e=this;return this.getDaysWithEvents().map(function(t,n){var a=1===d.Calendar.interval(t,e.state.today),r=e.renderEvents(t);return l["default"].createElement(y["default"],{key:"day_"+e.getSerializedDay(t),day:t,events:r,isToday:a})})}},{key:"render",value:function(){return l["default"].createElement("div",{className:"flexContainer"},this.renderDaysOfTheWeek(),this.renderCalendarDays())}}]),t}(l["default"].Component);b.propTypes={daysOfTheWeek:l["default"].PropTypes.array,events:l["default"].PropTypes.array,maxEventSlots:l["default"].PropTypes.number,month:l["default"].PropTypes.number.isRequired,onEventClick:l["default"].PropTypes.func,onEventMouseOut:l["default"].PropTypes.func,onEventMouseOver:l["default"].PropTypes.func,wrapTitle:l["default"].PropTypes.bool,year:l["default"].PropTypes.number.isRequired},b.defaultProps={daysOfTheWeek:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],events:[],wrapTitle:!0,maxEventSlots:10},t["default"]=b},function(t,n){t.exports=e},function(e,t){function n(e){e=e||{},this.startDate=e.startDate,this.endDate=e.endDate,this.siblingMonths=e.siblingMonths,this.weekNumbers=e.weekNumbers,this.weekStart=e.weekStart,void 0===this.weekStart&&(this.weekStart=0),this.date=new Date(1986,9,14,0,0,0)}n.prototype.getCalendar=function(e,t){this.date.setUTCFullYear(e),this.date.setUTCMonth(t),this.date.setUTCDate(1),e=this.date.getUTCFullYear(),t=this.date.getUTCMonth();for(var a,r,s,o,i,u=[],l=this.date.getUTCDay(),d=-((7-this.weekStart+l)%7),p=n.daysInMonth(e,t),f=(p-d)%7,y=n.daysInMonth(e,t-1),c=d,h=p-c+(0!=f?7-f:0)+d,v=null;h>c;)r=c+1,a=((1>c?7+c:c)+l)%7,1>r||r>p?this.siblingMonths?(1>r?(o=t-1,i=e,0>o&&(o=11,i--),r=y+r):r>p&&(o=t+1,i=e,o>11&&(o=0,i++),r=c-p+1),s={day:r,weekDay:a,month:o,year:i,siblingMonth:!0}):s=!1:s={day:r,weekDay:a,month:t,year:e},s&&this.weekNumbers&&(null===v?v=n.calculateWeekNumber(s):1==a&&52==v?v=1:1==a&&v++,s.weekNumber=v),s&&this.startDate&&(s.selected=this.isDateSelected(s)),u.push(s),c++;return u},n.prototype.isDateSelected=function(e){return e.year==this.startDate.year&&e.month==this.startDate.month&&e.day==this.startDate.day?!0:this.endDate?e.year==this.startDate.year&&e.month==this.startDate.month&&e.day<this.startDate.day?!1:e.year==this.endDate.year&&e.month==this.endDate.month&&e.day>this.endDate.day?!1:e.year==this.startDate.year&&e.month<this.startDate.month?!1:e.year==this.endDate.year&&e.month>this.endDate.month?!1:e.year<this.startDate.year?!1:!(e.year>this.endDate.year):!1},n.prototype.setStartDate=function(e){this.startDate=e},n.prototype.setEndDate=function(e){this.endDate=e},n.prototype.setDate=n.prototype.setStartDate,n.diff=function(e,t){var n=new Date(1986,9,14,0,0,0),a=new Date(1986,9,14,0,0,0);return n.setUTCFullYear(e.year),n.setUTCMonth(e.month),n.setUTCDate(e.day),a.setUTCFullYear(t.year),a.setUTCMonth(t.month),a.setUTCDate(t.day),Math.ceil((n.getTime()-a.getTime())/864e5)},n.interval=function(e,t){return Math.abs(n.diff(e,t))+1},n.daysInMonth=function(e,t){return new Date(e,t+1,0).getDate()},n.isLeapYear=function(e){return e%4==0&&e%100!=0||e%400==0},n.calculateWeekNumber=function(e){var t=new Date(1986,9,14,0,0,0);t.setUTCFullYear(e.year),t.setUTCMonth(e.month),t.setUTCDate(e.day);var n=new Date(t.valueOf()),a=(t.getUTCDay()+6)%7;n.setUTCDate(n.getUTCDate()-a+3);var r=n.valueOf();return n.setUTCMonth(0,1),4!=n.getUTCDay()&&n.setUTCMonth(0,1+(4-n.getUTCDay()+7)%7),1+Math.ceil((r-n)/6048e5)},e.exports={Calendar:n}},function(e,t,n){var a,r;/*!
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.ReactEventCalender=t(require("react")):e.ReactEventCalender=t(e.React)}(this,function(e){return function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),u=n(1),l=a(u),f=n(2),p=n(3),d=(a(p),n(4)),c=a(d),y=n(5),h=a(y),v=n(6),b=a(v),D=function(e){function t(e){r(this,t);var n=o(this,Object.getPrototypeOf(t).call(this,e));return n._eventTargets={},n.state={today:n.getToday()},n.calendar=new f.Calendar({siblingMonths:!0}),n.getCalendarDays=n.getCalendarDays.bind(n),n.getDaysWithEvents=n.getDaysWithEvents.bind(n),n.getEventMeta=n.getEventMeta.bind(n),n.getToday=n.getToday.bind(n),n}return s(t,e),i(t,[{key:"getToday",value:function(){var e=new Date;return{day:e.getDate(),month:e.getMonth(),year:e.getFullYear()}}},{key:"getCalendarDays",value:function(){var e=this;return this.calendar.getCalendar(this.props.year,this.props.month).map(function(t){return t.eventSlots=Array(e.props.maxEventSlots).fill(!1),t})}},{key:"getEventMeta",value:function(e,t,n){var a=this.calendar.isDateSelected(t),r=this.calendar.isDateSelected(n),o=e[0],s=e[e.length-1],i={isVisibleInView:!1,visibleEventLength:e.length,firstVisibleDayIndex:a?f.Calendar.interval(o,t)-1:0};return a||r?i.isVisibleInView=!0:t.month<this.props.month&&n.month>this.props.month&&(i.isVisibleInView=!0),a&&r?i.visibleEventLength=f.Calendar.interval(t,n):!a&&r?i.visibleEventLength=f.Calendar.interval(o,n):a&&!r&&(i.visibleEventLength=f.Calendar.interval(t,s)),i}},{key:"getDaysWithEvents",value:function(){var e=this,t=this.getCalendarDays();return this.calendar.setStartDate(t[0]),this.calendar.setEndDate(t[t.length-1]),this.props.events.forEach(function(n){var a=e.getCalendarDayObject(n.start),r=e.getCalendarDayObject(n.end),o=e.getEventMeta(t,a,r);if(o.isVisibleInView)for(var s=o.visibleEventLength,i=t[o.firstVisibleDayIndex].eventSlots.indexOf(!1),u=0;s>u;){var l=Object.assign({},n);0===u&&(l.isFirstDay=!0),u===s-1&&(l.isLastDay=!0),l.isFirstDay&&l.isLastDay||(l.isBetweenDay=!0),t[o.firstVisibleDayIndex+u].eventSlots[i]=l,u++}}),t}},{key:"getCalendarDayObject",value:function(e){var t=e.split("-");return{year:t[0],month:t[1]-1,day:t[2]}}},{key:"getLastIndexOfEvent",value:function(e){var t=e.map(function(e,t){return e!==!1?t:!1}).filter(function(e){return e}).pop();return 3>t||void 0===t?2:t}},{key:"getSerializedDay",value:function(e){return[e.weekDay,e.day,e.month,e.year].join("")}},{key:"renderDaysOfTheWeek",value:function(){return this.props.daysOfTheWeek.map(function(e,t){return l["default"].createElement(b["default"],{key:"title_"+t,title:e})})}},{key:"renderEvents",value:function(e){var t=this,n=e.eventSlots.slice(0,this.getLastIndexOfEvent(e.eventSlots)+1);return n.map(function(n,a){return l["default"].createElement(h["default"],{key:"event_"+a+t.getSerializedDay(e),day:e,eventData:n,onClick:t.props.onEventClick,onMouseOut:t.props.onEventMouseOut,onMouseOver:t.props.onEventMouseOver,wrapTitle:t.props.wrapTitle})})}},{key:"renderCalendarDays",value:function(){var e=this;return this.getDaysWithEvents().map(function(t,n){var a=1===f.Calendar.interval(t,e.state.today),r=e.renderEvents(t);return l["default"].createElement(c["default"],{key:"day_"+e.getSerializedDay(t),day:t,events:r,isToday:a,onClick:e.props.onDayClick})})}},{key:"render",value:function(){return l["default"].createElement("div",{className:"flexContainer"},this.renderDaysOfTheWeek(),this.renderCalendarDays())}}]),t}(l["default"].Component);D.propTypes={daysOfTheWeek:l["default"].PropTypes.array,events:l["default"].PropTypes.array,maxEventSlots:l["default"].PropTypes.number,month:l["default"].PropTypes.number.isRequired,onEventClick:l["default"].PropTypes.func,onEventMouseOut:l["default"].PropTypes.func,onEventMouseOver:l["default"].PropTypes.func,onDayClick:l["default"].PropTypes.func,wrapTitle:l["default"].PropTypes.bool,year:l["default"].PropTypes.number.isRequired},D.defaultProps={daysOfTheWeek:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],events:[],wrapTitle:!0,maxEventSlots:10},t["default"]=D},function(t,n){t.exports=e},function(e,t){function n(e){e=e||{},this.startDate=e.startDate,this.endDate=e.endDate,this.siblingMonths=e.siblingMonths,this.weekNumbers=e.weekNumbers,this.weekStart=e.weekStart,void 0===this.weekStart&&(this.weekStart=0),this.date=new Date(1986,9,14,0,0,0)}n.prototype.getCalendar=function(e,t){this.date.setUTCFullYear(e),this.date.setUTCMonth(t),this.date.setUTCDate(1),e=this.date.getUTCFullYear(),t=this.date.getUTCMonth();for(var a,r,o,s,i,u=[],l=this.date.getUTCDay(),f=-((7-this.weekStart+l)%7),p=n.daysInMonth(e,t),d=(p-f)%7,c=n.daysInMonth(e,t-1),y=f,h=p-y+(0!=d?7-d:0)+f,v=null;h>y;)r=y+1,a=((1>y?7+y:y)+l)%7,1>r||r>p?this.siblingMonths?(1>r?(s=t-1,i=e,0>s&&(s=11,i--),r=c+r):r>p&&(s=t+1,i=e,s>11&&(s=0,i++),r=y-p+1),o={day:r,weekDay:a,month:s,year:i,siblingMonth:!0}):o=!1:o={day:r,weekDay:a,month:t,year:e},o&&this.weekNumbers&&(null===v?v=n.calculateWeekNumber(o):1==a&&52==v?v=1:1==a&&v++,o.weekNumber=v),o&&this.startDate&&(o.selected=this.isDateSelected(o)),u.push(o),y++;return u},n.prototype.isDateSelected=function(e){return e.year==this.startDate.year&&e.month==this.startDate.month&&e.day==this.startDate.day?!0:this.endDate?e.year==this.startDate.year&&e.month==this.startDate.month&&e.day<this.startDate.day?!1:e.year==this.endDate.year&&e.month==this.endDate.month&&e.day>this.endDate.day?!1:e.year==this.startDate.year&&e.month<this.startDate.month?!1:e.year==this.endDate.year&&e.month>this.endDate.month?!1:e.year<this.startDate.year?!1:!(e.year>this.endDate.year):!1},n.prototype.setStartDate=function(e){this.startDate=e},n.prototype.setEndDate=function(e){this.endDate=e},n.prototype.setDate=n.prototype.setStartDate,n.diff=function(e,t){var n=new Date(1986,9,14,0,0,0),a=new Date(1986,9,14,0,0,0);return n.setUTCFullYear(e.year),n.setUTCMonth(e.month),n.setUTCDate(e.day),a.setUTCFullYear(t.year),a.setUTCMonth(t.month),a.setUTCDate(t.day),Math.ceil((n.getTime()-a.getTime())/864e5)},n.interval=function(e,t){return Math.abs(n.diff(e,t))+1},n.daysInMonth=function(e,t){return new Date(e,t+1,0).getDate()},n.isLeapYear=function(e){return e%4==0&&e%100!=0||e%400==0},n.calculateWeekNumber=function(e){var t=new Date(1986,9,14,0,0,0);t.setUTCFullYear(e.year),t.setUTCMonth(e.month),t.setUTCDate(e.day);var n=new Date(t.valueOf()),a=(t.getUTCDay()+6)%7;n.setUTCDate(n.getUTCDate()-a+3);var r=n.valueOf();return n.setUTCMonth(0,1),4!=n.getUTCDay()&&n.setUTCMonth(0,1+(4-n.getUTCDay()+7)%7),1+Math.ceil((r-n)/6048e5)},e.exports={Calendar:n}},function(e,t,n){var a,r;/*!
 	  Copyright (c) 2016 Jed Watson.
@@ -6,3 +6,3 @@ Licensed under the MIT License (MIT), see
 	*/
-!function(){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var r=typeof a;if("string"===r||"number"===r)e.push(a);else if(Array.isArray(a))e.push(n.apply(null,a));else if("object"===r)for(var o in a)s.call(a,o)&&a[o]&&e.push(o)}}return e.join(" ")}var s={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=n:(a=[],r=function(){return n}.apply(t,a),!(void 0!==r&&(e.exports=r)))}()},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),s=a(r),o=n(3),i=a(o),u=function(e){var t=e.day,n=e.isToday,a=e.events,r=(0,i["default"])({flexColumn:!0,day:!0,inactive:t.siblingMonth,today:n});return s["default"].createElement("div",{className:r},s["default"].createElement("div",{className:"inner-grid"},s["default"].createElement("div",{className:"date"},t.day),a))};u.propTypes={day:s["default"].PropTypes.object.isRequired,isToday:s["default"].PropTypes.bool,events:s["default"].PropTypes.array},t["default"]=u},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),u=n(1),l=a(u),d=n(3),p=a(d),f=function(e){function t(){return r(this,t),s(this,Object.getPrototypeOf(t).apply(this,arguments))}return o(t,e),i(t,[{key:"render",value:function(){var e,t,n;if(!this.props.eventData)return l["default"].createElement("div",{className:"event-slot"});var a=this.props.eventData.isFirstDay||0===this.props.day.weekDay&&this.props.wrapTitle,r=a?this.props.eventData.title:"",s=(0,p["default"])({"event-slot":!0,event:!0,"event-first-day":this.props.eventData.isFirstDay,"event-last-day":this.props.eventData.isLastDay,"event-has-label":a},this.props.eventData.eventClasses),o=[null,this,this.props.eventData,this.props.day];return l["default"].createElement("div",{className:s,onClick:(e=this.props.onClick).bind.apply(e,o),onMouseOut:(t=this.props.onMouseOut).bind.apply(t,o),onMouseOver:(n=this.props.onMouseOver).bind.apply(n,o)},l["default"].createElement("div",{className:"event-title"},r))}}]),t}(l["default"].Component);f.propTypes={day:l["default"].PropTypes.object.isRequired,eventData:l["default"].PropTypes.oneOfType([l["default"].PropTypes.object,l["default"].PropTypes.bool]),onClick:l["default"].PropTypes.func,onMouseOut:l["default"].PropTypes.func,onMouseOver:l["default"].PropTypes.func,wrapTitle:l["default"].PropTypes.bool},f.defaultProps={onClick:function(){},onMouseOut:function(){},onMouseOver:function(){}},t["default"]=f},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),s=a(r),o=function(e){var t=e.title;return s["default"].createElement("div",{className:"flexColumn"},t)};o.propTypes={title:s["default"].PropTypes.string.isRequired},t["default"]=o}])});
+!function(){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var r=typeof a;if("string"===r||"number"===r)e.push(a);else if(Array.isArray(a))e.push(n.apply(null,a));else if("object"===r)for(var s in a)o.call(a,s)&&a[s]&&e.push(s)}}return e.join(" ")}var o={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=n:(a=[],r=function(){return n}.apply(t,a),!(void 0!==r&&(e.exports=r)))}()},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),u=n(1),l=a(u),f=n(3),p=a(f),d=function(e){function t(){return r(this,t),o(this,Object.getPrototypeOf(t).apply(this,arguments))}return s(t,e),i(t,[{key:"render",value:function(){var e=this.props,t=e.day,n=e.isToday,a=e.events,r=e.onClick,o=(0,p["default"])({flexColumn:!0,day:!0,inactive:t.siblingMonth,today:n});return l["default"].createElement("div",{onClick:r.bind(null,this,t),className:o},l["default"].createElement("div",{className:"inner-grid"},l["default"].createElement("div",{className:"date"},t.day),a))}}]),t}(l["default"].Component);t["default"]=d,d.propTypes={day:l["default"].PropTypes.object.isRequired,isToday:l["default"].PropTypes.bool,events:l["default"].PropTypes.array,onClick:l["default"].PropTypes.func},d.defaultProps={onClick:function(){}},t["default"]=d},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function r(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),l=n(1),f=a(l),p=n(3),d=a(p),c=function(e){function t(e){o(this,t);var n=s(this,Object.getPrototypeOf(t).call(this,e));return n.sharedArguments=[null,n,n.props.eventData,n.props.day],n.handleClick=n.handleClick.bind(n),n}return i(t,e),u(t,[{key:"handleClick",value:function(e){var t;(t=this.props).onClick.apply(t,r(this.sharedArguments.slice(1))),e.stopPropagation()}},{key:"render",value:function(){var e,t;if(!this.props.eventData)return f["default"].createElement("div",{className:"event-slot"});var n=this.props.eventData.isFirstDay||0===this.props.day.weekDay&&this.props.wrapTitle,a=n?this.props.eventData.title:"",o=(0,d["default"])({"event-slot":!0,event:!0,"event-first-day":this.props.eventData.isFirstDay,"event-last-day":this.props.eventData.isLastDay,"event-has-label":n},this.props.eventData.eventClasses);return f["default"].createElement("div",{className:o,onClick:this.handleClick,onMouseOut:(e=this.props.onMouseOut).bind.apply(e,r(this.sharedArguments)),onMouseOver:(t=this.props.onMouseOver).bind.apply(t,r(this.sharedArguments))},f["default"].createElement("div",{className:"event-title"},a))}}]),t}(f["default"].Component);c.propTypes={day:f["default"].PropTypes.object.isRequired,eventData:f["default"].PropTypes.oneOfType([f["default"].PropTypes.object,f["default"].PropTypes.bool]),onClick:f["default"].PropTypes.func,onMouseOut:f["default"].PropTypes.func,onMouseOver:f["default"].PropTypes.func,wrapTitle:f["default"].PropTypes.bool},c.defaultProps={onClick:function(){},onMouseOut:function(){},onMouseOver:function(){}},t["default"]=c},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),o=a(r),s=function(e){var t=e.title;return o["default"].createElement("div",{className:"flexColumn"},t)};s.propTypes={title:o["default"].PropTypes.string.isRequired},t["default"]=s}])});
 //# sourceMappingURL=react-event-calendar.min.js.map

package.json

 {
   "name": "react-event-calendar",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "React JS component that will display supplied event data within a calendar view of a given month.",
@@ -5,0 +5,0 @@ "author": "James Lewis",

README.md

@@ -0,1 +1,3 @@
+[![npm version](https://badge.fury.io/js/react-event-calendar.svg)](https://badge.fury.io/js/react-event-calendar)
+
 # react-event-calendar
@@ -64,12 +66,13 @@ A Calendar component that will display supplied events in a given month.
 
-| Property | Type | Description |
-| -------- | ---- | ----------- |
-| events | array | Array of event objects to be represented on the calendar (see below for options)|
-| month | int | Selected Month to display |
-| year | int | Selected Year to display |
-| wrapTitle | boolean | (default: true) Redisplay an event's title if it's duration wraps to the next week
-| maxEventSlots | int | (default: 10) Maximum number of events to display per calendar day 
-| onEventClick | func(target, eventData, day) | Callback for user click on any event node |
-| onEventMouseOver | func(target, eventData, day) | Callback for user mouse over on any event node |
-| onEventMouseOut | func(target, eventData, day) | Callback for user mouse out on any event node |
+| property |type | default | description |
+| -------- | ---- | ----------- | ----- |
+| events | array |   |Array of event objects to be represented on the calendar (see below for options)|
+| month | int |   | (Required) Selected Month to display |
+| year | int |   | (Required) Selected Year to display |
+| wrapTitle | boolean | true | Redisplay an event's title if it's duration wraps to the next week
+| maxEventSlots | int | 10 | Maximum number of events to display per calendar day 
+| onDayClick | func(target, day) |   | Callback for user click on any day (but not an event node) |
+| onEventClick | func(target, eventData, day) |   | Callback for user click on any event node |
+| onEventMouseOver | func(target, eventData, day) |   | Callback for user mouse over on any event node |
+| onEventMouseOut | func(target, eventData, day) |   | Callback for user mouse out on any event node |
 
@@ -76,0 +79,0 @@ ### Events object

src/components/CalendarDay.js

 import React from 'react';
 import classnames from 'classnames';
 
-const CalendarDay = ({day, isToday, events}) => {
-    const dayClasses = classnames({
-        'flexColumn': true,
-        'day': true,
-        'inactive': day.siblingMonth,
-        'today': isToday,
-    });
+export default class CalendarDay extends React.Component {
+    render () {
+        const { day, isToday, events, onClick } = this.props;
+        const dayClasses = classnames({
+            'flexColumn': true,
+            'day': true,
+            'inactive': day.siblingMonth,
+            'today': isToday,
+        });
 
-    return (
-        <div className={dayClasses}>
-            <div className="inner-grid">
-                <div className="date">
-                    {day.day}
+        return (
+            <div 
+                onClick={onClick.bind(null, this, day)}
+                className={dayClasses}>
+                <div className="inner-grid">
+                    <div className="date">
+                        {day.day}
+                    </div>
+                    {events}
                 </div>
-                {events}
             </div>
-        </div>
-    );
+        );
+    }
 }
 
 CalendarDay.propTypes = {
-  day: React.PropTypes.object.isRequired,
-  isToday: React.PropTypes.bool,
-  events: React.PropTypes.array,
+    day: React.PropTypes.object.isRequired,
+    isToday: React.PropTypes.bool,
+    events: React.PropTypes.array,
+    onClick: React.PropTypes.func,
 };
 
-export default CalendarDay;
+CalendarDay.defaultProps = {
+    onClick: () => {},
+}
+
+export default CalendarDay;

src/components/CalendarEvent.js

@@ -7,26 +7,38 @@ import React from 'react';
 
-  render() {
-    // Return a placeholder element if there is no event data 
-    if(!this.props.eventData) {
-        return <div className="event-slot"></div>;
+    constructor(props) {
+        super(props);
+
+        this.sharedArguments = [null, this, this.props.eventData, this.props.day];
+        // Bind methods
+        this.handleClick = this.handleClick.bind(this);
     }
 
-    const showLabel = this.props.eventData.isFirstDay || (this.props.day.weekDay === 0 && this.props.wrapTitle);
-    const title = showLabel ? this.props.eventData.title : '';
+    handleClick(e) {
+        this.props.onClick(...this.sharedArguments.slice(1));
+        e.stopPropagation();
+    }
 
-    const eventClasses = classnames({
-        'event-slot': true,
-        'event': true,
-        'event-first-day': this.props.eventData.isFirstDay,
-        'event-last-day': this.props.eventData.isLastDay,
-        'event-has-label': showLabel,
-    }, this.props.eventData.eventClasses);
+    render() {
+        // Return a placeholder element if there is no event data 
+        if(!this.props.eventData) {
+            return <div className="event-slot"></div>;
+        }
 
-    const sharedArguments = [null, this, this.props.eventData, this.props.day];
+        const showLabel = this.props.eventData.isFirstDay || (this.props.day.weekDay === 0 && this.props.wrapTitle);
+        const title = showLabel ? this.props.eventData.title : '';
 
-    return (
+        const eventClasses = classnames({
+            'event-slot': true,
+            'event': true,
+            'event-first-day': this.props.eventData.isFirstDay,
+            'event-last-day': this.props.eventData.isLastDay,
+            'event-has-label': showLabel,
+        }, this.props.eventData.eventClasses);
+
+
+        return (
             <div className={eventClasses}
-                 onClick={this.props.onClick.bind(...sharedArguments)}
-                 onMouseOut={this.props.onMouseOut.bind(...sharedArguments)}
-                 onMouseOver={this.props.onMouseOver.bind(...sharedArguments)}
+                onClick={this.handleClick}
+                onMouseOut={this.props.onMouseOut.bind(...this.sharedArguments)}
+                onMouseOver={this.props.onMouseOver.bind(...this.sharedArguments)}
             >
@@ -36,25 +48,25 @@ <div className="event-title">
                 </div>
-        </div>
-    );
-  }
+            </div>
+        );
+    }
 }
 
 CalendarEvent.propTypes = {
-  day: React.PropTypes.object.isRequired,
-  eventData: React.PropTypes.oneOfType([
-    React.PropTypes.object,
-    React.PropTypes.bool,
-  ]),
-  onClick: React.PropTypes.func,
-  onMouseOut: React.PropTypes.func,
-  onMouseOver: React.PropTypes.func,
-  wrapTitle: React.PropTypes.bool,
+    day: React.PropTypes.object.isRequired,
+    eventData: React.PropTypes.oneOfType([
+        React.PropTypes.object,
+        React.PropTypes.bool,
+    ]),
+    onClick: React.PropTypes.func,
+    onMouseOut: React.PropTypes.func,
+    onMouseOver: React.PropTypes.func,
+    wrapTitle: React.PropTypes.bool,
 };
 
 CalendarEvent.defaultProps = {
-  onClick: () => {},
-  onMouseOut: () => {},
-  onMouseOver: () => {},
+    onClick: () => {},
+    onMouseOut: () => {},
+    onMouseOver: () => {},
 }
 
 export default CalendarEvent;

src/index.js

@@ -200,3 +200,5 @@ import React from 'react';
                     events={events}
-                    isToday={isToday} />
+                    isToday={isToday} 
+                    onClick={this.props.onDayClick}
+                    />
                 );
@@ -224,2 +226,3 @@ });
     onEventMouseOver: React.PropTypes.func,
+    onDayClick: React.PropTypes.func,
     wrapTitle: React.PropTypes.bool,
@@ -245,2 +248,2 @@ year: React.PropTypes.number.isRequired,
 
-export default EventCalendar;
+export default EventCalendar;

No alert changes

Improved metrics

Total package byte prevSize

232083

increased by5.74%

Lines of code

2198

increased by0.87%

Number of lines in readme file

114

increased by2.7%

Worsened metrics

Number of package files

33

decreased by-8.33%

No dependency changes