Socket
Socket
Sign inDemoInstall

react-big-calendar

Package Overview
Dependencies
Maintainers
2
Versions
177
Alerts
File Explorer

Advanced tools

npm Scripts
License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.20.4 to 0.21.0

lib/addons/dragAndDrop/styles.scss
lib/sass/agenda.scss
lib/sass/event.scss
lib/sass/month.scss
lib/sass/reset.scss
lib/sass/styles.scss
lib/sass/time-column.scss
lib/sass/time-grid.scss
lib/sass/toolbar.scss
lib/sass/variables.scss

28

CHANGELOG.md

@@ -0,1 +1,29 @@

# [0.21.0](https://github.com/intljusticemission/react-big-calendar/compare/v0.20.4...v0.21.0) (2019-05-14)
### Bug Fixes
* prevent un/mounting of date components ([#1276](https://github.com/intljusticemission/react-big-calendar/issues/1276)) ([3c25009](https://github.com/intljusticemission/react-big-calendar/commit/3c25009)), closes [/github.com/intljusticemission/react-big-calendar/blob/master/src/DateContentRow.js#L121](https://github.com//github.com/intljusticemission/react-big-calendar/blob/master/src/DateContentRow.js/issues/L121)
* support point-in-time events in the Agenda view ([#1246](https://github.com/intljusticemission/react-big-calendar/issues/1246)) ([58c39c3](https://github.com/intljusticemission/react-big-calendar/commit/58c39c3))
* TimeGrid display on DST change days when min is after the transition ([#1303](https://github.com/intljusticemission/react-big-calendar/issues/1303)) ([b436017](https://github.com/intljusticemission/react-big-calendar/commit/b436017)), closes [#1098](https://github.com/intljusticemission/react-big-calendar/issues/1098) [#1273](https://github.com/intljusticemission/react-big-calendar/issues/1273)
* update time indicator position if min prop changes ([#1311](https://github.com/intljusticemission/react-big-calendar/issues/1311)) ([97ea841](https://github.com/intljusticemission/react-big-calendar/commit/97ea841))
* use React.createRef instead of string refs ([#1282](https://github.com/intljusticemission/react-big-calendar/issues/1282)) ([239f0a3](https://github.com/intljusticemission/react-big-calendar/commit/239f0a3))
### Features
* **dnd:** add onDropFromOutside prop for Dnd Cal ([#1290](https://github.com/intljusticemission/react-big-calendar/issues/1290)) ([b9fdce4](https://github.com/intljusticemission/react-big-calendar/commit/b9fdce4)), closes [#1090](https://github.com/intljusticemission/react-big-calendar/issues/1090)
* **dnd:** implement callback on initializing drag or resize action ([#1206](https://github.com/intljusticemission/react-big-calendar/issues/1206)) ([0fa2c30](https://github.com/intljusticemission/react-big-calendar/commit/0fa2c30)), closes [#1205](https://github.com/intljusticemission/react-big-calendar/issues/1205)
* add resource to handleDropFromOutside ([#1319](https://github.com/intljusticemission/react-big-calendar/issues/1319)) ([2b7ad2a](https://github.com/intljusticemission/react-big-calendar/commit/2b7ad2a))
* switch to Sass for styles ([884bece](https://github.com/intljusticemission/react-big-calendar/commit/884bece))
### BREAKING CHANGES
* Less files have been replaced with Sass versions
## [0.20.4](https://github.com/intljusticemission/react-big-calendar/compare/v0.20.3...v0.20.4) (2019-03-21)

@@ -2,0 +30,0 @@

51

lib/addons/dragAndDrop/EventContainerWrapper.js

@@ -12,6 +12,6 @@ "use strict";

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _propTypes = _interopRequireDefault(require("prop-types"));

@@ -82,4 +82,21 @@

_this.handleDropFromOutside = function (point, boundaryBox) {
var _this$props2 = _this.props,
slotMetrics = _this$props2.slotMetrics,
resource = _this$props2.resource;
var start = slotMetrics.closestSlotFromPoint({
y: point.y,
x: point.x
}, boundaryBox);
_this.context.draggable.onDropFromOutside({
start: start,
end: slotMetrics.nextSlot(start),
allDay: false,
resource: resource
});
};
_this._selectable = function () {
var node = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
var node = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));
var selector = _this._selector = new _Selection.default(function () {

@@ -106,2 +123,9 @@ return node.closest('.rbc-time-view');

});
selector.on('dropFromOutside', function (point) {
if (!_this.context.draggable.onDropFromOutside) return;
var bounds = (0, _Selection.getBoundsForNode)(node);
if (!pointInColumn(bounds, point)) return;
_this.handleDropFromOutside(point, bounds);
});
selector.on('selectStart', function () {

@@ -192,5 +216,5 @@ return _this.context.draggable.onStart();

var start, end;
var _this$props2 = this.props,
accessors = _this$props2.accessors,
slotMetrics = _this$props2.slotMetrics;
var _this$props3 = this.props,
accessors = _this$props3.accessors,
slotMetrics = _this$props3.slotMetrics;
var _this$context$draggab = this.context.draggable.dragAndDropAction,

@@ -213,9 +237,9 @@ event = _this$context$draggab.event,

_proto.render = function render() {
var _this$props3 = this.props,
children = _this$props3.children,
accessors = _this$props3.accessors,
components = _this$props3.components,
getters = _this$props3.getters,
slotMetrics = _this$props3.slotMetrics,
localizer = _this$props3.localizer;
var _this$props4 = this.props,
children = _this$props4.children,
accessors = _this$props4.accessors,
components = _this$props4.components,
getters = _this$props4.getters,
slotMetrics = _this$props4.slotMetrics,
localizer = _this$props4.localizer;
var _this$state = this.state,

@@ -266,2 +290,3 @@ event = _this$state.event,

onEnd: _propTypes.default.func,
onDropFromOutside: _propTypes.default.func,
onBeginAction: _propTypes.default.func,

@@ -268,0 +293,0 @@ dragAndDropAction: _propTypes.default.object

26

lib/addons/dragAndDrop/WeekWrapper.js

@@ -12,6 +12,6 @@ "use strict";

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _propTypes = _interopRequireDefault(require("prop-types"));

@@ -89,4 +89,16 @@

_this.handleDropFromOutside = function (point, rowBox) {
if (!_this.context.draggable.onDropFromOutside) return;
var metrics = _this.props.slotMetrics;
var start = metrics.getDateForSlot((0, _selection.getSlotAtX)(rowBox, point.x, false, metrics.slots));
_this.context.draggable.onDropFromOutside({
start: start,
end: _dates.default.add(start, 1, 'day'),
allDay: false
});
};
_this._selectable = function () {
var node = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this))).closest('.rbc-month-row, .rbc-allday-cell');
var node = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this)).closest('.rbc-month-row, .rbc-allday-cell');
var container = node.closest('.rbc-month-view, .rbc-time-view');

@@ -116,2 +128,9 @@ var selector = _this._selector = new _Selection.default(function () {

});
selector.on('dropFromOutside', function (point) {
if (!_this.context.draggable.onDropFromOutside) return;
var bounds = (0, _Selection.getBoundsForNode)(node);
if (!(0, _selection.pointInBox)(bounds, point)) return;
_this.handleDropFromOutside(point, bounds);
});
selector.on('click', function () {

@@ -254,2 +273,3 @@ return _this.context.draggable.onEnd(null);

dragAndDropAction: _propTypes.default.object,
onDropFromOutside: _propTypes.default.func,
onBeginAction: _propTypes.default.func

@@ -256,0 +276,0 @@ })

49

lib/addons/dragAndDrop/withDragAndDrop.js

@@ -45,4 +45,4 @@ "use strict";

*
* The HOC adds `onEventDrop` and `onEventResize` callback properties if the events are
* moved or resized. They are called with these signatures:
* The HOC adds `onEventDrop`, `onEventResize`, and `onDragStart` callback properties if the events are
* moved or resized. These callbacks are called with these signatures:
*

@@ -52,2 +52,3 @@ * ```js

* function onEventResize(type, { event, start, end, allDay }) {...} // type is always 'drop'
* function onDragStart({ event, action, direction }) {...}
* ```

@@ -69,2 +70,19 @@ *

*
* Additionally, this HOC adds the callback props `onDropFromOutside` and `onDragOver`.
* By default, the calendar will not respond to outside draggable items being dropped
* onto it. However, if `onDropFromOutside` callback is passed, then when draggable
* DOM elements are dropped on the calendar, the callback will fire, receiving an
* object with start and end times, and an allDay boolean.
*
* If `onDropFromOutside` is passed, but `onDragOver` is not, any draggable event will be
* droppable onto the calendar by default. On the other hand, if an `onDragOver` callback
* *is* passed, then it can discriminate as to whether a draggable item is droppable on the
* calendar. To designate a draggable item as droppable, call `event.preventDefault`
* inside `onDragOver`. If `event.preventDefault` is not called in the `onDragOver`
* callback, then the draggable item will not be droppable on the calendar.
*
* * ```js
* function onDropFromOutside({ start, end, allDay }) {...}
* function onDragOver(DragEvent: event) {...}
* ```
* @param {*} Calendar

@@ -88,3 +106,9 @@ * @param {*} backend

_this.defaultOnDragOver = function (event) {
event.preventDefault();
};
_this.handleBeginAction = function (event, action, direction) {
var onDragStart = _this.props.onDragStart;
_this.setState({

@@ -95,2 +119,10 @@ event: event,

});
if (onDragStart) {
onDragStart({
event: event,
action: action,
direction: direction
});
}
};

@@ -143,2 +175,3 @@

onBeginAction: this.handleBeginAction,
onDropFromOutside: this.props.onDropFromOutside,
draggableAccessor: this.props.draggableAccessor,

@@ -154,3 +187,4 @@ resizableAccessor: this.props.resizableAccessor,

selectable = _this$props.selectable,
props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["selectable"]);
elementProps = _this$props.elementProps,
props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["selectable", "elementProps"]);
var interacting = this.state.interacting;

@@ -160,4 +194,8 @@ delete props.onEventDrop;

props.selectable = selectable ? 'ignoreEvents' : false;
var elementPropsWithDropFromOutside = this.props.onDropFromOutside ? (0, _extends2.default)({}, elementProps, {
onDragOver: this.props.onDragOver || this.defaultOnDragOver
}) : elementProps;
props.className = (0, _classnames.default)(props.className, 'rbc-addons-dnd', !!interacting && 'rbc-addons-dnd-is-dragging');
return _react.default.createElement(Calendar, (0, _extends2.default)({}, props, {
elementProps: elementPropsWithDropFromOutside,
components: this.components

@@ -185,2 +223,3 @@ }));

onBeginAction: _propTypes.default.func,
onDropFromOutside: _propTypes.default.fun,
draggableAccessor: _propTypes2.accessor,

@@ -194,2 +233,5 @@ resizableAccessor: _propTypes2.accessor,

onEventResize: _propTypes.default.func,
onDragStart: _propTypes.default.func,
onDragOver: _propTypes.default.func,
onDropFromOutside: _propTypes.default.func,
draggableAccessor: _propTypes2.accessor,

@@ -200,2 +242,3 @@ resizableAccessor: _propTypes2.accessor,

components: _propTypes.default.object,
elementProps: _propTypes.default.object,
step: _propTypes.default.number

@@ -202,0 +245,0 @@ } : {};

39

lib/Agenda.js

@@ -33,11 +33,7 @@ "use strict";

function Agenda() {
function Agenda(props) {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call(this, props) || this;
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this.renderDay = function (day, events, dayKey) {

@@ -95,3 +91,5 @@ var _this$props = _this.props,

if (!accessors.allDay(event)) {
if (_dates.default.eq(start, end, 'day')) {
if (_dates.default.eq(start, end)) {
label = localizer.format(start, 'agendaTimeFormat');
} else if (_dates.default.eq(start, end, 'day')) {
label = localizer.format({

@@ -120,7 +118,7 @@ start: start,

_this._adjustHeader = function () {
if (!_this.refs.tbody) return;
var header = _this.refs.header;
var firstRow = _this.refs.tbody.firstChild;
if (!_this.tbodyRef.current) return;
var header = _this.headerRef.current;
var firstRow = _this.tbodyRef.current.firstChild;
if (!firstRow) return;
var isOverflowing = _this.refs.content.scrollHeight > _this.refs.content.clientHeight;
var isOverflowing = _this.contentRef.current.scrollHeight > _this.contentRef.current.clientHeight;
var widths = _this._widths || [];

@@ -130,4 +128,4 @@ _this._widths = [(0, _width.default)(firstRow.children[0]), (0, _width.default)(firstRow.children[1])];

if (widths[0] !== _this._widths[0] || widths[1] !== _this._widths[1]) {
_this.refs.dateCol.style.width = _this._widths[0] + 'px';
_this.refs.timeCol.style.width = _this._widths[1] + 'px';
_this.dateColRef.current.style.width = _this._widths[0] + 'px';
_this.timeColRef.current.style.width = _this._widths[1] + 'px';
}

@@ -144,2 +142,7 @@

_this.headerRef = _react.default.createRef();
_this.dateColRef = _react.default.createRef();
_this.timeColRef = _react.default.createRef();
_this.contentRef = _react.default.createRef();
_this.tbodyRef = _react.default.createRef();
return _this;

@@ -182,10 +185,10 @@ }

}, events.length !== 0 ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("table", {
ref: "header",
ref: this.headerRef,
className: "rbc-agenda-table"
}, _react.default.createElement("thead", null, _react.default.createElement("tr", null, _react.default.createElement("th", {
className: "rbc-header",
ref: "dateCol"
ref: this.dateColRef
}, messages.date), _react.default.createElement("th", {
className: "rbc-header",
ref: "timeCol"
ref: this.timeColRef
}, messages.time), _react.default.createElement("th", {

@@ -195,7 +198,7 @@ className: "rbc-header"

className: "rbc-agenda-content",
ref: "content"
ref: this.contentRef
}, _react.default.createElement("table", {
className: "rbc-agenda-table"
}, _react.default.createElement("tbody", {
ref: "tbody"
ref: this.tbodyRef
}, range.map(function (day, idx) {

@@ -202,0 +205,0 @@ return _this2.renderDay(day, events, idx);

9

lib/Calendar.js

@@ -326,5 +326,3 @@ "use strict";

localizer: localizer
}), _react.default.createElement(View, (0, _extends2.default)({
ref: "view"
}, props, {
}), _react.default.createElement(View, (0, _extends2.default)({}, props, {
events: events,

@@ -347,3 +345,3 @@ date: current,

})));
};
}
/**

@@ -358,4 +356,4 @@ *

*/
;
return Calendar;

@@ -1010,2 +1008,3 @@ }(_react.default.Component);

timeGutterHeader: _propTypes2.elementType,
resourceHeader: _propTypes2.elementType,
toolbar: _propTypes2.elementType,

@@ -1012,0 +1011,0 @@ agenda: _propTypes.default.shape({

12

lib/DateContentRow.js

@@ -12,6 +12,6 @@ "use strict";

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _classnames = _interopRequireDefault(require("classnames"));

@@ -60,3 +60,3 @@

_this.handleShowMore = function (slot) {
_this.handleShowMore = function (slot, target) {
var _this$props2 = _this.props,

@@ -68,7 +68,7 @@ range = _this$props2.range,

var row = (0, _querySelectorAll.default)((0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this))), '.rbc-row-bg')[0];
var row = (0, _querySelectorAll.default)((0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this)), '.rbc-row-bg')[0];
var cell;
if (row) cell = row.children[slot - 1];
var events = metrics.getEventsForSlot(slot);
onShowMore(events, range[slot - 1], cell, slot);
onShowMore(events, range[slot - 1], cell, slot, target);
};

@@ -86,3 +86,3 @@

var container = _this.props.container;
return container ? container() : (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
return container ? container() : (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));
};

@@ -89,0 +89,0 @@

16

lib/DayColumn.js

@@ -14,6 +14,6 @@ "use strict";

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _propTypes = _interopRequireDefault(require("prop-types"));

@@ -74,3 +74,3 @@

var _assertThisInitialize = (0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)),
var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
slotMetrics = _assertThisInitialize.slotMetrics;

@@ -124,5 +124,5 @@

_this._selectable = function () {
var node = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
var node = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));
var selector = _this._selector = new _Selection.default(function () {
return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));
}, {

@@ -168,3 +168,3 @@ longPressThreshold: _this.props.longPressThreshold

var selectorClicksHandler = function selectorClicksHandler(box, actionType) {
if (!(0, _Selection.isEvent)((0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this))), box)) {
if (!(0, _Selection.isEvent)((0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this)), box)) {
var _selectionState = selectionState(box),

@@ -191,3 +191,3 @@ startDate = _selectionState.startDate,

if (_this.props.selectable !== 'ignoreEvents') return;
return !(0, _Selection.isEvent)((0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this))), box);
return !(0, _Selection.isEvent)((0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this)), box);
});

@@ -306,2 +306,4 @@ selector.on('click', function (box) {

}
} else if (this.props.isNow && !_dates.default.eq(prevProps.min, this.props.min, 'minutes')) {
this.positionTimeIndicator();
}

@@ -308,0 +310,0 @@ };

2

lib/EventEndingRow.js

@@ -120,3 +120,3 @@ "use strict";

e.preventDefault();
this.props.onShowMore(slot);
this.props.onShowMore(slot, e.target);
};

@@ -123,0 +123,0 @@

62

lib/Month.js

@@ -12,6 +12,6 @@ "use strict";

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _propTypes = _interopRequireDefault(require("prop-types"));

@@ -39,3 +39,3 @@

var _Overlay = _interopRequireDefault(require("react-overlays/lib/Overlay"));
var _Overlay = _interopRequireDefault(require("react-overlays/Overlay"));

@@ -71,3 +71,3 @@ var _DateContentRow = _interopRequireDefault(require("./DateContentRow"));

_this.getContainer = function () {
return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));
};

@@ -96,3 +96,3 @@

key: weekIdx,
ref: weekIdx === 0 ? 'slotRow' : undefined,
ref: weekIdx === 0 ? _this.slotRowRef : undefined,
container: _this.getContainer,

@@ -187,3 +187,3 @@ className: "rbc-month-row",

_this.handleShowMore = function (events, date, cell, slot) {
_this.handleShowMore = function (events, date, cell, slot, target) {
var _this$props3 = _this.props,

@@ -198,3 +198,3 @@ popup = _this$props3.popup,

if (popup) {
var position = (0, _position.default)(cell, (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this))));
var position = (0, _position.default)(cell, (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this)));

@@ -205,3 +205,4 @@ _this.setState({

events: events,
position: position
position: position,
target: target
}

@@ -218,2 +219,3 @@ });

_this._pendingSelection = [];
_this.slotRowRef = _react.default.createRef();
_this.state = {

@@ -231,3 +233,3 @@ rowLimit: 5,

this.setState({
needLimitMeasure: !_dates.default.eq(date, this.props.date)
needLimitMeasure: !_dates.default.eq(date, this.props.date, 'month')
});

@@ -317,16 +319,22 @@ };

});
},
target: function target() {
return overlay.target;
}
}, _react.default.createElement(_Popup.default, {
accessors: accessors,
getters: getters,
selected: selected,
components: components,
localizer: localizer,
position: overlay.position,
events: overlay.events,
slotStart: overlay.date,
slotEnd: overlay.end,
onSelect: this.handleSelectEvent,
onDoubleClick: this.handleDoubleClickEvent
}));
}, function (_ref3) {
var props = _ref3.props;
return _react.default.createElement(_Popup.default, (0, _extends2.default)({}, props, {
accessors: accessors,
getters: getters,
selected: selected,
components: components,
localizer: localizer,
position: overlay.position,
events: overlay.events,
slotStart: overlay.date,
slotEnd: overlay.end,
onSelect: _this3.handleSelectEvent,
onDoubleClick: _this3.handleDoubleClickEvent
}));
});
};

@@ -337,3 +345,3 @@

needLimitMeasure: false,
rowLimit: this.refs.slotRow.getRowLimit()
rowLimit: this.slotRowRef.current.getRowLimit()
});

