react-big-calendar - npm Package Compare versions

lib/addons/dragAndDrop/DropWrappers.js

lib/addons/dragAndDrop/withDragAndDrop.js

lib/TimeGridHeader.js

lib/TimeGutter.js

lib/utils/DayEventLayout.js

lib/utils/TimeSlots.js

2

CHANGELOG.md

		@@ -0,1 +1,3 @@
		## v0.19.0 - Fri, 23 Mar 2018 17:13:33 GMT

		## v0.18.0 - Wed, 07 Feb 2018 16:14:20 GMT
		@@ -2,0 +4,0 @@

176

lib/addons/dragAndDrop/DraggableEventWrapper.js

		@@ -15,2 +15,4 @@ 'use strict';

		var _reactDndHtml5Backend = require('react-dnd-html5-backend');

		var _classnames = require('classnames');
		@@ -20,2 +22,6 @@

		var _compose = require('./compose');

		var _compose2 = _interopRequireDefault(_compose);

		var _index = require('../../index');
		@@ -33,23 +39,4 @@

		/* drag sources */
		var EventWrapper = _index2.default.components.eventWrapper;

		var eventSource = {
		beginDrag: function beginDrag(props) {
		return props.event;
		}
		};

		function collectSource(connect, monitor) {
		return {
		connectDragSource: connect.dragSource(),
		isDragging: monitor.isDragging()
		};
		}

		var propTypes = {
		connectDragSource: _propTypes2.default.func.isRequired,
		isDragging: _propTypes2.default.bool.isRequired,
		event: _propTypes2.default.object.isRequired
		};

		var DraggableEventWrapper = function (_React$Component) {
		@@ -64,13 +51,90 @@ _inherits(DraggableEventWrapper, _React$Component);

		DraggableEventWrapper.prototype.componentDidMount = function componentDidMount() {
		// this is needed to prevent the backend from
		// screenshot'ing the event during a resize which
		// would be very confusing visually
		var emptyImage = (0, _reactDndHtml5Backend.getEmptyImage)();
		var previewOptions = { captureDraggingState: true };
		this.props.connectTopDragPreview(emptyImage, previewOptions);
		this.props.connectBottomDragPreview(emptyImage, previewOptions);
		this.props.connectLeftDragPreview(emptyImage, previewOptions);
		this.props.connectRightDragPreview(emptyImage, previewOptions);
		};

		DraggableEventWrapper.prototype.render = function render() {
		var _props = this.props,
		connectDragSource = _props.connectDragSource,
		connectTopDragSource = _props.connectTopDragSource,
		connectBottomDragSource = _props.connectBottomDragSource,
		connectLeftDragSource = _props.connectLeftDragSource,
		connectRightDragSource = _props.connectRightDragSource,
		isDragging = _props.isDragging,
		isResizing = _props.isResizing,
		children = _props.children,
		event = _props.event;
		event = _props.event,
		allDay = _props.allDay,
		isRow = _props.isRow,
		continuesPrior = _props.continuesPrior,
		continuesAfter = _props.continuesAfter;

		var EventWrapper = _index2.default.components.eventWrapper;

		var StartAnchor = null,
		EndAnchor = null;

		/*
		* The resizability of events depends on whether they are
		* allDay events and how they are displayed.
		*
		* 1. If the event is being shown in an event row (because
		* it is an allDay event shown in the header row or because as
		* in month view the view is showing all events as rows) then we
		* allow east-west resizing.
		*
		* 2. Otherwise the event is being displayed
		* normally, we can drag it north-south to resize the times.
		*
		* See `DropWrappers` for handling of the drop of such events.
		*
		* Notwithstanding the above, we never show drag anchors for
		* events which continue beyond current component. This happens
		* in the middle of events when showMultiDay is true, and to
		* events at the edges of the calendar's min/max location.
		*/
		if (isRow \|\| allDay) {
		var anchor = _react2.default.createElement(
		'div',
		{ className: 'rbc-addons-dnd-resize-ew-anchor' },
		_react2.default.createElement('div', { className: 'rbc-addons-dnd-resize-ew-icon' })
		);
		StartAnchor = !continuesPrior && connectLeftDragSource(anchor);
		EndAnchor = !continuesAfter && connectRightDragSource(anchor);
		} else {
		var _anchor = _react2.default.createElement(
		'div',
		{ className: 'rbc-addons-dnd-resize-ns-anchor' },
		_react2.default.createElement('div', { className: 'rbc-addons-dnd-resize-ns-icon' })
		);
		StartAnchor = !continuesPrior && connectTopDragSource(_anchor);
		EndAnchor = !continuesAfter && connectBottomDragSource(_anchor);
		}

		/*
		* props.children is the singular <Event> component.
		* BigCalendar positions the Event abolutely and we
		* need the anchors to be part of that positioning.
		* So we insert the anchors inside the Event's children
		* rather than wrap the Event here as the latter approach
		* would lose the positioning.
		*/
		var childrenWithAnchors = _react2.default.createElement(
		'div',
		{ className: 'rbc-addons-dnd-resizable' },
		StartAnchor,
		children.props.children,
		EndAnchor
		);

		children = _react2.default.cloneElement(children, {
		className: (0, _classnames2.default)(children.props.className, isDragging && 'rbc-addons-dnd-dragging')
		className: (0, _classnames2.default)(children.props.className, isDragging && 'rbc-addons-dnd-dragging', isResizing && 'rbc-addons-dnd-resizing'),
		children: childrenWithAnchors // replace original event child with anchor-embellished child
		});
		@@ -80,3 +144,3 @@
		EventWrapper,
		{ event: event },
		{ event: event, allDay: allDay },
		connectDragSource(children)
		@@ -89,5 +153,65 @@ );

		DraggableEventWrapper.propTypes = propTypes;
		/* drag sources */

		exports.default = (0, _reactDnd.DragSource)('event', eventSource, collectSource)(DraggableEventWrapper);

		DraggableEventWrapper.propTypes = {
		event: _propTypes2.default.object.isRequired,

		connectDragSource: _propTypes2.default.func.isRequired,
		connectTopDragPreview: _propTypes2.default.func.isRequired,
		connectTopDragSource: _propTypes2.default.func.isRequired,
		connectBottomDragPreview: _propTypes2.default.func.isRequired,
		connectBottomDragSource: _propTypes2.default.func.isRequired,
		connectLeftDragPreview: _propTypes2.default.func.isRequired,
		connectLeftDragSource: _propTypes2.default.func.isRequired,
		connectRightDragPreview: _propTypes2.default.func.isRequired,
		connectRightDragSource: _propTypes2.default.func.isRequired,

		allDay: _propTypes2.default.bool,
		isRow: _propTypes2.default.bool,
		continuesPrior: _propTypes2.default.bool,
		continuesAfter: _propTypes2.default.bool,
		isDragging: _propTypes2.default.bool,
		isResizing: _propTypes2.default.bool
		};
		var makeEventSource = function makeEventSource(anchor) {
		return {
		beginDrag: function beginDrag(_ref) {
		var event = _ref.event;
		return { event: event, anchor: anchor };
		}
		// canDrag: ({ event }) => event.draggable === undefined \|\| event.draggable - e.g. support per-event dragability/sizability
		};
		};

		exports.default = (0, _compose2.default)((0, _reactDnd.DragSource)('event', makeEventSource('drop'), function (connect, monitor) {
		return {
		connectDragSource: connect.dragSource(),
		isDragging: monitor.isDragging()
		};
		}), (0, _reactDnd.DragSource)('event', makeEventSource('resizeTop'), function (connect, monitor) {
		return {
		connectTopDragSource: connect.dragSource(),
		connectTopDragPreview: connect.dragPreview(),
		isResizing: monitor.isDragging()
		};
		}), (0, _reactDnd.DragSource)('event', makeEventSource('resizeBottom'), function (connect, monitor) {
		return {
		connectBottomDragSource: connect.dragSource(),
		connectBottomDragPreview: connect.dragPreview(),
		isResizing: monitor.isDragging()
		};
		}), (0, _reactDnd.DragSource)('event', makeEventSource('resizeLeft'), function (connect, monitor) {
		return {
		connectLeftDragSource: connect.dragSource(),
		connectLeftDragPreview: connect.dragPreview(),
		isResizing: monitor.isDragging()
		};
		}), (0, _reactDnd.DragSource)('event', makeEventSource('resizeRight'), function (connect, monitor) {
		return {
		connectRightDragSource: connect.dragSource(),
		connectRightDragPreview: connect.dragPreview(),
		isResizing: monitor.isDragging()
		};
		}))(DraggableEventWrapper);
		module.exports = exports['default'];

167

lib/addons/dragAndDrop/index.js

		@@ -5,170 +5,9 @@ 'use strict';

		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; };
		var _withDragAndDrop = require('./withDragAndDrop');

		exports.default = withDragAndDrop;
		var _withDragAndDrop2 = _interopRequireDefault(_withDragAndDrop);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _reactDnd = require('react-dnd');

		var _classnames = require('classnames');

		var _classnames2 = _interopRequireDefault(_classnames);

		var _propTypes3 = require('../../utils/propTypes');

		var _DraggableEventWrapper = require('./DraggableEventWrapper');

		var _DraggableEventWrapper2 = _interopRequireDefault(_DraggableEventWrapper);

		var _ResizableEvent = require('./ResizableEvent');

		var _ResizableEvent2 = _interopRequireDefault(_ResizableEvent);

		var _ResizableMonthEvent = require('./ResizableMonthEvent');

		var _ResizableMonthEvent2 = _interopRequireDefault(_ResizableMonthEvent);

		var _backgroundWrapper = require('./backgroundWrapper');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var html5Backend = void 0;

		try {
		html5Backend = require('react-dnd-html5-backend');
		} catch (err) {
		/* optional dep missing */
		}

		function withDragAndDrop(Calendar) {
		var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
		_ref$backend = _ref.backend,
		backend = _ref$backend === undefined ? html5Backend : _ref$backend;

		var DragAndDropCalendar = function (_React$Component) {
		_inherits(DragAndDropCalendar, _React$Component);

		DragAndDropCalendar.prototype.getChildContext = function getChildContext() {
		return {
		onEventDrop: this.props.onEventDrop,
		onEventResize: this.props.onEventResize,
		startAccessor: this.props.startAccessor,
		endAccessor: this.props.endAccessor
		};
		};

		function DragAndDropCalendar() {
		_classCallCheck(this, DragAndDropCalendar);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		var _this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args)));

		_this.handleStateChange = function () {
		var isDragging = !!_this.monitor.getItem();

		if (isDragging !== _this.state.isDragging) {
		setTimeout(function () {
		return _this.setState({ isDragging: isDragging });
		});
		}
		};

		_this.state = { isDragging: false };
		return _this;
		}

		DragAndDropCalendar.prototype.componentWillMount = function componentWillMount() {
		var monitor = this.context.dragDropManager.getMonitor();
		this.monitor = monitor;
		this.unsubscribeToStateChange = monitor.subscribeToStateChange(this.handleStateChange);
		};

		DragAndDropCalendar.prototype.componentWillUnmount = function componentWillUnmount() {
		this.monitor = null;
		this.unsubscribeToStateChange();
		};

		DragAndDropCalendar.prototype.render = function render() {
		var _props = this.props,
		selectable = _props.selectable,
		components = _props.components,
		resizable = _props.resizable,
		props = _objectWithoutProperties(_props, ['selectable', 'components', 'resizable']);

		delete props.onEventDrop;
		delete props.onEventResize;

		props.selectable = selectable ? 'ignoreEvents' : false;

		props.className = (0, _classnames2.default)(props.className, 'rbc-addons-dnd', this.state.isDragging && 'rbc-addons-dnd-is-dragging');

		props.components = _extends({}, components, {
		dateCellWrapper: _backgroundWrapper.DateCellWrapper,
		day: { event: resizable && _ResizableEvent2.default },
		dayWrapper: _backgroundWrapper.DayWrapper,
		eventWrapper: _DraggableEventWrapper2.default,
		month: { event: resizable && _ResizableMonthEvent2.default },
		week: { event: resizable && _ResizableEvent2.default }
		});

		return _react2.default.createElement(Calendar, props);
		};

		return DragAndDropCalendar;
		}(_react2.default.Component);

		DragAndDropCalendar.propTypes = {
		selectable: _propTypes2.default.oneOf([true, false, 'ignoreEvents']).isRequired,
		components: _propTypes2.default.object
		};


		DragAndDropCalendar.propTypes = {
		onEventDrop: _propTypes2.default.func.isRequired,
		resizable: _propTypes2.default.bool,
		onEventResize: _propTypes2.default.func,
		startAccessor: _propTypes3.accessor,
		endAccessor: _propTypes3.accessor
		};

		DragAndDropCalendar.defaultProps = {
		startAccessor: 'start',
		endAccessor: 'end'
		};

		DragAndDropCalendar.contextTypes = {
		dragDropManager: _propTypes2.default.object
		};

		DragAndDropCalendar.childContextTypes = {
		onEventDrop: _propTypes2.default.func,
		onEventResize: _propTypes2.default.func,
		startAccessor: _propTypes3.accessor,
		endAccessor: _propTypes3.accessor
		};

		if (backend === false) {
		return DragAndDropCalendar;
		} else {
		return (0, _reactDnd.DragDropContext)(backend)(DragAndDropCalendar);
		}
		}
		exports.default = _withDragAndDrop2.default;
		module.exports = exports['default'];

