react-calendar - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

demo.js

@@ -53,4 +53,5 @@ import moment from 'moment';
                     {
-                      date: moment().add(3, 'days'),
-                      classNames: [ 'event' ],
+                      startDate: moment().add(3, 'days'),
+                      endDate: moment().add(7, 'days'),
+                      classNames: [ 'longEvent' ],
                       component: [ 'day' ]
@@ -83,3 +84,3 @@ },
                   ]
-                  } />
+                } />
       </div>
@@ -86,0 +87,0 @@ );

dist/react-calendar.js

@@ -187,3 +187,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    value: function getMonthRange() {
-	      var focus = this.moment(this.props.date).startOf('month');
+	      var focus = this.moment(this.props.date || this.props.startDate).startOf('month');
 	      var start = this.moment(this.props.startDate);
@@ -311,3 +311,3 @@ var end = this.moment(this.props.endDate);
 
-	"use strict";
+	'use strict';
 
@@ -318,2 +318,4 @@ Object.defineProperty(exports, "__esModule", {
 
+	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -324,2 +326,4 @@
 
+	  if (!events) return null;
+
 	  Object.keys(events).forEach(function (key) {
@@ -334,6 +338,9 @@ return boundEvents[key] = events[key].bind(null, date);
 	  return !mods || !mods.classNames ? null : mods.classNames.map(function (cls) {
-	    return clsPrefix + "--" + cls;
+	    return clsPrefix + '--' + cls;
 	  });
 	};
 
+	/**
+	  * Internal: Creates a single modifier object for a date
+	  */
 	var getModByDate = function getModByDate(mods, date, type) {
@@ -352,3 +359,3 @@ var modifier = {
 	    modifier.date = _mod.date;
-	    modifier.events = Object.assign(modifier.events, _mod.events);
+	    modifier.events = _mod.events;
 	    (_modifier$classNames = modifier.classNames).push.apply(_modifier$classNames, _toConsumableArray(_mod.classNames));
@@ -360,2 +367,34 @@ });
 
+	var getModsWithDateRange = function getModsWithDateRange(mods) {
+	  return mods.filter(function (mod) {
+	    return !!mod.startDate;
+	  });
+	};
+
+	var explodeDateRanges = function explodeDateRanges(mods) {
+	  return mods.map(function (mod) {
+	    var diff = mod.endDate.diff(mod.startDate, 'days');
+
+	    if (!diff) {
+	      // if the diff is 0 just return the mod
+	      mod.date = mod.startDate.clone();
+	      return mod;
+	    }
+
+	    return Array(diff).fill(mod).map(function (mod, i) {
+	      return _extends({}, mod, {
+	        date: mod.startDate.clone().add(i, 'days')
+	      });
+	    });
+	  }).reduce(function (a, b) {
+	    return a.concat(b);
+	  }, []);
+	};
+
+	var getModsWithSingleDate = function getModsWithSingleDate(mods) {
+	  return mods.filter(function (mod) {
+	    return !mod.startDate && mod.date;
+	  });
+	};
+
 	var getModsWithoutDate = function getModsWithoutDate(mods) {
@@ -380,4 +419,4 @@ return mods.filter(function (mod) {
 	  var events = {};
-
-	  var mod = getModByDate(mods, date, type);
+	  var exploded = explodeDateRanges(getModsWithDateRange(mods));
+	  var mod = getModByDate([].concat(_toConsumableArray(mods), _toConsumableArray(exploded)), date, type);
 	  var clsMods = getClsMods(clsPrefix, mod) || [];
@@ -448,2 +487,6 @@ var clsCompMods = getClsMods(clsPrefix, getModsWithoutDate(mods)) || [];
 	var renderHeader = function renderHeader(props) {
+	  if (props.renderHeader) {
+	    return props.renderHeader(props);
+	  }
+
 	  if (!props.monthNames) {
@@ -650,2 +693,20 @@ return null;
 
+	var renderWeekHeader = function renderWeekHeader(props) {
+	  if (!props.weekHeader) {
+	    return null;
+	  }
+
+	  return _react2.default.createElement(
+	    'div',
+	    { className: clsPrefix + '-weekdays' },
+	    (0, _dateUtils.daysOfWeek)(props.date).map(function (weekday, i) {
+	      return _react2.default.createElement(
+	        'div',
+	        { key: 'weekday-header-' + i, className: (0, _classnames2.default)(clsPrefix + '-weekdays-weekday') },
+	        weekday.format(props.weekdayFormat)
+	      );
+	    })
+	  );
+	};
+
 	var Week = function Week(props) {
@@ -672,2 +733,3 @@ var mods = props.mods;
 	    _extends({ key: 'days', className: (0, _classnames2.default)(clsPrefix, clsMods) }, events),
+	    renderWeekHeader(props),
 	    makeWeekNumber(props),
@@ -693,9 +755,13 @@ _react2.default.createElement(
 	Week.propTypes = {
+	  weekHeader: _react.PropTypes.bool,
 	  weekNumbers: _react.PropTypes.bool,
-	  weekNumberFormat: _react.PropTypes.string
+	  weekNumberFormat: _react.PropTypes.string,
+	  weekdayFormat: _react.PropTypes.string
 	};
 
 	Week.defaultProps = {
+	  weekHeader: false,
 	  weekNumbers: false,
-	  weekNumberFormat: 'w'
+	  weekNumberFormat: 'w',
+	  weekdayFormat: 'dd'
 	};
@@ -702,0 +768,0 @@

package.json

 {
   "name": "react-calendar",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "Mikhail <[e-mail]> Novikov",
@@ -5,0 +5,0 @@ "description": "Calendar component for ReactJS",

README.md

@@ -39,4 +39,4 @@ react-calendar
 
-Each component can be used separately AND passed to other components to modify
-rendering.
+Each component can be used separately ~~AND passed to other components to modify
+rendering.~~ We have deprecated this in favor of passing a more flexible modifier object.
 
@@ -43,0 +43,0 @@ ```html

src/Calendar.js

@@ -44,3 +44,3 @@ import React, { Component, PropTypes } from 'react';
   getMonthRange () {
-    const focus = this.moment(this.props.date).startOf('month');
+    const focus = this.moment(this.props.date || this.props.startDate).startOf('month');
     const start = this.moment(this.props.startDate);
@@ -47,0 +47,0 @@ const end = this.moment(this.props.endDate);

src/Month.js

@@ -26,2 +26,6 @@ import React, { PropTypes } from 'react';
 const renderHeader = (props) => {
+  if (props.renderHeader) {
+    return props.renderHeader(props);
+  }
+
   if (!props.monthNames) {
@@ -36,3 +40,3 @@ return null;
   );
-}
+};
 
@@ -39,0 +43,0 @@ const Month = (props) => {

src/util.js

 const bindEvents = (events, date) => {
   const boundEvents = {};
 
+  if (!events) return null;
+
   Object.keys(events)
@@ -13,2 +15,5 @@ .forEach((key) => boundEvents[key] = events[key].bind(null, date));
 
+/**
+  * Internal: Creates a single modifier object for a date
+  */
 const getModByDate = (mods, date, type) => {
@@ -24,3 +29,3 @@ const modifier = {
       modifier.date = _mod.date;
-      modifier.events = Object.assign(modifier.events, _mod.events);
+      modifier.events = _mod.events;
       modifier.classNames.push(..._mod.classNames);
@@ -32,2 +37,27 @@ });
 
+const getModsWithDateRange = (mods) =>
+  mods.filter((mod) => !!mod.startDate)
+
+const explodeDateRanges = (mods) => {
+  return mods.map((mod) => {
+    const diff = mod.endDate.diff(mod.startDate, 'days');
+
+    if (!diff) { // if the diff is 0 just return the mod
+      mod.date = mod.startDate.clone();
+      return mod;
+    }
+
+    return Array(diff).fill(mod).map((mod, i) => {
+      return {
+        ...mod,
+        date: mod.startDate.clone().add(i, 'days')
+      }
+    });
+  })
+  .reduce((a, b) => a.concat(b), []);
+}
+
+const getModsWithSingleDate = (mods) =>
+  mods.filter((mod) => !mod.startDate && mod.date)
+
 const getModsWithoutDate = (mods) =>
@@ -45,4 +75,4 @@ mods.filter((mod) => !mod.date)
   const events = {};
-
-  const mod = getModByDate(mods, date, type);
+  const exploded = explodeDateRanges(getModsWithDateRange(mods));
+  const mod = getModByDate([ ...mods, ...exploded ], date, type);
   const clsMods = getClsMods(clsPrefix, mod) || [];
@@ -49,0 +79,0 @@ const clsCompMods = getClsMods(clsPrefix, getModsWithoutDate(mods)) || [];

src/Week.js

@@ -20,4 +20,22 @@ import React, { PropTypes } from 'react';
   );
-}
+};
 
+const renderWeekHeader = (props) => {
+  if (!props.weekHeader) {
+    return null;
+  }
+
+  return (
+    <div className={`${clsPrefix}-weekdays`}>
+      {
+        daysOfWeek(props.date).map((weekday, i) =>
+          <div key={ `weekday-header-${i}` } className={ classnames(`${clsPrefix}-weekdays-weekday`) }>
+            { weekday.format(props.weekdayFormat) }
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
 const Week = (props) => {
@@ -41,2 +59,3 @@ const { mods, date } = props;
     <div key="days" className={ classnames(clsPrefix, clsMods) } { ...events }>
+      { renderWeekHeader(props) }
       { makeWeekNumber(props) }
@@ -61,11 +80,15 @@ <div className={ classnames(`${clsPrefix}-days`) }>
 Week.propTypes = {
+  weekHeader: PropTypes.bool,
   weekNumbers: PropTypes.bool,
-  weekNumberFormat: PropTypes.string
+  weekNumberFormat: PropTypes.string,
+  weekdayFormat: PropTypes.string,
 };
 
 Week.defaultProps = {
+  weekHeader: false,
   weekNumbers: false,
-  weekNumberFormat: 'w'
+  weekNumberFormat: 'w',
+  weekdayFormat: 'dd',
 };
 
 export default Week;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55408

increased by7.14%

Lines of code

1296

increased by9%

No dependency changes