@@ -398,4 +406,4 @@ };

MonthView.range = function (date, _ref3) {
var localizer = _ref3.localizer;
MonthView.range = function (date, _ref4) {
var localizer = _ref4.localizer;

@@ -425,4 +433,4 @@ var start = _dates.default.firstVisibleDay(date, localizer);

MonthView.title = function (date, _ref4) {
var localizer = _ref4.localizer;
MonthView.title = function (date, _ref5) {
var localizer = _ref5.localizer;
return localizer.format(date, 'monthHeaderFormat');

@@ -429,0 +437,0 @@ };

57

lib/Popup.js
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

@@ -8,2 +10,4 @@

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

@@ -13,3 +17,3 @@

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));

@@ -40,5 +44,7 @@ var _offset = _interopRequireDefault(require("dom-helpers/query/offset"));

_proto.componentDidMount = function componentDidMount() {
var _this$props$popupOffs = this.props.popupOffset,
var _this$props = this.props,
_this$props$popupOffs = _this$props.popupOffset,
popupOffset = _this$props$popupOffs === void 0 ? 5 : _this$props$popupOffs,
_getOffset = (0, _offset.default)(this.refs.root),
popperRef = _this$props.popperRef,
_getOffset = (0, _offset.default)(popperRef.current),
top = _getOffset.top,

@@ -65,13 +71,14 @@ left = _getOffset.left,

_proto.render = function render() {
var _this$props = this.props,
events = _this$props.events,
selected = _this$props.selected,
getters = _this$props.getters,
accessors = _this$props.accessors,
components = _this$props.components,
onSelect = _this$props.onSelect,
onDoubleClick = _this$props.onDoubleClick,
slotStart = _this$props.slotStart,
slotEnd = _this$props.slotEnd,
localizer = _this$props.localizer;
var _this$props2 = this.props,
events = _this$props2.events,
selected = _this$props2.selected,
getters = _this$props2.getters,
accessors = _this$props2.accessors,
components = _this$props2.components,
onSelect = _this$props2.onSelect,
onDoubleClick = _this$props2.onDoubleClick,
slotStart = _this$props2.slotStart,
slotEnd = _this$props2.slotEnd,
localizer = _this$props2.localizer,
popperRef = _this$props2.popperRef;
var _this$props$position = this.props.position,

@@ -89,5 +96,5 @@ left = _this$props$position.left,

return _react.default.createElement("div", {
ref: "root",
style: style,
className: "rbc-overlay"
className: "rbc-overlay",
ref: popperRef
}, _react.default.createElement("div", {

@@ -130,6 +137,20 @@ className: "rbc-overlay-header"

slotStart: _propTypes.default.instanceOf(Date),
slotEnd: _propTypes.default.number
slotEnd: _propTypes.default.number,
popperRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
current: _propTypes.default.instanceOf(_react.Element)
})])
/**
* The Overlay component, of react-overlays, creates a ref that is passed to the Popup, and
* requires proper ref forwarding to be used without error
*/
} : {};
var _default = Popup;
var _default = _react.default.forwardRef(function (props, ref) {
return _react.default.createElement(Popup, (0, _extends2.default)({
popperRef: ref
}, props));
});
exports.default = _default;
module.exports = exports["default"];

58

lib/Selection.js

@@ -84,3 +84,4 @@ "use strict";

this._handleTerminatingEvent = this._handleTerminatingEvent.bind(this);
this._keyListener = this._keyListener.bind(this); // Fixes an iOS 10 bug where scrolling could not be prevented on the window.
this._keyListener = this._keyListener.bind(this);
this._dropFromOutsideListener = this._dropFromOutsideListener.bind(this); // Fixes an iOS 10 bug where scrolling could not be prevented on the window.
// https://github.com/metafizzy/flickity/issues/457#issuecomment-254501356

@@ -91,2 +92,3 @@

this._onKeyUpListener = addEventListener('keyup', this._keyListener);
this._onDropFromOutsideListener = addEventListener('drop', this._dropFromOutsideListener);

@@ -144,6 +146,6 @@ this._addInitialEventListener();

return items.filter(this.isSelected, this);
}; // Adds a listener that will call the handler only after the user has pressed on the screen
} // Adds a listener that will call the handler only after the user has pressed on the screen
// without moving their finger for 250ms.
;
_proto._addLongPressListener = function _addLongPressListener(handler, initialEvent) {

@@ -199,6 +201,6 @@ var _this = this;

};
}; // Listen for mousedown and touchstart events. When one is received, disable the other and setup
} // Listen for mousedown and touchstart events. When one is received, disable the other and setup
// future event handling based on the type of event.
;
_proto._addInitialEventListener = function _addInitialEventListener() {

@@ -227,9 +229,25 @@ var _this2 = this;

_proto._handleInitialEvent = function _handleInitialEvent(e) {
_proto._dropFromOutsideListener = function _dropFromOutsideListener(e) {
var _getEventCoordinates = getEventCoordinates(e),
pageX = _getEventCoordinates.pageX,
pageY = _getEventCoordinates.pageY,
clientX = _getEventCoordinates.clientX,
clientY = _getEventCoordinates.clientY,
pageX = _getEventCoordinates.pageX,
pageY = _getEventCoordinates.pageY;
clientY = _getEventCoordinates.clientY;
this.emit('dropFromOutside', {
x: pageX,
y: pageY,
clientX: clientX,
clientY: clientY
});
e.preventDefault();
};
_proto._handleInitialEvent = function _handleInitialEvent(e) {
var _getEventCoordinates2 = getEventCoordinates(e),
clientX = _getEventCoordinates2.clientX,
clientY = _getEventCoordinates2.clientY,
pageX = _getEventCoordinates2.pageX,
pageY = _getEventCoordinates2.pageY;
var node = this.container(),

@@ -290,5 +308,5 @@ collides,

_proto._handleTerminatingEvent = function _handleTerminatingEvent(e) {
var _getEventCoordinates2 = getEventCoordinates(e),
pageX = _getEventCoordinates2.pageX,
pageY = _getEventCoordinates2.pageY;
var _getEventCoordinates3 = getEventCoordinates(e),
pageX = _getEventCoordinates3.pageX,
pageY = _getEventCoordinates3.pageY;

@@ -321,7 +339,7 @@ this.selecting = false;

_proto._handleClickEvent = function _handleClickEvent(e) {
var _getEventCoordinates3 = getEventCoordinates(e),
pageX = _getEventCoordinates3.pageX,
pageY = _getEventCoordinates3.pageY,
clientX = _getEventCoordinates3.clientX,
clientY = _getEventCoordinates3.clientY;
var _getEventCoordinates4 = getEventCoordinates(e),
pageX = _getEventCoordinates4.pageX,
pageY = _getEventCoordinates4.pageY,
clientX = _getEventCoordinates4.clientX,
clientY = _getEventCoordinates4.clientY;

@@ -362,5 +380,5 @@ var now = new Date().getTime();

var _getEventCoordinates4 = getEventCoordinates(e),
pageX = _getEventCoordinates4.pageX,
pageY = _getEventCoordinates4.pageY;
var _getEventCoordinates5 = getEventCoordinates(e),
pageX = _getEventCoordinates5.pageX,
pageY = _getEventCoordinates5.pageY;

@@ -367,0 +385,0 @@ var w = Math.abs(x - pageX);

8

lib/TimeGrid.js

@@ -91,3 +91,4 @@ "use strict";

if (_this._updatingOverflow) return;
var isOverflowing = _this.refs.content.scrollHeight > _this.refs.content.clientHeight;
var content = _this.contentRef.current;
var isOverflowing = content.scrollHeight > content.clientHeight;

@@ -113,2 +114,3 @@ if (_this.state.isOverflowing !== isOverflowing) {

_this.scrollRef = _react.default.createRef();
_this.contentRef = _react.default.createRef();
return _this;

@@ -255,3 +257,3 @@ }

}), _react.default.createElement("div", {
ref: "content",
ref: this.contentRef,
className: "rbc-time-content",

@@ -298,3 +300,3 @@ onScroll: this.handleScroll

if (this._scrollRatio) {
var content = this.refs.content;
var content = this.contentRef.current;
content.scrollTop = content.scrollHeight * this._scrollRatio; // Only do this once

@@ -301,0 +303,0 @@

9

lib/utils/TimeSlots.js

@@ -23,7 +23,10 @@ "use strict";

timeslots = _ref.timeslots;
var key = getKey(start, end, step, timeslots);
var totalMin = 1 + _dates.default.diff(start, end, 'minutes') + getDstOffset(start, end);
var key = getKey(start, end, step, timeslots); // if the start is on a DST-changing day but *after* the moment of DST
// transition we need to add those extra minutes to our minutesFromMidnight
var minutesFromMidnight = _dates.default.diff(_dates.default.startOf(start, 'day'), start, 'minutes');
var daystart = _dates.default.startOf(start, 'day');
var daystartdstoffset = getDstOffset(daystart, start);
var totalMin = 1 + _dates.default.diff(start, end, 'minutes') + getDstOffset(start, end);
var minutesFromMidnight = _dates.default.diff(daystart, start, 'minutes') + daystartdstoffset;
var numGroups = Math.ceil(totalMin / (step * timeslots));

@@ -30,0 +33,0 @@ var numSlots = numGroups * timeslots;

33

package.json
{
"name": "react-big-calendar",
"version": "0.20.4",
"version": "0.21.0",
"description": "Calendar! with events",

@@ -29,10 +29,12 @@ "author": "Jason Quense <monastic.panic@gmail.com>",

"clean:examples": "rimraf examples/static",
"l": "lessc --autoprefix=\"ie >= 10, safari >= 8, last 2 versions\" ",
"less": "npm run l src/less/styles.less ./lib/css/react-big-calendar.css && npm run less-dnd",
"less-dnd": "npm run l src/addons/dragAndDrop/styles.less ./lib/addons/dragAndDrop/styles.css",
"assets": "cpy src/less/* lib/less && npm run assets-addons",
"assets-addons": "cpy addons/**/*.less ../lib/ --cwd=src --parents",
"s": "node-sass src/sass/styles.scss ./lib/css/react-big-calendar.css",
"sass": "npm run s && npm run sass-dnd",
"sass-dnd": "node-sass src/addons/dragAndDrop/styles.scss ./lib/addons/dragAndDrop/styles.css",
"autoprefixer": "postcss --use autoprefixer -b 'ie >= 10, safari >= 8, last 2 versions' < ./lib/css/react-big/calendar.css | postcss --use autoprefixer -b 'ie >= 10, safari >= 8, last 2 versions' < ./lib/addons/dragAndDrop/styles.css",
"build:css": "npm run sass && npm run autoprefixer",
"assets": "cpy src/sass/* lib/sass && npm run assets-addons",
"assets-addons": "cpy addons/**/*.scss ../lib/ --cwd=src --parents",
"build:umd": "BABEL_ENV=esm yarn rollup -c",
"build:cjs": "babel src --out-dir lib",
"build": "yarn clean && yarn build:cjs && yarn build:umd && yarn assets && yarn less",
"build": "yarn clean && yarn build:cjs && yarn build:umd && yarn assets && yarn build:css",
"build:examples": "npm run clean:examples && webpack --config examples/webpack.config.js",

@@ -65,4 +67,4 @@ "examples": "npm run clean:examples && webpack-dev-server --config examples/webpack.config.js --mode development",

"peerDependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0"
"react": "^16.6.1",
"react-dom": "^16.6.1"
},

@@ -73,4 +75,5 @@ "devDependencies": {

"@babel/core": "^7.1.5",
"@storybook/addon-actions": "^4.1.7",
"@storybook/react": "^4.1.7",
"@storybook/addon-actions": "^5.0.11",
"@storybook/react": "^5.0.11",
"autoprefixer": "^9.5.1",
"babel-core": "^7.0.0-bridge.0",

@@ -94,4 +97,2 @@ "babel-eslint": "^10.0.1",

"jest": "^23.6.0",
"less": "^2.7.3",
"less-plugin-autoprefix": "^1.5.1",
"lint-staged": "^8.0.4",

@@ -102,2 +103,5 @@ "markdown-jsx-loader": "^3.0.2",

"mt-changelog": "^0.6.1",
"node-sass": "4.12.0",
"postcss": "^7.0.16",
"postcss-cli": "^6.1.2",
"prettier": "^1.15.1",

@@ -124,2 +128,3 @@ "react": "^16.6.1",

"@babel/runtime": "^7.1.5",
"bootstrap-sass": "^3.4.1",
"classnames": "^2.2.6",

@@ -133,3 +138,3 @@ "date-arithmetic": "^3.0.0",

"prop-types-extra": "^1.1.0",
"react-overlays": "^0.8.3",
"react-overlays": "^1.2.0",
"uncontrollable": "^6.0.0",

@@ -136,0 +141,0 @@ "warning": "^4.0.2"

16

README.md

@@ -14,3 +14,3 @@ # react-big-calendar

Include `react-big-calendar/lib/css/react-big-calendar.css` for styles, and make sure your calendar's container
element has a height, or the calendar won't be visible.
element has a height, or the calendar won't be visible. To provide your own custom styling, see the [Custom Styling](#custom-styling) topic.

@@ -80,4 +80,18 @@ ## Starters

## Custom Styling
Out of the box you can include the compiled css files and be up and running. But, sometimes, you may want to style
Big Calendar to match your application styling. For this reason SASS files are included with Big Calendar.
```
@import 'react-big-calendar/lib/sass/styles';
@import 'react-big-calendar/addons/dragAndDrop/styles'; // if using DnD
```
SASS implementation provides a `variables` file containing color and sizing variables that you can
update to fit your application. _Note:_ Changing and/or overriding styles can cause rendering issues with your
Big Calendar. Carefully test each change accordingly.
## Join us on Reactiflux Discord
Join us on [Reactiflux Discord](https://discord.gg/uJsgpkC) community under the channel #react-big-calendar if you have any questions.
lib/addons/dragAndDrop/styles.less
lib/less/agenda.less
lib/less/event.less
lib/less/month.less
lib/less/reset.less
lib/less/styles.less
lib/less/time-column.less
lib/less/time-grid.less
lib/less/toolbar.less
lib/less/variables.less
dist/react-big-calendar.esm.js

Sorry, the diff of this file is too big to display

dist/react-big-calendar.js

Sorry, the diff of this file is too big to display

dist/react-big-calendar.min.js

Sorry, the diff of this file is too big to display

lib/addons/dragAndDrop/styles.css

Sorry, the diff of this file is not supported yet

lib/css/react-big-calendar.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc