react-event-calendar - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/react-event-calendar.js

@@ -54,6 +54,2 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactEventCalendar = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
-        this.state = {
-            days: []
-        };
-
         // Bind methods
@@ -69,5 +65,2 @@ this.getCalendarDays = this.getCalendarDays.bind(this);
             this.calendar = new _calendarBase.Calendar({ siblingMonths: true });
-            this.setState({
-                days: this.getDaysWithEvents()
-            });
         }
@@ -193,3 +186,3 @@ }, {
         key: 'renderEvent',
-        value: function renderEvent(eventData, day) {
+        value: function renderEvent(eventData, day, index) {
             var showLabel = eventData.isFirstDay || day.weekDay === 0;
@@ -205,7 +198,12 @@
 
+            // Generate a dynamic ref
+            var ref = [day.month, day.day, index].join('_');
+
             return _react2['default'].createElement(
                 'div',
                 { className: eventClasses,
-                    onClick: this.props.onEventClick,
-                    onMouseOver: this.props.onEventMouseOver },
+                    ref: ref,
+                    onClick: this.props.onEventClick.bind(null, ref, eventData),
+                    onMouseOver: this.props.onEventMouseOver.bind(null, ref, eventData),
+                    onMouseOut: this.props.onEventMouseOut.bind(null, ref, eventData) },
                 eventData.title
@@ -224,4 +222,4 @@ );
             );
-            return day.eventSlots.map(function (eventData) {
-                return eventData ? _this2.renderEvent(eventData, day) : placeholder;
+            return day.eventSlots.map(function (eventData, index) {
+                return eventData ? _this2.renderEvent(eventData, day, index) : placeholder;
             });
@@ -234,3 +232,3 @@ }
 
-            return this.state.days.map(function (day) {
+            return this.getDaysWithEvents().map(function (day) {
 
@@ -237,0 +235,0 @@ var dayClasses = (0, _classnames2['default'])({

dist/react-event-calendar.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.ReactEventCalendar=e()}}(function(){return function e(t,n,r){function a(s,o){if(!n[s]){if(!t[s]){var l="function"==typeof require&&require;if(!o&&l)return l(s,!0);if(i)return i(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var d=n[s]={exports:{}};t[s][0].call(d.exports,function(e){var n=t[s][1][e];return a(n?n:e)},d,d.exports,e,t,n,r)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)a(r[s]);return a}({1:[function(e,t,n){(function(r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}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(n,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=function(e,t,n){for(var r=!0;r;){var a=e,i=t,s=n;o=u=l=void 0,r=!1,null===a&&(a=Function.prototype);var o=Object.getOwnPropertyDescriptor(a,i);if(void 0!==o){if("value"in o)return o.value;var l=o.get;return void 0===l?void 0:l.call(s)}var u=Object.getPrototypeOf(a);if(null===u)return void 0;e=u,t=i,n=s,r=!0}},u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,f=a(d),c=e("calendar-base"),v=e("classnames"),y=a(v),p={events:f["default"].PropTypes.array,month:f["default"].PropTypes.number.isRequired,year:f["default"].PropTypes.number.isRequired,onEventClick:f["default"].PropTypes.func,onEventMouseOver:f["default"].PropTypes.func},h={daysOfTheWeek:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],events:[]},b=function(e){function t(e){i(this,t),l(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={days:[]},this.getCalendarDays=this.getCalendarDays.bind(this),this.getDaysWithEvents=this.getDaysWithEvents.bind(this),this.getEventMeta=this.getEventMeta.bind(this)}return s(t,e),o(t,[{key:"componentWillMount",value:function(){this.calendar=new c.Calendar({siblingMonths:!0}),this.setState({days:this.getDaysWithEvents()})}},{key:"getCalendarDays",value:function(){return this.calendar.getCalendar(this.props.year,this.props.month).map(function(e){return e.eventSlots=Array(3).fill(!1),e})}},{key:"getEventMeta",value:function(e,t,n){var r=this.calendar.isDateSelected(t),a=this.calendar.isDateSelected(n),i=e[0],s=e[e.length-1],o={isVisibleInView:!1,visibleEventLength:e.length,firstVisibleDayIndex:r?c.Calendar.interval(i,t)-1:0};return r||a?o.isVisibleInView=!0:t.month<this.props.month&&n.month>this.props.month&&(o.isVisibleInView=!0),r&&a?o.visibleEventLength=c.Calendar.interval(t,n):!r&&a?o.visibleEventLength=c.Calendar.interval(i,n):r&&!a&&(o.visibleEventLength=c.Calendar.interval(t,s)),o}},{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 r=e.getCalendarDayObject(n.start),a=e.getCalendarDayObject(n.end),i=e.getEventMeta(t,r,a);if(i.isVisibleInView)for(var s=i.visibleEventLength,o=t[i.firstVisibleDayIndex].eventSlots.indexOf(!1),l=0;s>l;){var d=u({},n);0===l?d.isFirstDay=!0:l===s-1?d.isLastDay=!0:d.isBetweenDay=!0,t[i.firstVisibleDayIndex+l].eventSlots[o]=d,l++}}),t}},{key:"getCalendarDayObject",value:function(e){var t=e.split("-");return{year:t[0],month:t[1],day:t[2]}}},{key:"renderDaysOfTheWeek",value:function(){return this.props.daysOfTheWeek.map(function(e){return f["default"].createElement("div",{className:"flexColumn"},e)})}},{key:"renderEvent",value:function(e,t){var n=e.isFirstDay||0===t.weekDay,r=y["default"]({"event-slot":!0,event:!0,"event-first-day":e.isFirstDay,"event-last-day":e.isLastDay,"event-has-label":n});return f["default"].createElement("div",{className:r,onClick:this.props.onEventClick,onMouseOver:this.props.onEventMouseOver},e.title)}},{key:"renderEvents",value:function(e){var t=this,n=f["default"].createElement("div",{className:"event-slot"}," ");return e.eventSlots.map(function(r){return r?t.renderEvent(r,e):n})}},{key:"renderCalendarDays",value:function(){var e=this;return this.state.days.map(function(t){var n=y["default"]({flexColumn:!0,day:!0,inactive:t.siblingMonth});return f["default"].createElement("div",{className:n},f["default"].createElement("div",{className:"inner-grid"},f["default"].createElement("div",{className:"date"},t.day),e.renderEvents(t)))})}},{key:"render",value:function(){return f["default"].createElement("div",{className:"flexContainer"},this.renderDaysOfTheWeek(),this.renderCalendarDays())}}]),t}(f["default"].Component);b.propTypes=p,b.defaultProps=h,n["default"]=b,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"calendar-base":void 0,classnames:void 0}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.ReactEventCalendar=e()}}(function(){return function e(t,n,r){function a(o,s){if(!n[o]){if(!t[o]){var l="function"==typeof require&&require;if(!s&&l)return l(o,!0);if(i)return i(o,!0);var u=new Error("Cannot find module '"+o+"'");throw u.code="MODULE_NOT_FOUND",u}var d=n[o]={exports:{}};t[o][0].call(d.exports,function(e){var n=t[o][1][e];return a(n?n:e)},d,d.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)a(r[o]);return a}({1:[function(e,t,n){(function(r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}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(n,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=function(e,t,n){for(var r=!0;r;){var a=e,i=t,o=n;s=u=l=void 0,r=!1,null===a&&(a=Function.prototype);var s=Object.getOwnPropertyDescriptor(a,i);if(void 0!==s){if("value"in s)return s.value;var l=s.get;return void 0===l?void 0:l.call(o)}var u=Object.getPrototypeOf(a);if(null===u)return void 0;e=u,t=i,n=o,r=!0}},u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,f=a(d),c=e("calendar-base"),v=e("classnames"),y=a(v),p={events:f["default"].PropTypes.array,month:f["default"].PropTypes.number.isRequired,year:f["default"].PropTypes.number.isRequired,onEventClick:f["default"].PropTypes.func,onEventMouseOver:f["default"].PropTypes.func},h={daysOfTheWeek:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],events:[]},b=function(e){function t(e){i(this,t),l(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.getCalendarDays=this.getCalendarDays.bind(this),this.getDaysWithEvents=this.getDaysWithEvents.bind(this),this.getEventMeta=this.getEventMeta.bind(this)}return o(t,e),s(t,[{key:"componentWillMount",value:function(){this.calendar=new c.Calendar({siblingMonths:!0})}},{key:"getCalendarDays",value:function(){return this.calendar.getCalendar(this.props.year,this.props.month).map(function(e){return e.eventSlots=Array(3).fill(!1),e})}},{key:"getEventMeta",value:function(e,t,n){var r=this.calendar.isDateSelected(t),a=this.calendar.isDateSelected(n),i=e[0],o=e[e.length-1],s={isVisibleInView:!1,visibleEventLength:e.length,firstVisibleDayIndex:r?c.Calendar.interval(i,t)-1:0};return r||a?s.isVisibleInView=!0:t.month<this.props.month&&n.month>this.props.month&&(s.isVisibleInView=!0),r&&a?s.visibleEventLength=c.Calendar.interval(t,n):!r&&a?s.visibleEventLength=c.Calendar.interval(i,n):r&&!a&&(s.visibleEventLength=c.Calendar.interval(t,o)),s}},{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 r=e.getCalendarDayObject(n.start),a=e.getCalendarDayObject(n.end),i=e.getEventMeta(t,r,a);if(i.isVisibleInView)for(var o=i.visibleEventLength,s=t[i.firstVisibleDayIndex].eventSlots.indexOf(!1),l=0;o>l;){var d=u({},n);0===l?d.isFirstDay=!0:l===o-1?d.isLastDay=!0:d.isBetweenDay=!0,t[i.firstVisibleDayIndex+l].eventSlots[s]=d,l++}}),t}},{key:"getCalendarDayObject",value:function(e){var t=e.split("-");return{year:t[0],month:t[1],day:t[2]}}},{key:"renderDaysOfTheWeek",value:function(){return this.props.daysOfTheWeek.map(function(e){return f["default"].createElement("div",{className:"flexColumn"},e)})}},{key:"renderEvent",value:function(e,t,n){var r=e.isFirstDay||0===t.weekDay,a=y["default"]({"event-slot":!0,event:!0,"event-first-day":e.isFirstDay,"event-last-day":e.isLastDay,"event-has-label":r}),i=[t.month,t.day,n].join("_");return f["default"].createElement("div",{className:a,ref:i,onClick:this.props.onEventClick.bind(null,i,e),onMouseOver:this.props.onEventMouseOver.bind(null,i,e),onMouseOut:this.props.onEventMouseOut.bind(null,i,e)},e.title)}},{key:"renderEvents",value:function(e){var t=this,n=f["default"].createElement("div",{className:"event-slot"}," ");return e.eventSlots.map(function(r,a){return r?t.renderEvent(r,e,a):n})}},{key:"renderCalendarDays",value:function(){var e=this;return this.getDaysWithEvents().map(function(t){var n=y["default"]({flexColumn:!0,day:!0,inactive:t.siblingMonth});return f["default"].createElement("div",{className:n},f["default"].createElement("div",{className:"inner-grid"},f["default"].createElement("div",{className:"date"},t.day),e.renderEvents(t)))})}},{key:"render",value:function(){return f["default"].createElement("div",{className:"flexContainer"},this.renderDaysOfTheWeek(),this.renderCalendarDays())}}]),t}(f["default"].Component);b.propTypes=p,b.defaultProps=h,n["default"]=b,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"calendar-base":void 0,classnames:void 0}]},{},[1])(1)});

example/src/example.js

 var React = require('react');
 var EventCalendar = require('react-event-calendar');
 
+import moment from 'moment';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Button from 'react-bootstrap/lib/Button';
+import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
+import Popover from 'react-bootstrap/lib/PopOver';
+import Overlay from 'react-bootstrap/lib/Overlay';
+
+const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December', ];
+
 const events = [
@@ -8,3 +19,4 @@ {
         end: '2015-01-20',
-        title: 'Invalid Event',
+        title: 'Jan Event',
+        description: 'This is a test description of an event',
     },
@@ -27,2 +39,3 @@ {
         title: '2 weeks',
+        description: 'This is a test description of an event',
     },
@@ -33,2 +46,3 @@ {
         title: 'multi-month ',
+        description: 'This is a test description of an event',
     },
@@ -39,21 +53,127 @@ {
         title: '3 events',
+        description: 'This is a test description of an event',
     },
 ];
 
-var App = React.createClass({
-	render () {
+class App extends React.Component {
+
+    constructor() {
+        super();
+
+        this.getState = this.getState.bind(this);
+        this.getHumanDate = this.getHumanDate.bind(this);
+        this.handleNextMonth = this.handleNextMonth.bind(this);
+        this.handlePreviousMonth = this.handlePreviousMonth.bind(this);
+        this.handleToday = this.handleToday.bind(this);
+        this.handleEventClick = this.handleEventClick.bind(this);
+        this.handleEventMouseOver = this.handleEventMouseOver.bind(this);
+        this.handleEventMouseOut = this.handleEventMouseOut.bind(this);
+
+        this.state = {
+            moment: moment(),
+            showPopover: false,
+            popoverTitle: null,
+            popoverContent: null,
+            popoverTarget: null,
+        };
+    }
+
+    handleNextMonth() {
+        this.setState({
+            moment: this.state.moment.add(1, 'M'),
+        });
+    }
+
+    handlePreviousMonth() {
+        this.setState({
+            moment: this.state.moment.subtract(1, 'M'),
+        });
+    }
+
+    handleToday() {
+        this.setState({
+            moment: moment(),
+        });
+    }
+
+    handleEventMouseOver(ref, data) {
+        this.setState({
+            showPopover: true,
+            popoverTarget: props => React.findDOMNode(this.refs.eventCalendar.refs[ref]),
+            popoverTitle: data.title,
+            popoverContent: data.description,
+        });
+    }
+
+     handleEventMouseOut() {
+        this.setState({
+            showPopover: false,
+        });
+     }
+
+    handleEventClick() {
+        alert('Maybe you want to go somewhere!')
+    }
+
+    getState(now) {
+        return {
+            moment: now,
+        };
+    }
+
+    getHumanDate() {
+        return [moment.months('MM', this.state.moment.month()), this.state.moment.year(), ].join(' ');
+    }
+
+	render() {
+
+        const styles = {
+            position: "relative"
+        }
+
 		return (
-			<div>
-				<EventCalendar
-                    month={7}
-                    year={2015}
-                    events={events}
-                    onEventClick={()=>console.log('click')}
-                    onEventMouseOver={()=>console.log('hover')}
-                    />
-			</div>
+            <div style={styles}>
+            <Overlay 
+                show={this.state.showPopover}
+                rootClose={true} 
+                onHide = {()=>this.setState({showPopover: false})}
+                placement="top" 
+                container={this} 
+                target={this.state.popoverTarget}>
+              <Popover title={this.state.popoverTitle}>{this.state.popoverContent}</Popover>
+            </Overlay>
+                <Row>
+                    <Col xs={6}>
+                        <ButtonToolbar>
+                            <Button onClick={this.handlePreviousMonth}>&lt;</Button>
+                            <Button onClick={this.handleNextMonth}>&gt;</Button>
+                            <Button onClick={this.handleToday}>Today</Button>
+                        </ButtonToolbar>
+                    </Col>
+                     <Col xs={6}>
+                        <div className='pull-right h2'>{this.getHumanDate()}</div>
+                     </Col>
+                </Row>
+                <br />
+                <Row>
+                    <Col xs={12}>
+                        <EventCalendar
+                            ref="eventCalendar"
+                            month={this.state.moment.month()}
+                            year={this.state.moment.year()}
+                            events={events}
+                            onEventClick={this.handleEventClick}
+                            onEventMouseOver={this.handleEventMouseOver}
+                            onEventMouseOut={this.handleEventMouseOut}
+
+                            />
+                    </Col>
+                </Row>
+            </div>
 		);
 	}
-});
+}
 
+export default App;
+
 React.render(<App />, document.getElementById('app'));

lib/ReactEventCalendar.js

@@ -52,6 +52,2 @@ 'use strict';
 
-        this.state = {
-            days: []
-        };
-
         // Bind methods
@@ -67,5 +63,2 @@ this.getCalendarDays = this.getCalendarDays.bind(this);
             this.calendar = new _calendarBase.Calendar({ siblingMonths: true });
-            this.setState({
-                days: this.getDaysWithEvents()
-            });
         }
@@ -191,3 +184,3 @@ }, {
         key: 'renderEvent',
-        value: function renderEvent(eventData, day) {
+        value: function renderEvent(eventData, day, index) {
             var showLabel = eventData.isFirstDay || day.weekDay === 0;
@@ -203,7 +196,12 @@
 
+            // Generate a dynamic ref
+            var ref = [day.month, day.day, index].join('_');
+
             return _react2['default'].createElement(
                 'div',
                 { className: eventClasses,
-                    onClick: this.props.onEventClick,
-                    onMouseOver: this.props.onEventMouseOver },
+                    ref: ref,
+                    onClick: this.props.onEventClick.bind(null, ref, eventData),
+                    onMouseOver: this.props.onEventMouseOver.bind(null, ref, eventData),
+                    onMouseOut: this.props.onEventMouseOut.bind(null, ref, eventData) },
                 eventData.title
@@ -222,4 +220,4 @@ );
             );
-            return day.eventSlots.map(function (eventData) {
-                return eventData ? _this2.renderEvent(eventData, day) : placeholder;
+            return day.eventSlots.map(function (eventData, index) {
+                return eventData ? _this2.renderEvent(eventData, day, index) : placeholder;
             });
@@ -232,3 +230,3 @@ }
 
-            return this.state.days.map(function (day) {
+            return this.getDaysWithEvents().map(function (day) {
 
@@ -235,0 +233,0 @@ var dayClasses = (0, _classnames2['default'])({

package.json

 {
   "name": "react-event-calendar",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "react-event-calendar",
@@ -24,3 +24,5 @@ "main": "lib/ReactEventCalendar.js",
     "gulp": "^3.9.0",
+    "moment": "^2.10.6",
     "react": ">=0.13.3",
+    "react-bootstrap": "^0.25.1",
     "react-component-gulp-tasks": "^0.7.0"
@@ -27,0 +29,0 @@ },

src/ReactEventCalendar.js

@@ -32,6 +32,2 @@ import React from 'react';
 
-        this.state = {
-            days: [],
-        };
-
         // Bind methods
@@ -45,5 +41,2 @@ this.getCalendarDays = this.getCalendarDays.bind(this);
         this.calendar = new Calendar({siblingMonths: true, });
-        this.setState({
-            days: this.getDaysWithEvents(),
-        });
     }
@@ -161,3 +154,3 @@
 
-    renderEvent(eventData, day) {
+    renderEvent(eventData, day, index) {
         const showLabel = eventData.isFirstDay || day.weekDay === 0;
@@ -173,7 +166,11 @@
 
+        // Generate a dynamic ref
+        const ref = [day.month, day.day, index].join('_');
 
         return (
             <div className={eventClasses}
-                onClick={this.props.onEventClick}
-                onMouseOver={this.props.onEventMouseOver}>
+                ref={ref}
+                onClick={this.props.onEventClick.bind(null, ref, eventData)}
+                onMouseOver={this.props.onEventMouseOver.bind(null, ref, eventData)}
+                onMouseOut={this.props.onEventMouseOut.bind(null, ref, eventData)}>
                 {eventData.title}
@@ -186,4 +183,4 @@ </div>
         const placeholder = <div className="event-slot">&nbsp;</div>;
-        return day.eventSlots.map((eventData) => {
-            return (eventData) ? this.renderEvent(eventData, day) : placeholder;
+        return day.eventSlots.map((eventData, index) => {
+            return (eventData) ? this.renderEvent(eventData, day, index) : placeholder;
         });
@@ -194,3 +191,3 @@ }
 
-        return this.state.days.map((day) => {
+        return this.getDaysWithEvents().map((day) => {
 
@@ -197,0 +194,0 @@ const dayClasses = classnames({

No alert changes

Improved metrics

Total package byte prevSize

53222

increased by8.48%

Lines of code

930

increased by11.51%

Worsened metrics

Dev dependency count

8

increased by33.33%

No dependency changes