react-event-calendar - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/react-event-calendar.js

@@ -58,2 +58,7 @@ (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.getEventMeta = this.getEventMeta.bind(this);
+        this.getToday = this.getToday.bind(this);
+
+        this.state = {
+            today: this.getToday()
+        };
     }
@@ -67,2 +72,12 @@
     }, {
+        key: 'getToday',
+        value: function getToday() {
+            var today = new Date();
+            return {
+                day: today.getDate(),
+                month: today.getMonth(),
+                year: today.getFullYear()
+            };
+        }
+    }, {
         key: 'getCalendarDays',
@@ -169,3 +184,4 @@ value: function getCalendarDays() {
                 year: dateArray[0],
-                month: dateArray[1],
+                // Subtract 1 from month to allow for human declared months
+                month: dateArray[1] - 1,
                 day: dateArray[2]
@@ -235,3 +251,4 @@ };
                     'day': true,
-                    'inactive': day.siblingMonth
+                    'inactive': day.siblingMonth,
+                    'today': _calendarBase.Calendar.interval(day, _this3.state.today) === 1
                 });
@@ -238,0 +255,0 @@

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(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)});
+!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,a){function r(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 r(n?n:e)},d,d.exports,e,t,n,a)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<a.length;o++)r(a[o]);return r}({1:[function(e,t,n){(function(a){"use strict";function r(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 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=function(e,t,n){for(var a=!0;a;){var r=e,i=t,o=n;s=u=l=void 0,a=!1,null===r&&(r=Function.prototype);var s=Object.getOwnPropertyDescriptor(r,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(r);if(null===u)return void 0;e=u,t=i,n=o,a=!0}},u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},d="undefined"!=typeof window?window.React:"undefined"!=typeof a?a.React:null,f=r(d),c=e("calendar-base"),v=e("classnames"),y=r(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),this.getToday=this.getToday.bind(this),this.state={today:this.getToday()}}return o(t,e),s(t,[{key:"componentWillMount",value:function(){this.calendar=new c.Calendar({siblingMonths:!0})}},{key:"getToday",value:function(){var e=new Date;return{day:e.getDate(),month:e.getMonth(),year:e.getFullYear()}}},{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 a=this.calendar.isDateSelected(t),r=this.calendar.isDateSelected(n),i=e[0],o=e[e.length-1],s={isVisibleInView:!1,visibleEventLength:e.length,firstVisibleDayIndex:a?c.Calendar.interval(i,t)-1:0};return a||r?s.isVisibleInView=!0:t.month<this.props.month&&n.month>this.props.month&&(s.isVisibleInView=!0),a&&r?s.visibleEventLength=c.Calendar.interval(t,n):!a&&r?s.visibleEventLength=c.Calendar.interval(i,n):a&&!r&&(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 a=e.getCalendarDayObject(n.start),r=e.getCalendarDayObject(n.end),i=e.getEventMeta(t,a,r);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]-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 a=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":a}),i=[t.month,t.day,n].join("_");return f["default"].createElement("div",{className:r,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(a,r){return a?t.renderEvent(a,e,r):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,today:1===c.Calendar.interval(t,e.state.today)});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

@@ -98,3 +98,3 @@ var React = require('react');
             showPopover: true,
-            popoverTarget: props => React.findDOMNode(this.refs.eventCalendar.refs[ref]),
+            popoverTarget: () => React.findDOMNode(this.refs.eventCalendar.refs[ref]),
             popoverTitle: data.title,
@@ -111,3 +111,3 @@ popoverContent: data.description,
 
-    handleEventClick() {
+    handleEventClick(ref, data) {
         alert('Maybe you want to go somewhere!')
@@ -129,13 +129,13 @@ }
         const styles = {
-            position: "relative"
-        }
+            position: 'relative',
+        };
 
 		return (
             <div style={styles}>
-            <Overlay 
+            <Overlay
                 show={this.state.showPopover}
-                rootClose={true} 
-                onHide = {()=>this.setState({showPopover: false})}
-                placement="top" 
-                container={this} 
+                rootClose={true}
+                onHide = {()=>this.setState({showPopover: false, })}
+                placement="top"
+                container={this}
                 target={this.state.popoverTarget}>
@@ -142,0 +142,0 @@ <Popover title={this.state.popoverTitle}>{this.state.popoverContent}</Popover>

lib/ReactEventCalendar.js

@@ -56,2 +56,7 @@ 'use strict';
         this.getEventMeta = this.getEventMeta.bind(this);
+        this.getToday = this.getToday.bind(this);
+
+        this.state = {
+            today: this.getToday()
+        };
     }
@@ -65,2 +70,12 @@
     }, {
+        key: 'getToday',
+        value: function getToday() {
+            var today = new Date();
+            return {
+                day: today.getDate(),
+                month: today.getMonth(),
+                year: today.getFullYear()
+            };
+        }
+    }, {
         key: 'getCalendarDays',
@@ -167,3 +182,4 @@ value: function getCalendarDays() {
                 year: dateArray[0],
-                month: dateArray[1],
+                // Subtract 1 from month to allow for human declared months
+                month: dateArray[1] - 1,
                 day: dateArray[2]
@@ -233,3 +249,4 @@ };
                     'day': true,
-                    'inactive': day.siblingMonth
+                    'inactive': day.siblingMonth,
+                    'today': _calendarBase.Calendar.interval(day, _this3.state.today) === 1
                 });
@@ -236,0 +253,0 @@

package.json

 {
   "name": "react-event-calendar",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "react-event-calendar",
@@ -5,0 +5,0 @@ "main": "lib/ReactEventCalendar.js",

README.md

 # react-event-calendar
+A Calendar component that will display supplied events in a given month. 
 
-Coming Soon... a much better description than this!
-
-
 ## Demo & Examples
@@ -36,3 +34,3 @@
 ```
-const ReactEventCalendar = require('react-event-calendar');
+const EventCalendar = require('react-event-calendar');
 
@@ -46,9 +44,16 @@ const events = [
     },
+    {
+        start: '2015-07-19',
+        end: '2015-07-25',
+        title: 'test event',
+        description: 'This is a test description of an event',
+        data: 'you can add what ever random data you may want to use later',
+    },
 ];
 
-<ReactEventCalendar 
-    events={events}
+<EventCalendar 
     month={7}
     year={2015}
-    events={events} />
+    events={events} 
+    onEventClick={(ref, eventData) => console.log(eventData)/>
 ```
@@ -58,11 +63,16 @@
 
-* ```events```:```Array``` Array of event objects to be represented on the calendar
-* ```month```: ```Integer``` Selected Month to display
-* ```year```: ```Integer``` Selected Year to display
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| events | array | Array of event objects to be represented on the calendar |
+| month | int | Selected Month to display |
+| year | int | Selected Year to display |
+| onEventClick | func | Callback for user click on any event node |
+| onEventMouseOver | func | Callback for user mouse over on any event node |
+| onEventMouseOut | func | Callback for user mouse out on any event node |
 
-### Notes
+### Polyfills Required
+Requires Array.prototype.find() and Array.prototype.some().  
+Please include ES6 Array polyfill for unsupported browsers.
 
-Requires Array.prototype.find and Arra.prototype.some.  Please include ES6 Array polyfill for unsupported browsers.
 
-
 ## Development (`src`, `lib` and the build process)
@@ -69,0 +79,0 @@

src/ReactEventCalendar.js

@@ -36,2 +36,7 @@ import React from 'react';
         this.getEventMeta = this.getEventMeta.bind(this);
+        this.getToday = this.getToday.bind(this);
+
+        this.state = {
+            today: this.getToday(),
+        };
     }
@@ -43,2 +48,11 @@
 
+    getToday() {
+        var today = new Date();
+        return {
+            day: today.getDate(),
+            month: today.getMonth(),
+            year: today.getFullYear(),
+        };
+    }
+
     getCalendarDays() {
@@ -139,3 +153,4 @@ return this.calendar.getCalendar(this.props.year, this.props.month).map((day) => {
             year: dateArray[0],
-            month: dateArray[1],
+            // Subtract 1 from month to allow for human declared months
+            month: dateArray[1] - 1,
             day: dateArray[2],
@@ -195,2 +210,3 @@ };
                 'inactive': day.siblingMonth,
+                'today': Calendar.interval(day, this.state.today) === 1,
             });
@@ -197,0 +213,0 @@

No alert changes

Improved metrics

Total package byte prevSize

55721

increased by4.7%

Lines of code

979

increased by5.27%

Number of lines in readme file

87

increased by12.99%

No dependency changes