26

lib/Agenda.js

		@@ -211,3 +211,3 @@ 'use strict';
		'table',
		{ ref: 'header' },
		{ ref: 'header', className: 'rbc-agenda-table' },
		_react2.default.createElement(
		@@ -242,3 +242,3 @@ 'thead',
		'table',
		null,
		{ className: 'rbc-agenda-table' },
		_react2.default.createElement(
		@@ -287,6 +287,14 @@ 'tbody',

		Agenda.navigate = function (date, action, _ref2) {
		Agenda.range = function (start, _ref2) {
		var _ref2$length = _ref2.length,
		length = _ref2$length === undefined ? Agenda.defaultProps.length : _ref2$length;

		var end = _dates2.default.add(start, length, 'day');
		return { start: start, end: end };
		};

		Agenda.navigate = function (date, action, _ref3) {
		var _ref3$length = _ref3.length,
		length = _ref3$length === undefined ? Agenda.defaultProps.length : _ref3$length;

		switch (action) {
		@@ -304,15 +312,5 @@ case _constants.navigate.PREVIOUS:

		Agenda.title = function (start, _ref3) {
		var _ref3$length = _ref3.length,
		length = _ref3$length === undefined ? Agenda.defaultProps.length : _ref3$length,
		formats = _ref3.formats,
		culture = _ref3.culture;

		var end = _dates2.default.add(start, length, 'day');
		return _localizer2.default.format({ start: start, end: end }, formats.agendaHeaderFormat, culture);
		};

		Agenda.title = function (start, _ref4) {
		var _ref4$length = _ref4.length,
		length = _ref4$length === undefined ? length = Agenda.defaultProps.length : _ref4$length,
		length = _ref4$length === undefined ? Agenda.defaultProps.length : _ref4$length,
		formats = _ref4.formats,
		@@ -319,0 +317,0 @@ culture = _ref4.culture;

22

lib/BackgroundCells.js

		@@ -25,4 +25,2 @@ 'use strict';

		var _eventLevels = require('./utils/eventLevels');

		var _helpers = require('./utils/helpers');
		@@ -96,7 +94,4 @@
		className = _ref.className,
		dayStyles = _ref.style;
		style = _ref.style;

		var segmStyles = (0, _eventLevels.segStyle)(1, range.length);
		var styles = _extends({}, dayStyles, segmStyles);

		return _react2.default.createElement(
		@@ -106,3 +101,3 @@ Wrapper,
		_react2.default.createElement('div', {
		style: styles,
		style: style,
		className: (0, _classnames2.default)('rbc-day-bg', className, selected && 'rbc-selected-cell', _dates2.default.eq(date, current, 'day') && 'rbc-today', currentDate && _dates2.default.month(currentDate) !== _dates2.default.month(date) && 'rbc-off-range-bg')
		@@ -138,3 +133,4 @@ })
		endIdx: currentCell,
		action: actionType
		action: actionType,
		box: point
		});
		@@ -190,4 +186,4 @@ }

		selector.on('select', function () {
		_this2._selectSlot(_extends({}, _this2.state, { action: 'select' }));
		selector.on('select', function (bounds) {
		_this2._selectSlot(_extends({}, _this2.state, { action: 'select', bounds: bounds }));
		_this2._initial = {};
		@@ -208,3 +204,4 @@ _this2.setState({ selecting: false });
		startIdx = _ref2.startIdx,
		action = _ref2.action;
		action = _ref2.action,
		bounds = _ref2.bounds;

		@@ -214,3 +211,4 @@ if (endIdx !== -1 && startIdx !== -1) this.props.onSelectSlot && this.props.onSelectSlot({
		end: endIdx,
		action: action
		action: action,
		bounds: bounds
		});
		@@ -217,0 +215,0 @@ };

48

lib/Calendar.js

		@@ -27,2 +27,6 @@ 'use strict';

		var _warning = require('warning');

		var _warning2 = _interopRequireDefault(_warning);

		var _helpers = require('./utils/helpers');
		@@ -176,5 +180,3 @@
		_extends({}, elementProps, {
		className: (0, _classnames2.default)('rbc-calendar', className, {
		'rbc-rtl': props.rtl
		}),
		className: (0, _classnames2.default)(className, 'rbc-calendar', props.rtl && 'rbc-is-rtl'),
		style: style
		@@ -410,2 +412,10 @@ }),
		/**
		* Callback fired when the visible date range changes. Returns an Array of dates
		* or an object with start and end dates for BUILTIN views.
		*
		* Cutom views may return something different.
		*/
		onRangeChange: _propTypes2.default.func,

		/**
		* A callback fired when a date selection is made. Only fires when `selectable` is `true`.
		@@ -419,3 +429,17 @@ *
		* slots: Array<Date>,
		* action: "select" \| "click" \| "doubleClick"
		* action: "select" \| "click" \| "doubleClick",
		* bounds: ?{ // For "select" action
		* x: number,
		* y: number,
		* top: number,
		* right: number,
		* left: number,
		* bottom: number,
		* },
		* box: ?{ // For "click" or "doubleClick" actions
		* clientX: number,
		* clientY: number,
		* x: number,
		* y: number,
		* },
		* }
		@@ -892,2 +916,14 @@ * ) => any

		this.handleRangeChange = function (date, view) {
		var onRangeChange = _this2.props.onRangeChange;

		if (onRangeChange) {
		if (view.range) {
		onRangeChange(view.range(date, {}));
		} else {
		process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(true, 'onRangeChange prop not supported for this view') : void 0;
		}
		}
		};

		this.handleNavigate = function (action, newDate) {
		@@ -910,2 +946,3 @@ var _props3 = _this2.props,
		onNavigate(date, view, action);
		_this2.handleRangeChange(date, ViewComponent);
		};
		@@ -917,2 +954,5 @@
		}

		var views = _this2.getViews();
		_this2.handleRangeChange(_this2.props.date, views[view]);
		};
		@@ -919,0 +959,0 @@

46

lib/DateContentRow.js

		@@ -87,5 +87,5 @@ 'use strict';

		dateCellWrapper: _propTypes3.elementType,
		eventComponent: _propTypes3.elementType,
		eventWrapperComponent: _propTypes3.elementType.isRequired,
		dateCellWrapperComponent: _propTypes3.elementType,
		minRows: _propTypes2.default.number.isRequired,
		@@ -104,2 +104,4 @@ maxRows: _propTypes2.default.number.isRequired
		function DateContentRow() {
		var _temp, _this, _ret;

		_classCallCheck(this, DateContentRow);
		@@ -111,5 +113,3 @@

		var _this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args)));

		_this.handleSelectSlot = function (slot) {
		return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.handleSelectSlot = function (slot) {
		var _this$props = _this.props,
		@@ -121,5 +121,3 @@ range = _this$props.range,
		onSelectSlot(range.slice(slot.start, slot.end + 1), slot);
		};

		_this.handleShowMore = function (slot) {
		}, _this.handleShowMore = function (slot) {
		var _this$props2 = _this.props,
		@@ -141,22 +139,13 @@ range = _this$props2.range,
		onShowMore(events, range[slot - 1], cell, slot);
		};

		_this.createHeadingRef = function (r) {
		}, _this.createHeadingRef = function (r) {
		_this.headingRow = r;
		};

		_this.createEventRef = function (r) {
		}, _this.createEventRef = function (r) {
		_this.eventRow = r;
		};

		_this.getContainer = function () {
		}, _this.getContainer = function () {
		var container = _this.props.container;

		return container ? container() : (0, _reactDom.findDOMNode)(_this);
		};

		_this.renderHeadingCell = function (date, index) {
		}, _this.renderHeadingCell = function (date, index) {
		var _this$props3 = _this.props,
		renderHeader = _this$props3.renderHeader,
		range = _this$props3.range,
		getNow = _this$props3.getNow;
		@@ -168,8 +157,5 @@
		key: 'header_' + index,
		style: (0, _eventLevels2.segStyle)(1, range.length),
		className: (0, _classnames2.default)('rbc-date-cell', _dates2.default.eq(date, getNow(), 'day') && 'rbc-now')
		});
		};

		_this.renderDummy = function () {
		}, _this.renderDummy = function () {
		var _this$props4 = _this.props,
		@@ -196,3 +182,3 @@ className = _this$props4.className,
		'div',
		{ className: 'rbc-row-segment', style: (0, _eventLevels2.segStyle)(1, range.length) },
		{ className: 'rbc-row-segment' },
		_react2.default.createElement(
		@@ -211,5 +197,3 @@ 'div',
		);
		};

		return _this;
		}, _temp), _possibleConstructorReturn(_this, _ret);
		}
		@@ -241,3 +225,3 @@
		maxRows = _props.maxRows,
		dateCellWrapper = _props.dateCellWrapper,
		dateCellWrapperComponent = _props.dateCellWrapperComponent,
		eventComponent = _props.eventComponent,
		@@ -248,3 +232,3 @@ eventWrapperComponent = _props.eventWrapperComponent,
		longPressThreshold = _props.longPressThreshold,
		props = _objectWithoutProperties(_props, ['date', 'rtl', 'events', 'range', 'className', 'selectable', 'dayPropGetter', 'renderForMeasure', 'startAccessor', 'endAccessor', 'getNow', 'renderHeader', 'minRows', 'maxRows', 'dateCellWrapper', 'eventComponent', 'eventWrapperComponent', 'onSelectStart', 'onSelectEnd', 'longPressThreshold']);
		props = _objectWithoutProperties(_props, ['date', 'rtl', 'events', 'range', 'className', 'selectable', 'dayPropGetter', 'renderForMeasure', 'startAccessor', 'endAccessor', 'getNow', 'renderHeader', 'minRows', 'maxRows', 'dateCellWrapperComponent', 'eventComponent', 'eventWrapperComponent', 'onSelectStart', 'onSelectEnd', 'longPressThreshold']);

		@@ -284,3 +268,3 @@ if (renderForMeasure) return this.renderDummy();
		onSelectSlot: this.handleSelectSlot,
		cellWrapperComponent: dateCellWrapper,
		cellWrapperComponent: dateCellWrapperComponent,
		longPressThreshold: longPressThreshold
		@@ -287,0 +271,0 @@ }),

11

lib/Day.js

		@@ -53,6 +53,5 @@ 'use strict';

		return _react2.default.createElement(_TimeGrid2.default, _extends({}, props, {
		range: [_dates2.default.startOf(date, 'day')],
		eventOffset: 10
		}));
		var range = Day.range(date);

		return _react2.default.createElement(_TimeGrid2.default, _extends({}, props, { range: range, eventOffset: 10 }));
		};
		@@ -68,2 +67,6 @@

		Day.range = function (date) {
		return [_dates2.default.startOf(date, 'day')];
		};

		Day.navigate = function (date, action) {
		@@ -70,0 +73,0 @@ switch (action) {

191

lib/DayColumn.js

		@@ -29,2 +29,6 @@ 'use strict';

		var _TimeSlots = require('./utils/TimeSlots');

		var TimeSlotUtils = _interopRequireWildcard(_TimeSlots);

		var _selection = require('./utils/selection');
		@@ -42,14 +46,14 @@

		var _dayViewLayout = require('./utils/dayViewLayout');
		var _DayEventLayout = require('./utils/DayEventLayout');

		var _dayViewLayout2 = _interopRequireDefault(_dayViewLayout);
		var DayEventLayout = _interopRequireWildcard(_DayEventLayout);

		var _TimeColumn = require('./TimeColumn');
		var _TimeSlotGroup = require('./TimeSlotGroup');

		var _TimeColumn2 = _interopRequireDefault(_TimeColumn);
		var _TimeSlotGroup2 = _interopRequireDefault(_TimeSlotGroup);

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -61,11 +65,2 @@

		function snapToSlot(date, step) {
		var roundTo = 1000 * 60 * step;
		return new Date(Math.floor(date.getTime() / roundTo) * roundTo);
		}

		function startsAfter(date, max) {
		return _dates2.default.gt(_dates2.default.merge(max, date), max, 'minutes');
		}

		var DayColumn = function (_React$Component) {
		@@ -75,4 +70,2 @@ _inherits(DayColumn, _React$Component);
		function DayColumn() {
		var _temp, _this, _ret;

		_classCallCheck(this, DayColumn);
		@@ -84,3 +77,8 @@

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), _possibleConstructorReturn(_this, _ret);
		var _this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args)));

		_initialiseProps.call(_this);

		_this.slotMetrics = TimeSlotUtils.getSlotMetrics(_this.props);
		return _this;
		}
		@@ -99,2 +97,4 @@
		if (!nextProps.selectable && this.props.selectable) this._teardownSelectable();

		this.slotMetrics = this.slotMetrics.update(nextProps);
		};
		@@ -104,23 +104,22 @@
		var _props = this.props,
		min = _props.min,
		max = _props.max,
		step = _props.step,
		rtl = _props.rtl,
		date = _props.date,
		getNow = _props.getNow,
		selectRangeFormat = _props.selectRangeFormat,
		culture = _props.culture,
		dayPropGetter = _props.dayPropGetter,
		props = _objectWithoutProperties(_props, ['min', 'max', 'step', 'getNow', 'selectRangeFormat', 'culture', 'dayPropGetter']);

		this._totalMin = _dates2.default.diff(min, max, 'minutes');
		slotPropGetter = _props.slotPropGetter,
		resource = _props.resource,
		timeSlotWrapperComponent = _props.timeSlotWrapperComponent,
		dayPropGetter = _props.dayPropGetter;
		var slotMetrics = this.slotMetrics;
		var _state = this.state,
		selecting = _state.selecting,
		startSlot = _state.startSlot,
		endSlot = _state.endSlot;
		top = _state.top,
		height = _state.height,
		startDate = _state.startDate,
		endDate = _state.endDate;

		var slotStyle = this._slotStyle(startSlot, endSlot);

		var selectDates = {
		start: this.state.startDate,
		end: this.state.endDate
		};
		var selectDates = { start: startDate, end: endDate };

		@@ -134,14 +133,19 @@ var _ref = dayPropGetter && dayPropGetter(max) \|\| {},
		return _react2.default.createElement(
		_TimeColumn2.default,
		_extends({}, props, {
		className: (0, _classnames2.default)('rbc-day-slot', className, _dates2.default.eq(max, current, 'day') && 'rbc-today'),
		'div',
		{
		style: style,
		getNow: getNow,
		min: min,
		max: max,
		step: step
		className: (0, _classnames2.default)(className, 'rbc-day-slot', 'rbc-time-column', selecting && 'rbc-slot-selecting', _dates2.default.eq(date, current, 'day') && 'rbc-today')
		},
		slotMetrics.groups.map(function (grp, idx) {
		return _react2.default.createElement(_TimeSlotGroup2.default, {
		key: idx,
		group: grp,
		resource: resource,
		slotPropGetter: slotPropGetter,
		timeSlotWrapperComponent: timeSlotWrapperComponent
		});
		}),
		_react2.default.createElement(
		'div',
		{ className: (0, _classnames2.default)('rbc-events-container', { rtl: this.props.rtl }) },
		{ className: (0, _classnames2.default)('rbc-events-container', rtl && 'rtl') },
		this.renderEvents()
		@@ -151,3 +155,3 @@ ),
		'div',
		{ className: 'rbc-slot-selection', style: slotStyle },
		{ className: 'rbc-slot-selection', style: { top: top, height: height } },
		_react2.default.createElement(
		@@ -169,2 +173,3 @@ 'span',
		step: _propTypes2.default.number.isRequired,
		date: _propTypes2.default.instanceOf(Date).isRequired,
		min: _propTypes2.default.instanceOf(Date).isRequired,
		@@ -204,3 +209,4 @@ max: _propTypes2.default.instanceOf(Date).isRequired,
		dayPropGetter: _propTypes2.default.func,
		dayWrapperComponent: _propTypes3.elementType,
		slotPropGetter: _propTypes2.default.func,
		timeSlotWrapperComponent: _propTypes3.elementType,
		eventComponent: _propTypes3.elementType,
		@@ -236,6 +242,3 @@ eventWrapperComponent: _propTypes3.elementType.isRequired,
		selected = _props2.selected,
		showMultiDayTimes = _props2.showMultiDayTimes,
		startAccessor = _props2.startAccessor,
		step = _props2.step,
		timeslots = _props2.timeslots,
		titleAccessor = _props2.titleAccessor,
		@@ -245,11 +248,7 @@ tooltipAccessor = _props2.tooltipAccessor;

		var styledEvents = (0, _dayViewLayout2.default)({
		var styledEvents = DayEventLayout.getStyledEvents({
		events: events,
		startAccessor: startAccessor,
		endAccessor: endAccessor,
		min: min,
		showMultiDayTimes: showMultiDayTimes,
		totalMin: _this2._totalMin,
		step: step,
		timeslots: timeslots
		slotMetrics: _this2.slotMetrics
		});
		@@ -281,4 +280,4 @@

		var continuesPrior = (0, _dayViewLayout.startsBefore)(start, min);
		var continuesAfter = startsAfter(end, max);
		var continuesPrior = _this2.slotMetrics.startsBefore(start);
		var continuesAfter = _this2.slotMetrics.startsAfter(end);

		@@ -306,5 +305,11 @@ var title = (0, _accessors.accessor)(event, titleAccessor);

		var wrapperProps = {
		event: event,
		continuesPrior: _continuesPrior,
		continuesAfter: _continuesAfter
		};

		return _react2.default.createElement(
		EventWrapper,
		{ event: event, key: 'evt_' + idx },
		_extends({}, wrapperProps, { key: 'evt_' + idx }),
		_react2.default.createElement(
		@@ -347,12 +352,2 @@ 'div',

		this._slotStyle = function (startSlot, endSlot) {
		var top = startSlot / _this2._totalMin * 100;
		var bottom = endSlot / _this2._totalMin * 100;

		return {
		top: top + '%',
		height: bottom - top + '%'
		};
		};

		this._selectable = function () {
		@@ -378,3 +373,5 @@ var node = (0, _reactDom.findDOMNode)(_this2);

		_this2.setState(state);
		if (_this2.state.start !== state.start \|\| _this2.state.end !== state.end \|\| _this2.state.selecting !== state.selecting) {
		_this2.setState(state);
		}
		};
		@@ -384,6 +381,2 @@
		var y = _ref3.y;
		var _props3 = _this2.props,
		step = _props3.step,
		min = _props3.min,
		max = _props3.max;

		@@ -394,31 +387,33 @@ var _getBoundsForNode = (0, _Selection.getBoundsForNode)(node),

		var mins = _this2._totalMin;

		var range = Math.abs(top - bottom);
		var currentSlot = _this2.slotMetrics.closestSlotToPosition((y - top) / range);

		var current = (y - top) / range;
		if (!_this2.state.selecting) _this2._initialSlot = currentSlot;

		current = snapToSlot(minToDate(mins * current, min), step);
		var initialSlot = _this2._initialSlot;
		if (initialSlot === currentSlot) currentSlot = _this2.slotMetrics.nextSlot(initialSlot);

		if (!_this2.state.selecting) _this2._initialDateSlot = current;
		var selectRange = _this2.slotMetrics.getRange(_dates2.default.min(initialSlot, currentSlot), _dates2.default.max(initialSlot, currentSlot));

		var initial = _this2._initialDateSlot;
		return _extends({}, selectRange, {
		selecting: true,

		if (_dates2.default.eq(initial, current, 'minutes')) current = _dates2.default.add(current, step, 'minutes');

		var start = _dates2.default.max(min, _dates2.default.min(initial, current));
		var end = _dates2.default.min(max, _dates2.default.max(initial, current));

		return {
		selecting: true,
		startDate: start,
		endDate: end,
		startSlot: (0, _dayViewLayout.positionFromDate)(start, min, _this2._totalMin),
		endSlot: (0, _dayViewLayout.positionFromDate)(end, min, _this2._totalMin)
		};
		top: selectRange.top + '%',
		height: selectRange.height + '%'
		});
		};

		var selectorClicksHandler = function selectorClicksHandler(box, actionType) {
		if (!(0, _Selection.isEvent)((0, _reactDom.findDOMNode)(_this2), box)) _this2._selectSlot(_extends({}, selectionState(box), { action: actionType }));
		if (!(0, _Selection.isEvent)((0, _reactDom.findDOMNode)(_this2), box)) {
		var _selectionState = selectionState(box),
		startDate = _selectionState.startDate,
		endDate = _selectionState.endDate;

		_this2._selectSlot({
		startDate: startDate,
		endDate: endDate,
		action: actionType,
		box: box
		});
		}
		_this2.setState({ selecting: false });
		@@ -444,5 +439,5 @@ };

		selector.on('select', function () {
		selector.on('select', function (bounds) {
		if (_this2.state.selecting) {
		_this2._selectSlot(_extends({}, _this2.state, { action: 'select' }));
		_this2._selectSlot(_extends({}, _this2.state, { action: 'select', bounds: bounds }));
		_this2.setState({ selecting: false });
		@@ -462,3 +457,5 @@ }
		endDate = _ref4.endDate,
		action = _ref4.action;
		action = _ref4.action,
		bounds = _ref4.bounds,
		box = _ref4.box;

		@@ -478,3 +475,5 @@ var current = startDate,
		resourceId: _this2.props.resource,
		action: action
		action: action,
		bounds: bounds,
		box: box
		});
		@@ -500,13 +499,3 @@ };

		function minToDate(min, date) {
		var dt = new Date(date),
		totalMins = _dates2.default.diff(_dates2.default.startOf(date, 'day'), date, 'minutes');

		dt = _dates2.default.hours(dt, 0);
		dt = _dates2.default.minutes(dt, totalMins + min);
		dt = _dates2.default.seconds(dt, 0);
		return _dates2.default.milliseconds(dt, 0);
		}

		exports.default = DayColumn;
		module.exports = exports['default'];

59

lib/EventCell.js

		@@ -77,2 +77,3 @@ 'use strict';
		tooltipAccessor = _props.tooltipAccessor,
		allDayAccessor = _props.allDayAccessor,
		slotStart = _props.slotStart,
		@@ -84,3 +85,3 @@ slotEnd = _props.slotEnd,
		EventWrapper = _props.eventWrapperComponent,
		props = _objectWithoutProperties(_props, ['className', 'event', 'selected', 'isAllDay', 'eventPropGetter', 'startAccessor', 'endAccessor', 'titleAccessor', 'tooltipAccessor', 'slotStart', 'slotEnd', 'onSelect', 'onDoubleClick', 'eventComponent', 'eventWrapperComponent']);
		props = _objectWithoutProperties(_props, ['className', 'event', 'selected', 'isAllDay', 'eventPropGetter', 'startAccessor', 'endAccessor', 'titleAccessor', 'tooltipAccessor', 'allDayAccessor', 'slotStart', 'slotEnd', 'onSelect', 'onDoubleClick', 'eventComponent', 'eventWrapperComponent']);

		@@ -91,3 +92,4 @@ var title = (0, _accessors.accessor)(event, titleAccessor),
		start = (0, _accessors.accessor)(event, startAccessor),
		isAllDayEvent = isAllDay \|\| (0, _accessors.accessor)(event, props.allDayAccessor) \|\| _dates2.default.diff(start, _dates2.default.ceil(end, 'day'), 'day') > 1,
		allDay = (0, _accessors.accessor)(event, allDayAccessor),
		showAsAllDay = isAllDay \|\| allDay \|\| _dates2.default.diff(start, _dates2.default.ceil(end, 'day'), 'day') > 1,
		continuesPrior = _dates2.default.lt(start, slotStart, 'day'),
		@@ -100,26 +102,37 @@ continuesAfter = _dates2.default.gte(end, slotEnd, 'day');

		return _react2.default.createElement(
		EventWrapper,
		{ event: event },
		var wrapperProps = {
		event: event,
		allDay: allDay,
		continuesPrior: continuesPrior,
		continuesAfter: continuesAfter
		};

		return (
		// give EventWrapper some extra info to help it determine whether it
		// it's in a row, etc. Useful for dnd, etc.
		_react2.default.createElement(
		'div',
		{
		style: _extends({}, props.style, style),
		className: (0, _classnames2.default)('rbc-event', className, xClassName, {
		'rbc-selected': selected,
		'rbc-event-allday': isAllDayEvent,
		'rbc-event-continues-prior': continuesPrior,
		'rbc-event-continues-after': continuesAfter
		}),
		onClick: function onClick(e) {
		return onSelect(event, e);
		},
		onDoubleClick: function onDoubleClick(e) {
		return _onDoubleClick(event, e);
		}
		},
		EventWrapper,
		_extends({}, wrapperProps, { isRow: true }),
		_react2.default.createElement(
		'div',
		{ className: 'rbc-event-content', title: tooltip \|\| undefined },
		Event ? _react2.default.createElement(Event, { event: event, title: title, isAllDay: isAllDayEvent }) : title
		{
		style: _extends({}, props.style, style),
		className: (0, _classnames2.default)('rbc-event', className, xClassName, {
		'rbc-selected': selected,
		'rbc-event-allday': showAsAllDay,
		'rbc-event-continues-prior': continuesPrior,
		'rbc-event-continues-after': continuesAfter
		}),
		onClick: function onClick(e) {
		return onSelect(event, e);
		},
		onDoubleClick: function onDoubleClick(e) {
		return _onDoubleClick(event, e);
		}
		},
		_react2.default.createElement(
		'div',
		{ className: 'rbc-event-content', title: tooltip \|\| undefined },
		Event ? _react2.default.createElement(Event, { event: event, title: title, isAllDay: allDay }) : title
		)
		)
		@@ -126,0 +139,0 @@ )

6

lib/EventEndingRow.js

		@@ -88,6 +88,6 @@ 'use strict';
		if (gap) {
		row.push(_EventRowMixin2.default.renderSpan(this.props, gap, key + '_gap'));
		row.push(_EventRowMixin2.default.renderSpan(slotCount, gap, key + '_gap'));
		}

		row.push(_EventRowMixin2.default.renderSpan(this.props, span, key, content));
		row.push(_EventRowMixin2.default.renderSpan(slotCount, span, key, content));

		@@ -97,3 +97,3 @@ lastEnd = current = right + 1;
		if (gap) {
		row.push(_EventRowMixin2.default.renderSpan(this.props, gap, key + '_gap'));
		row.push(_EventRowMixin2.default.renderSpan(slotCount, gap, key + '_gap'));
		}
		@@ -100,0 +100,0 @@

8

lib/EventRow.js

		@@ -39,3 +39,5 @@ 'use strict';

		var segments = this.props.segments;
		var _props = this.props,
		segments = _props.segments,
		slots = _props.slots;

		@@ -59,5 +61,5 @@

		if (gap) row.push(_EventRowMixin2.default.renderSpan(_this2.props, gap, key + '_gap'));
		if (gap) row.push(_EventRowMixin2.default.renderSpan(slots, gap, key + '_gap'));

		row.push(_EventRowMixin2.default.renderSpan(_this2.props, span, key, content));
		row.push(_EventRowMixin2.default.renderSpan(slots, span, key, content));

		@@ -64,0 +66,0 @@ lastEnd = right + 1;

11

lib/EventRowMixin.js

		@@ -25,4 +25,2 @@ 'use strict';

		var _eventLevels = require('./utils/eventLevels');

		var _selection = require('./utils/selection');
		@@ -95,6 +93,6 @@
		},
		renderSpan: function renderSpan(props, len, key) {
		renderSpan: function renderSpan(slots, len, key) {
		var content = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ' ';
		var slots = props.slots;

		var per = Math.abs(len) / slots * 100 + '%';

		@@ -105,4 +103,5 @@ return _react2.default.createElement(
		key: key,
		className: 'rbc-row-segment',
		style: (0, _eventLevels.segStyle)(Math.abs(len), slots)
		className: 'rbc-row-segment'
		// IE10/11 need max-width. flex-basis doesn't respect box-sizing
		, style: { WebkitFlexBasis: per, flexBasis: per, maxWidth: per }
		},
		@@ -109,0 +108,0 @@ content

4

lib/localizers/moment.js

		@@ -64,3 +64,3 @@ 'use strict';
		end = _ref5.end;
		return local.format(start, 'MMM DD', culture) + ' - ' + local.format(end, _dates2.default.eq(start, end, 'month') ? 'DD' : 'MMM DD', culture);
		return local.format(start, 'MMMM DD', culture) + ' - ' + local.format(end, _dates2.default.eq(start, end, 'month') ? 'DD' : 'MMMM DD', culture);
		};
		@@ -70,3 +70,3 @@
		dateFormat: 'DD',
		dayFormat: 'ddd DD/MM',
		dayFormat: 'DD ddd',
		weekdayFormat: 'ddd',
		@@ -73,0 +73,0 @@

26

lib/Month.js

		@@ -224,3 +224,3 @@ 'use strict';
		'div',
		{ key: 'header_' + idx, className: 'rbc-header', style: (0, _eventLevels.segStyle)(1, 7) },
		{ key: 'header_' + idx, className: 'rbc-header' },
		_react2.default.createElement(HeaderComponent, {
		@@ -365,3 +365,3 @@ date: day,
		eventWrapperComponent: components.eventWrapper,
		dateCellWrapper: components.dateCellWrapper,
		dateCellWrapperComponent: components.dateCellWrapper,
		longPressThreshold: longPressThreshold
		@@ -371,6 +371,6 @@ });

		this.readerDateHeading = function (_ref3) {
		var date = _ref3.date,
		className = _ref3.className,
		props = _objectWithoutProperties(_ref3, ['date', 'className']);
		this.readerDateHeading = function (_ref4) {
		var date = _ref4.date,
		className = _ref4.className,
		props = _objectWithoutProperties(_ref4, ['date', 'className']);

		@@ -464,2 +464,10 @@ var _props3 = _this4.props,

		MonthView.range = function (date, _ref2) {
		var culture = _ref2.culture;

		var start = _dates2.default.firstVisibleDay(date, culture);
		var end = _dates2.default.lastVisibleDay(date, culture);
		return { start: start, end: end };
		};

		MonthView.navigate = function (date, action) {
		@@ -478,5 +486,5 @@ switch (action) {

		MonthView.title = function (date, _ref2) {
		var formats = _ref2.formats,
		culture = _ref2.culture;
		MonthView.title = function (date, _ref3) {
		var formats = _ref3.formats,
		culture = _ref3.culture;
		return _localizer2.default.format(date, formats.monthHeaderFormat, culture);
		@@ -483,0 +491,0 @@ };

452

lib/TimeGrid.js

		@@ -29,6 +29,2 @@ 'use strict';

		var _localizer = require('./localizer');

		var _localizer2 = _interopRequireDefault(_localizer);

		var _DayColumn = require('./DayColumn');
		@@ -38,14 +34,6 @@

		var _TimeColumn = require('./TimeColumn');
		var _TimeGutter = require('./TimeGutter');

		var _TimeColumn2 = _interopRequireDefault(_TimeColumn);
		var _TimeGutter2 = _interopRequireDefault(_TimeGutter);

		var _DateContentRow = require('./DateContentRow');

		var _DateContentRow2 = _interopRequireDefault(_DateContentRow);

		var _Header = require('./Header');

		var _Header2 = _interopRequireDefault(_Header);

		var _width = require('dom-helpers/query/width');
		@@ -55,10 +43,6 @@

		var _scrollbarSize = require('dom-helpers/util/scrollbarSize');
		var _TimeGridHeader = require('./TimeGridHeader');

		var _scrollbarSize2 = _interopRequireDefault(_scrollbarSize);
		var _TimeGridHeader2 = _interopRequireDefault(_TimeGridHeader);

		var _messages = require('./utils/messages');

		var _messages2 = _interopRequireDefault(_messages);

		var _propTypes3 = require('./utils/propTypes');
		@@ -88,2 +72,21 @@

		_this.handleResize = function () {
		_requestAnimationFrame2.default.cancel(_this.rafHandle);
		_this.rafHandle = (0, _requestAnimationFrame2.default)(_this.checkOverflow);
		};

		_this.gutterRef = function (ref) {
		_this.gutter = ref && (0, _reactDom.findDOMNode)(ref);
		};

		_this.handleSelectAlldayEvent = function () {
		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		//cancel any pending selections so only the event click goes through.
		_this.clearSelection();
		(0, _helpers.notify)(_this.props.onSelectEvent, args);
		};

		_this.handleSelectAllDaySlot = function (slots, slotInfo) {
		@@ -114,5 +117,2 @@ var onSelectSlot = _this.props.onSelectSlot;
		_this.state = { gutterWidth: undefined, isOverflowing: null };
		_this.handleSelectEvent = _this.handleSelectEvent.bind(_this);
		_this.handleDoubleClickEvent = _this.handleDoubleClickEvent.bind(_this);
		_this.handleHeaderClick = _this.handleHeaderClick.bind(_this);
		return _this;
		@@ -122,3 +122,2 @@ }
		TimeGrid.prototype.componentWillMount = function componentWillMount() {
		this._gutters = [];
		this.calculateScroll();
		@@ -128,4 +127,2 @@ };
		TimeGrid.prototype.componentDidMount = function componentDidMount() {
		var _this2 = this;

		this.checkOverflow();
		@@ -136,2 +133,3 @@
		}

		this.applyScroll();
		@@ -142,6 +140,3 @@

		window.addEventListener('resize', function () {
		_requestAnimationFrame2.default.cancel(_this2.rafHandle);
		_this2.rafHandle = (0, _requestAnimationFrame2.default)(_this2.checkOverflow);
		});
		window.addEventListener('resize', this.handleResize);
		};
		@@ -151,6 +146,9 @@
		window.clearTimeout(this._timeIndicatorTimeout);
		window.removeEventListener('resize', this.handleResize);

		_requestAnimationFrame2.default.cancel(this.rafHandle);
		};

		TimeGrid.prototype.componentDidUpdate = function componentDidUpdate() {
		if (this.props.width == null && !this.state.gutterWidth) {
		if (this.props.width == null) {
		this.measureGutter();
		@@ -175,17 +173,61 @@ }

		TimeGrid.prototype.render = function render() {
		var _this3 = this;
		TimeGrid.prototype.renderEvents = function renderEvents(range, events, today, resources) {
		var _this2 = this;

		var _props2 = this.props,
		events = _props2.events,
		range = _props2.range,
		width = _props2.width,
		min = _props2.min,
		max = _props2.max,
		endAccessor = _props2.endAccessor,
		startAccessor = _props2.startAccessor,
		endAccessor = _props2.endAccessor,
		getNow = _props2.getNow,
		resources = _props2.resources,
		allDayAccessor = _props2.allDayAccessor,
		showMultiDayTimes = _props2.showMultiDayTimes;
		resourceAccessor = _props2.resourceAccessor,
		resourceIdAccessor = _props2.resourceIdAccessor,
		components = _props2.components;


		return range.map(function (date, idx) {
		var daysEvents = events.filter(function (event) {
		return _dates2.default.inRange(date, (0, _accessors.accessor)(event, startAccessor), (0, _accessors.accessor)(event, endAccessor), 'day');
		});

		return resources.map(function (resource, id) {
		var eventsToDisplay = !resource ? daysEvents : daysEvents.filter(function (event) {
		return (0, _accessors.accessor)(event, resourceAccessor) === (0, _accessors.accessor)(resource, resourceIdAccessor);
		});

		return _react2.default.createElement(_DayColumn2.default, _extends({}, _this2.props, {
		min: _dates2.default.merge(date, min),
		max: _dates2.default.merge(date, max),
		resource: resource && resource.id,
		eventComponent: components.event,
		eventWrapperComponent: components.eventWrapper,
		timeSlotWrapperComponent: components.dayWrapper,
		className: (0, _classnames2.default)({ 'rbc-now': _dates2.default.eq(date, today, 'day') }),
		key: idx + '-' + id,
		date: date,
		events: eventsToDisplay
		}));
		});
		});
		};

		TimeGrid.prototype.render = function render() {
		var _this3 = this,
		_React$createElement;

		var _props3 = this.props,
		events = _props3.events,
		range = _props3.range,
		width = _props3.width,
		startAccessor = _props3.startAccessor,
		endAccessor = _props3.endAccessor,
		selected = _props3.selected,
		getNow = _props3.getNow,
		resources = _props3.resources,
		components = _props3.components,
		allDayAccessor = _props3.allDayAccessor,
		eventPropGetter = _props3.eventPropGetter,
		showMultiDayTimes = _props3.showMultiDayTimes,
		longPressThreshold = _props3.longPressThreshold;


		width = width \|\| this.state.gutterWidth;
		@@ -218,22 +260,44 @@

		var gutterRef = function gutterRef(ref) {
		return _this3._gutters[1] = ref && (0, _reactDom.findDOMNode)(ref);
		};

		var eventsRendered = this.renderEvents(range, rangeEvents, getNow(), resources \|\| [null]);

		return _react2.default.createElement(
		'div',
		{ className: 'rbc-time-view' },
		this.renderHeader(range, allDayEvents, width, resources),
		_react2.default.createElement(_TimeGridHeader2.default, (_React$createElement = {
		range: range,
		events: allDayEvents,
		width: width,
		getNow: getNow,
		dayFormat: this.props.dayFormat,
		culture: this.props.culture,
		resources: resources,
		selected: selected,
		selectable: this.props.selectable,
		startAccessor: startAccessor,
		endAccessor: endAccessor,
		titleAccessor: this.props.titleAccessor,
		tooltipAccessor: this.props.tooltipAccessor,
		allDayAccessor: this.props.allDayAccessor,
		resourceAccessor: this.props.resourceAccessor,
		resourceIdAccessor: this.props.resourceIdAccessor,
		resourceTitleAccessor: this.props.resourceTitleAccessor,
		isOverflowing: this.state.isOverflowing,
		dayPropGetter: this.props.dayPropGetter,
		eventPropGetter: eventPropGetter,
		longPressThreshold: longPressThreshold,
		headerComponent: components.header,
		eventComponent: components.event,
		eventWrapperComponent: components.eventWrapper,
		dateCellWrapperComponent: components.dateCellWrapper,
		onSelectSlot: this.handleSelectAllDaySlot,
		onSelectEvent: this.handleSelectAlldayEvent,
		onDoubleClickEvent: this.props.onDoubleClickEvent
		}, _React$createElement['resourceIdAccessor'] = this.props.resourceIdAccessor, _React$createElement.onDrillDown = this.props.onDrillDown, _React$createElement.getDrilldownView = this.props.getDrilldownView, _React$createElement)),
		_react2.default.createElement(
		'div',
		{ ref: 'content', className: 'rbc-time-content' },
		_react2.default.createElement(_TimeColumn2.default, _extends({}, this.props, {
		showLabels: true,
		style: { width: width },
		ref: gutterRef,
		_react2.default.createElement(_TimeGutter2.default, _extends({}, this.props, {
		date: start,
		ref: this.gutterRef,
		className: 'rbc-time-gutter'
		})),
		eventsRendered,
		this.renderEvents(range, rangeEvents, getNow(), resources \|\| [null]),
		_react2.default.createElement('div', { ref: 'timeIndicator', className: 'rbc-current-time-indicator' })
		@@ -244,236 +308,2 @@ )

		TimeGrid.prototype.renderEvents = function renderEvents(range, events, today, resources) {
		var _this4 = this;

		var _props3 = this.props,
		min = _props3.min,
		max = _props3.max,
		endAccessor = _props3.endAccessor,
		startAccessor = _props3.startAccessor,
		resourceAccessor = _props3.resourceAccessor,
		resourceIdAccessor = _props3.resourceIdAccessor,
		components = _props3.components;


		return range.map(function (date, idx) {
		var daysEvents = events.filter(function (event) {
		return _dates2.default.inRange(date, (0, _accessors.accessor)(event, startAccessor), (0, _accessors.accessor)(event, endAccessor), 'day');
		});

		return resources.map(function (resource, id) {
		var eventsToDisplay = !resource ? daysEvents : daysEvents.filter(function (event) {
		return (0, _accessors.accessor)(event, resourceAccessor) === (0, _accessors.accessor)(resource, resourceIdAccessor);
		});

		return _react2.default.createElement(_DayColumn2.default, _extends({}, _this4.props, {
		min: _dates2.default.merge(date, min),
		max: _dates2.default.merge(date, max),
		resource: resource && resource.id,
		eventComponent: components.event,
		eventWrapperComponent: components.eventWrapper,
		dayWrapperComponent: components.dayWrapper,
		className: (0, _classnames2.default)({ 'rbc-now': _dates2.default.eq(date, today, 'day') }),
		style: (0, _eventLevels.segStyle)(1, _this4.slots),
		key: idx + '-' + id,
		date: date,
		events: eventsToDisplay
		}));
		});
		});
		};

		TimeGrid.prototype.renderHeader = function renderHeader(range, events, width, resources) {
		var _this5 = this;

		var _props4 = this.props,
		messages = _props4.messages,
		rtl = _props4.rtl,
		selectable = _props4.selectable,
		components = _props4.components,
		getNow = _props4.getNow;

		var _ref = this.state \|\| {},
		isOverflowing = _ref.isOverflowing;

		var style = {};
		if (isOverflowing) style[rtl ? 'marginLeft' : 'marginRight'] = (0, _scrollbarSize2.default)() + 'px';

		var headerRendered = resources ? this.renderHeaderResources(range, resources) : (0, _messages2.default)(messages).allDay;

		return _react2.default.createElement(
		'div',
		{
		ref: 'headerCell',
		className: (0, _classnames2.default)('rbc-time-header', isOverflowing && 'rbc-overflowing'),
		style: style
		},
		_react2.default.createElement(
		'div',
		{ className: 'rbc-row' },
		_react2.default.createElement('div', { className: 'rbc-label rbc-header-gutter', style: { width: width } }),
		this.renderHeaderCells(range)
		),
		resources && _react2.default.createElement(
		'div',
		{ className: 'rbc-row rbc-row-resource' },
		_react2.default.createElement('div', { className: 'rbc-label rbc-header-gutter', style: { width: width } }),
		headerRendered
		),
		_react2.default.createElement(
		'div',
		{ className: 'rbc-row' },
		_react2.default.createElement(
		'div',
		{
		ref: function ref(_ref2) {
		return _this5._gutters[0] = _ref2;
		},
		className: 'rbc-label rbc-header-gutter',
		style: { width: width }
		},
		(0, _messages2.default)(messages).allDay
		),
		_react2.default.createElement(_DateContentRow2.default, {
		getNow: getNow,
		minRows: 2,
		range: range,
		rtl: this.props.rtl,
		events: events,
		className: 'rbc-allday-cell',
		selectable: selectable,
		onSelectSlot: this.handleSelectAllDaySlot,
		dateCellWrapper: components.dateCellWrapper,
		dayPropGetter: this.props.dayPropGetter,
		eventComponent: this.props.components.event,
		eventWrapperComponent: this.props.components.eventWrapper,
		titleAccessor: this.props.titleAccessor,
		tooltipAccessor: this.props.tooltipAccessor,
		startAccessor: this.props.startAccessor,
		endAccessor: this.props.endAccessor,
		allDayAccessor: this.props.allDayAccessor,
		eventPropGetter: this.props.eventPropGetter,
		selected: this.props.selected,
		isAllDay: true,
		onSelect: this.handleSelectEvent,
		onDoubleClick: this.handleDoubleClickEvent,
		longPressThreshold: this.props.longPressThreshold
		})
		)
		);
		};

		TimeGrid.prototype.renderHeaderResources = function renderHeaderResources(range, resources) {
		var _this6 = this;

		var _props5 = this.props,
		resourceTitleAccessor = _props5.resourceTitleAccessor,
		getNow = _props5.getNow;

		var today = getNow();
		return range.map(function (date, i) {
		return resources.map(function (resource, j) {
		return _react2.default.createElement(
		'div',
		{
		key: i + '-' + j,
		className: (0, _classnames2.default)('rbc-header', _dates2.default.eq(date, today, 'day') && 'rbc-today'),
		style: (0, _eventLevels.segStyle)(1, _this6.slots)
		},
		_react2.default.createElement(
		'span',
		null,
		(0, _accessors.accessor)(resource, resourceTitleAccessor)
		)
		);
		});
		});
		};

		TimeGrid.prototype.renderHeaderCells = function renderHeaderCells(range) {
		var _this7 = this;

		var _props6 = this.props,
		dayFormat = _props6.dayFormat,
		culture = _props6.culture,
		components = _props6.components,
		dayPropGetter = _props6.dayPropGetter,
		getDrilldownView = _props6.getDrilldownView,
		getNow = _props6.getNow;

		var HeaderComponent = components.header \|\| _Header2.default;
		var today = getNow();

		return range.map(function (date, i) {
		var drilldownView = getDrilldownView(date);
		var label = _localizer2.default.format(date, dayFormat, culture);

		var _ref3 = dayPropGetter && dayPropGetter(date) \|\| {},
		className = _ref3.className,
		dayStyles = _ref3.style;

		var header = _react2.default.createElement(HeaderComponent, {
		date: date,
		label: label,
		localizer: _localizer2.default,
		format: dayFormat,
		culture: culture
		});

		return _react2.default.createElement(
		'div',
		{
		key: i,
		className: (0, _classnames2.default)('rbc-header', className, _dates2.default.eq(date, today, 'day') && 'rbc-today'),
		style: _extends({}, dayStyles, (0, _eventLevels.segStyle)(1, _this7.slots))
		},
		drilldownView ? _react2.default.createElement(
		'a',
		{
		href: '#',
		onClick: function onClick(e) {
		return _this7.handleHeaderClick(date, drilldownView, e);
		}
		},
		header
		) : _react2.default.createElement(
		'span',
		null,
		header
		)
		);
		});
		};

		TimeGrid.prototype.handleHeaderClick = function handleHeaderClick(date, view, e) {
		e.preventDefault();
		(0, _helpers.notify)(this.props.onDrillDown, [date, view]);
		};

		TimeGrid.prototype.handleSelectEvent = function handleSelectEvent() {
		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		(0, _helpers.notify)(this.props.onSelectEvent, args);
		};

		TimeGrid.prototype.handleDoubleClickEvent = function handleDoubleClickEvent() {
		for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
		args[_key2] = arguments[_key2];
		}

		(0, _helpers.notify)(this.props.onDoubleClickEvent, args);
		};

		TimeGrid.prototype.handleSelectAlldayEvent = function handleSelectAlldayEvent() {
		//cancel any pending selections so only the event click goes through.
		this.clearSelection();

		for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
		args[_key3] = arguments[_key3];
		}

		(0, _helpers.notify)(this.props.onSelectEvent, args);
		};

		TimeGrid.prototype.clearSelection = function clearSelection() {
		@@ -485,11 +315,6 @@ clearTimeout(this._selectTimer);
		TimeGrid.prototype.measureGutter = function measureGutter() {
		var width = this.state.gutterWidth;
		var gutterCells = this._gutters;
		var width = (0, _width2.default)(this.gutter);

		if (!width) {
		width = Math.max.apply(Math, gutterCells.map(_width2.default));

		if (width) {
		this.setState({ gutterWidth: width });
		}
		if (width && this.state.gutterWidth !== width) {
		this.setState({ gutterWidth: width });
		}
		@@ -522,7 +347,8 @@ };
		TimeGrid.prototype.positionTimeIndicator = function positionTimeIndicator() {
		var _props7 = this.props,
		rtl = _props7.rtl,
		min = _props7.min,
		max = _props7.max,
		getNow = _props7.getNow;
		var _props4 = this.props,
		rtl = _props4.rtl,
		min = _props4.min,
		max = _props4.max,
		getNow = _props4.getNow,
		range = _props4.range;

		@@ -536,12 +362,19 @@ var current = getNow();
		var factor = secondsPassed / secondsGrid;
		var timeGutter = this._gutters[this._gutters.length - 1];
		var timeGutter = this.gutter;

		var content = this.refs.content;

		if (timeGutter && current >= min && current <= max) {
		var pixelHeight = timeGutter.offsetHeight;
		var dayPixelWidth = (content.offsetWidth - timeGutter.offsetWidth) / this.slots;
		var dayOffset = range.findIndex(function (d) {
		return _dates2.default.eq(d, _dates2.default.today(), 'day');
		}) * dayPixelWidth;
		var offset = Math.floor(factor * pixelHeight);

		timeIndicator.style.display = 'block';
		timeIndicator.style.display = dayOffset >= 0 ? 'block' : 'none';
		timeIndicator.style[rtl ? 'left' : 'right'] = 0;
		timeIndicator.style[rtl ? 'right' : 'left'] = timeGutter.offsetWidth + 'px';
		timeIndicator.style[rtl ? 'right' : 'left'] = timeGutter.offsetWidth + dayOffset + 'px';
		timeIndicator.style.top = offset + 'px';
		timeIndicator.style.width = dayPixelWidth + 'px';
		} else {
		@@ -553,9 +386,9 @@ timeIndicator.style.display = 'none';
		TimeGrid.prototype.triggerTimeIndicatorUpdate = function triggerTimeIndicatorUpdate() {
		var _this8 = this;
		var _this4 = this;

		// Update the position of the time indicator every minute
		this._timeIndicatorTimeout = window.setTimeout(function () {
		_this8.positionTimeIndicator();
		_this4.positionTimeIndicator();

		_this8.triggerTimeIndicatorUpdate();
		_this4.triggerTimeIndicatorUpdate();
		}, 60000);
		@@ -615,11 +448,8 @@ };
		step: 30,
		timeslots: 2,
		min: _dates2.default.startOf(new Date(), 'day'),
		max: _dates2.default.endOf(new Date(), 'day'),
		scrollToTime: _dates2.default.startOf(new Date(), 'day'),
		/* this is needed to satisfy requirements from TimeColumn required props
		* There is a strange bug in React, using ...TimeColumn.defaultProps causes weird crashes
		*/
		type: 'gutter'
		scrollToTime: _dates2.default.startOf(new Date(), 'day')
		};
		exports.default = TimeGrid;
		module.exports = exports['default'];

19

lib/TimeSlot.js

		@@ -40,5 +40,6 @@ 'use strict';
		slotPropGetter = _props.slotPropGetter,
		resource = _props.resource;
		resource = _props.resource,
		children = _props.children;

		var Wrapper = this.props.dayWrapperComponent;
		var Wrapper = this.props.timeSlotWrapperComponent;

		@@ -56,9 +57,5 @@ var _ref = slotPropGetter && slotPropGetter(value) \|\| {},
		style: style,
		className: (0, _classnames2.default)('rbc-time-slot', className, this.props.showLabel && 'rbc-label', this.props.isNow && 'rbc-now')
		className: (0, _classnames2.default)('rbc-time-slot', className, children && 'rbc-label')
		},
		this.props.showLabel && _react2.default.createElement(
		'span',
		null,
		this.props.content
		)
		children
		)
		@@ -72,8 +69,5 @@ );
		TimeSlot.propTypes = {
		dayWrapperComponent: _propTypes3.elementType,
		timeSlotWrapperComponent: _propTypes3.elementType,
		value: _propTypes2.default.instanceOf(Date).isRequired,
		isNow: _propTypes2.default.bool,
		showLabel: _propTypes2.default.bool,
		content: _propTypes2.default.string,
		culture: _propTypes2.default.string,
		slotPropGetter: _propTypes2.default.func,
		@@ -83,3 +77,2 @@ resource: _propTypes2.default.string
		TimeSlot.defaultProps = {
		isNow: false,
		showLabel: false,
		@@ -86,0 +79,0 @@ content: ''

88

lib/TimeSlotGroup.js

		@@ -5,2 +5,8 @@ 'use strict';

		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; };

		var _classnames = require('classnames');

		var _classnames2 = _interopRequireDefault(_classnames);

		var _propTypes = require('prop-types');
		@@ -14,16 +20,8 @@

		var _TimeSlot = require('./TimeSlot');
		var _propTypes3 = require('./utils/propTypes');

		var _TimeSlot2 = _interopRequireDefault(_TimeSlot);
		var _BackgroundWrapper = require('./BackgroundWrapper');

		var _dates = require('./utils/dates.js');
		var _BackgroundWrapper2 = _interopRequireDefault(_BackgroundWrapper);

		var _dates2 = _interopRequireDefault(_dates);

		var _localizer = require('./localizer');

		var _localizer2 = _interopRequireDefault(_localizer);

		var _propTypes3 = require('./utils/propTypes');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		@@ -46,41 +44,29 @@

		TimeSlotGroup.prototype.renderSlice = function renderSlice(slotNumber, content, value) {
		TimeSlotGroup.prototype.render = function render() {
		var _props = this.props,
		dayWrapperComponent = _props.dayWrapperComponent,
		showLabels = _props.showLabels,
		isNow = _props.isNow,
		culture = _props.culture,
		renderSlot = _props.renderSlot,
		resource = _props.resource,
		slotPropGetter = _props.slotPropGetter;
		group = _props.group,
		slotPropGetter = _props.slotPropGetter,
		Wrapper = _props.timeSlotWrapperComponent;

		return _react2.default.createElement(_TimeSlot2.default, {
		key: slotNumber,
		slotPropGetter: slotPropGetter,
		dayWrapperComponent: dayWrapperComponent,
		showLabel: showLabels && !slotNumber,
		content: content,
		culture: culture,
		isNow: isNow,
		resource: resource,
		value: value
		});
		};

		TimeSlotGroup.prototype.renderSlices = function renderSlices() {
		var ret = [];
		var sliceLength = this.props.step;
		var sliceValue = this.props.value;
		for (var i = 0; i < this.props.timeslots; i++) {
		var content = _localizer2.default.format(sliceValue, this.props.timeGutterFormat, this.props.culture);
		ret.push(this.renderSlice(i, content, sliceValue));
		sliceValue = _dates2.default.add(sliceValue, sliceLength, 'minutes');
		}
		return ret;
		};

		TimeSlotGroup.prototype.render = function render() {
		return _react2.default.createElement(
		'div',
		{ className: 'rbc-timeslot-group' },
		this.renderSlices()
		group.map(function (value, idx) {
		var slotProps = slotPropGetter && slotPropGetter(value) \|\| {};

		return _react2.default.createElement(
		Wrapper,
		{ key: idx, value: value, resource: resource },
		_react2.default.createElement(
		'div',
		_extends({}, slotProps, {
		className: (0, _classnames2.default)('rbc-time-slot', slotProps.className)
		}),
		renderSlot && renderSlot(value, idx)
		)
		);
		})
		);
		@@ -93,20 +79,12 @@ };
		TimeSlotGroup.propTypes = {
		dayWrapperComponent: _propTypes3.elementType,
		timeslots: _propTypes2.default.number.isRequired,
		step: _propTypes2.default.number.isRequired,
		value: _propTypes2.default.instanceOf(Date).isRequired,
		showLabels: _propTypes2.default.bool,
		isNow: _propTypes2.default.bool,
		renderSlot: _propTypes2.default.func,
		timeSlotWrapperComponent: _propTypes3.elementType,
		group: _propTypes2.default.array.isRequired,
		slotPropGetter: _propTypes2.default.func,
		timeGutterFormat: _propTypes3.dateFormat,
		culture: _propTypes2.default.string,
		resource: _propTypes2.default.string
		};
		TimeSlotGroup.defaultProps = {
		timeslots: 2,
		step: 30,
		isNow: false,
		showLabels: false
		timeSlotWrapperComponent: _BackgroundWrapper2.default
		};
		exports.default = TimeSlotGroup;
		module.exports = exports['default'];

7

lib/utils/eventLevels.js

		@@ -6,3 +6,2 @@ 'use strict';
		exports.eventSegments = eventSegments;
		exports.segStyle = segStyle;
		exports.eventLevels = eventLevels;
		@@ -58,8 +57,2 @@ exports.inRange = inRange;

		function segStyle(span, slots) {
		var per = span / slots * 100 + '%';
		return { WebkitFlexBasis: per, flexBasis: per, maxWidth: per // IE10/11 need max-width. flex-basis doesn't respect box-sizing
		};
		}

		function eventLevels(rowSegments) {
		@@ -66,0 +59,0 @@ var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;

6

lib/WorkWeek.js

		@@ -71,2 +71,8 @@ 'use strict';

		WorkWeek.range = function (date, options) {
		return _Week2.default.range(date, options).filter(function (d) {
		return [6, 0].indexOf(d.getDay()) === -1;
		});
		};

		WorkWeek.navigate = _Week2.default.navigate;
		@@ -73,0 +79,0 @@

2

package.json

		{
		"name": "react-big-calendar",
		"version": "0.18.0",
		"version": "0.19.0",
		"description": "Calendar! with events",
		@@ -5,0 +5,0 @@ "author": "Jason Quense <monastic.panic@gmail.com>",

4

README.md

		@@ -51,1 +51,5 @@ # react-big-calendar
		```

		## 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/backgroundWrapper.js

lib/addons/dragAndDrop/ResizableEvent.js

lib/addons/dragAndDrop/ResizableMonthEvent.js

lib/TimeColumn.js

lib/utils/dayViewLayout/event.js

lib/utils/dayViewLayout/index.js

lib/addons/dragAndDrop/styles.css