react-calendar
Advanced tools
Comparing version 1.0.3 to 1.0.4
@@ -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 @@ ); |
@@ -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 @@ |
{ | ||
"name": "react-calendar", | ||
"version": "1.0.3", | ||
"version": "1.0.4", | ||
"author": "Mikhail <freiksenet@gmail.com> Novikov", | ||
@@ -5,0 +5,0 @@ "description": "Calendar component for ReactJS", |
@@ -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 |
@@ -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); |
@@ -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) => { |
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)) || []; |
@@ -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; |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
55408
1296