react-big-scheduler - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

@@ -7,2 +7,26 @@ ## Coming npm version
 
+## npm v0.2.2
+
+### 2018-10-24
+* Resource view scrollable
+
+### 2018-10-19
+* Add SchedulerData.config.relativeMove
+
+### 2018-10-02
+* Add Custom, Custom1, Custom2 view types in [ViewTypes.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/ViewTypes.js) to support custom time window(most 3 custom view types in the same scheduler)
+* Add [Custom time window example](https://stephenchou1017.github.io/scheduler/#/customtimewindow)
+* Add [Infinite scroll 2 example](https://stephenchou1017.github.io/scheduler/#/infinitescroll2)
+
+### 2018-09-28
+* Add onScrollLeft, onScrollRight, onScrollTop and onScrollBottom of Scheduler([Feature request by wojcechgk](https://github.com/StephenChou1017/react-big-scheduler/issues/42))
+* Add [Infinite scroll example](https://stephenchou1017.github.io/scheduler/#/infinitescroll)
+
+### 2018-09-18
+* Add SchedulerData.config.displayWeekend([Feature request by Subwater](https://github.com/StephenChou1017/react-big-scheduler/issues/21))
+* Add [Hide weekends example](https://stephenchou1017.github.io/scheduler/#/hideweekends)
+
+### 2018-09-13
+* Support for rruleset => exrule,exdate([mongrelx](https://github.com/mongrelx))
+
 ## npm v0.2.1
@@ -9,0 +33,0 @@

lib/AgendaEventItem.js

@@ -60,3 +60,3 @@ 'use strict';
             var bgColor = config.defaultEventBgColor;
-            if (eventItem.bgColor !== undefined) bgColor = eventItem.bgColor;
+            if (!!eventItem.bgColor) bgColor = eventItem.bgColor;
 
@@ -63,0 +63,0 @@ var titleText = schedulerData.behaviors.getEventTextFunc(schedulerData, eventItem);

lib/behaviors.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.isNonWorkingTime = exports.getEventText = exports.getDateLabel = exports.getSummary = undefined;
+exports.isNonWorkingTime = exports.getEventText = exports.getDateLabel = exports.getCustomDate = exports.getSummary = undefined;
 
@@ -16,2 +16,32 @@ var _index = require('./index');
 
+//getCustomDateExample
+var getCustomDate = exports.getCustomDate = function getCustomDate(schedulerData, num) {
+    var date = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+    var viewType = schedulerData.viewType;
+
+    var selectDate = schedulerData.startDate;
+    if (date != undefined) selectDate = date;
+
+    var startDate = num === 0 ? selectDate : schedulerData.localeMoment(selectDate).add(2 * num, 'days').format(_index.DATE_FORMAT),
+        endDate = schedulerData.localeMoment(startDate).add(1, 'days').format(_index.DATE_FORMAT),
+        cellUnit = _index.CellUnits.Hour;
+    if (viewType === _index.ViewTypes.Custom1) {
+        var monday = schedulerData.localeMoment(selectDate).startOf('week').format(_index.DATE_FORMAT);
+        startDate = num === 0 ? monday : schedulerData.localeMoment(monday).add(2 * num, 'weeks').format(_index.DATE_FORMAT);
+        endDate = schedulerData.localeMoment(startDate).add(1, 'weeks').endOf('week').format(_index.DATE_FORMAT);
+        cellUnit = _index.CellUnits.Day;
+    } else if (viewType === _index.ViewTypes.Custom2) {
+        var firstDayOfMonth = schedulerData.localeMoment(selectDate).startOf('month').format(_index.DATE_FORMAT);
+        startDate = num === 0 ? firstDayOfMonth : schedulerData.localeMoment(firstDayOfMonth).add(2 * num, 'months').format(_index.DATE_FORMAT);
+        endDate = schedulerData.localeMoment(startDate).add(1, 'months').endOf('month').format(_index.DATE_FORMAT);
+        cellUnit = _index.CellUnits.Day;
+    }
+
+    return {
+        startDate: startDate,
+        endDate: endDate,
+        cellUnit: cellUnit
+    };
+};
+
 //getDateLabelFuncExample
@@ -23,3 +53,3 @@ var getDateLabel = exports.getDateLabel = function getDateLabel(schedulerData, viewType, startDate, endDate) {
 
-    if (viewType === _index.ViewTypes.Week) {
+    if (viewType === _index.ViewTypes.Week || start != end && (viewType === _index.ViewTypes.Custom || viewType === _index.ViewTypes.Custom1 || viewType === _index.ViewTypes.Custom2)) {
         dateLabel = start.format('MMM D') + '-' + end.format('D, YYYY');
@@ -55,3 +85,3 @@ if (start.month() !== end.month()) dateLabel = start.format('MMM D') + '-' + end.format('MMM D, YYYY');
 
-    if (schedulerData.viewType === _index.ViewTypes.Day) {
+    if (schedulerData.cellUnit === _index.CellUnits.Hour) {
         var hour = localeMoment(time).hour();
@@ -70,2 +100,4 @@ if (hour < 9 || hour > 18) return true;
     getSummaryFunc: undefined,
+    //getCustomDateFunc: getCustomDate,
+    getCustomDateFunc: undefined,
     getDateLabelFunc: getDateLabel,
@@ -72,0 +104,0 @@ getEventTextFunc: getEventText,

lib/config.js

@@ -18,3 +18,3 @@ 'use strict';
 exports.default = {
-    schedulerWidth: 1000,
+    schedulerWidth: '1000',
     schedulerMaxHeight: 0,
@@ -31,2 +31,3 @@ tableHeaderHeight: 40,
     yearResourceTableWidth: 160,
+    customResourceTableWidth: 160,
 
@@ -38,2 +39,3 @@ dayCellWidth: 30,
     yearCellWidth: 80,
+    customCellWidth: 80,
 
@@ -45,2 +47,3 @@ dayMaxEvents: 99,
     yearMaxEvents: 99,
+    customMaxEvents: 99,
 
@@ -71,2 +74,4 @@ eventItemHeight: 22,
     headerEnabled: true,
+    displayWeekend: true,
+    relativeMove: true,
 
@@ -73,0 +78,0 @@ resourceName: 'Resource Name',

lib/DemoData.js

@@ -27,3 +27,3 @@ 'use strict';
         id: 'r7',
-        name: 'Resource7'
+        name: 'Resource7Resource7Resource7Resource7Resource7'
     }],
@@ -116,3 +116,3 @@ events: [{
         start: '2017-12-21 18:30:00',
-        end: '2017-12-22 23:30:00',
+        end: '2017-12-24 23:30:00',
         resourceId: 'r1',
@@ -119,0 +119,0 @@ title: 'R1 has many tasks 5'

lib/DnDContext.js

@@ -30,3 +30,3 @@ 'use strict';
                     resourceEvents = props.resourceEvents;
-                var viewType = schedulerData.viewType,
+                var cellUnit = schedulerData.cellUnit,
                     localeMoment = schedulerData.localeMoment;
@@ -44,3 +44,3 @@
                     initialEndTime = resourceEvents.headerItems[initialLeftIndex].end;
-                    if (viewType !== _index.ViewTypes.Day) initialEndTime = localeMoment(resourceEvents.headerItems[initialLeftIndex].start).hour(23).minute(59).second(59).format(_index.DATETIME_FORMAT);
+                    if (cellUnit !== _index.CellUnits.Hour) initialEndTime = localeMoment(resourceEvents.headerItems[initialLeftIndex].start).hour(23).minute(59).second(59).format(_index.DATETIME_FORMAT);
                 }
@@ -51,3 +51,3 @@ var point = monitor.getClientOffset();
                 var endTime = resourceEvents.headerItems[leftIndex].end;
-                if (viewType !== _index.ViewTypes.Day) endTime = localeMoment(resourceEvents.headerItems[leftIndex].start).hour(23).minute(59).second(59).format(_index.DATETIME_FORMAT);
+                if (cellUnit !== _index.CellUnits.Hour) endTime = localeMoment(resourceEvents.headerItems[leftIndex].start).hour(23).minute(59).second(59).format(_index.DATETIME_FORMAT);
 
@@ -54,0 +54,0 @@ return {

lib/DnDSource.js

@@ -52,4 +52,9 @@ 'use strict';
                     var _event = item;
-                    if (viewType !== _index.ViewTypes.Day) {
+                    if (config.relativeMove) {
                         newStart = localeMoment(_event.start).add(localeMoment(newStart).diff(localeMoment(initialStart)), 'ms').format(_index.DATETIME_FORMAT);
+                    } else {
+                        if (viewType !== _index.ViewTypes.Day) {
+                            var tmpMoment = localeMoment(newStart);
+                            newStart = localeMoment(_event.start).year(tmpMoment.year()).month(tmpMoment.month()).date(tmpMoment.date()).format(_index.DATETIME_FORMAT);
+                        }
                     }
@@ -56,0 +61,0 @@ newEnd = localeMoment(newStart).add(localeMoment(_event.end).diff(localeMoment(_event.start)), 'ms').format(_index.DATETIME_FORMAT);

lib/EventItem.js

@@ -58,2 +58,4 @@ 'use strict';
         };
+        _this.startResizer = null;
+        _this.endResizer = null;
         return _this;
@@ -85,2 +87,4 @@ }
         value: function render() {
+            var _this2 = this;
+
             var _props = this.props,
@@ -106,3 +110,3 @@ eventItem = _props.eventItem,
             var bgColor = config.defaultEventBgColor;
-            if (eventItem.bgColor !== undefined) bgColor = eventItem.bgColor;
+            if (!!eventItem.bgColor) bgColor = eventItem.bgColor;
 
@@ -120,5 +124,9 @@ var titleText = schedulerData.behaviors.getEventTextFunc(schedulerData, eventItem);
             var startResizeDiv = _react2.default.createElement('div', null);
-            if (this.startResizable(this.props)) startResizeDiv = _react2.default.createElement('div', { className: 'event-resizer event-start-resizer', ref: 'startResizer' });
+            if (this.startResizable(this.props)) startResizeDiv = _react2.default.createElement('div', { className: 'event-resizer event-start-resizer', ref: function ref(_ref) {
+                    return _this2.startResizer = _ref;
+                } });
             var endResizeDiv = _react2.default.createElement('div', null);
-            if (this.endResizable(this.props)) endResizeDiv = _react2.default.createElement('div', { className: 'event-resizer event-end-resizer', ref: 'endResizer' });
+            if (this.endResizable(this.props)) endResizeDiv = _react2.default.createElement('div', { className: 'event-resizer event-end-resizer', ref: function ref(_ref2) {
+                    return _this2.endResizer = _ref2;
+                } });
 
@@ -186,3 +194,3 @@ var eventItemTemplate = _react2.default.createElement(
 }, _initialiseProps = function _initialiseProps() {
-    var _this2 = this;
+    var _this3 = this;
 
@@ -193,11 +201,11 @@ this.initStartDrag = function (ev) {
 
-        var schedulerData = _this2.props.schedulerData;
+        var schedulerData = _this3.props.schedulerData;
 
         schedulerData._startResizing();
-        _this2.setState({
+        _this3.setState({
             startX: ev.clientX
         });
 
-        document.documentElement.addEventListener('mousemove', _this2.doStartDrag, false);
-        document.documentElement.addEventListener('mouseup', _this2.stopStartDrag, false);
+        document.documentElement.addEventListener('mousemove', _this3.doStartDrag, false);
+        document.documentElement.addEventListener('mouseup', _this3.stopStartDrag, false);
     };
@@ -208,3 +216,3 @@
 
-        var _props2 = _this2.props,
+        var _props2 = _this3.props,
             left = _props2.left,
@@ -220,3 +228,3 @@ width = _props2.width,
         var maxWidth = rightIndex * cellWidth - offset;
-        var startX = _this2.state.startX;
+        var startX = _this3.state.startX;
 
@@ -233,3 +241,3 @@ var newLeft = left + ev.clientX - startX;
 
-        _this2.setState({ left: newLeft, width: newWidth });
+        _this3.setState({ left: newLeft, width: newWidth });
     };
@@ -239,6 +247,6 @@
         ev.stopPropagation();
-        document.documentElement.removeEventListener('mousemove', _this2.doStartDrag, false);
-        document.documentElement.removeEventListener('mouseup', _this2.stopStartDrag, false);
+        document.documentElement.removeEventListener('mousemove', _this3.doStartDrag, false);
+        document.documentElement.removeEventListener('mouseup', _this3.stopStartDrag, false);
 
-        var _props3 = _this2.props,
+        var _props3 = _this3.props,
             width = _props3.width,
@@ -252,3 +260,3 @@ leftIndex = _props3.leftIndex,
         schedulerData._stopResizing();
-        var viewType = schedulerData.viewType,
+        var cellUnit = schedulerData.cellUnit,
             events = schedulerData.events,
@@ -262,3 +270,3 @@ config = schedulerData.config,
         var maxWidth = rightIndex * cellWidth - offset;
-        var startX = _this2.state.startX;
+        var startX = _this3.state.startX;
 
@@ -270,3 +278,36 @@ var newWidth = width + startX - ev.clientX;
         if (newWidth < minWidth) count = rightIndex - leftIndex - 1;else if (newWidth > maxWidth) count = -leftIndex;
-        var newStart = localeMoment(eventItem.start).add(viewType === _index.ViewTypes.Day ? count * config.minuteStep : count, viewType === _index.ViewTypes.Day ? 'minutes' : 'days').format(_index.DATETIME_FORMAT);
+        var newStart = localeMoment(eventItem.start).add(cellUnit === _index.CellUnits.Hour ? count * config.minuteStep : count, cellUnit === _index.CellUnits.Hour ? 'minutes' : 'days').format(_index.DATETIME_FORMAT);
+        if (count !== 0 && cellUnit !== _index.CellUnits.Hour && config.displayWeekend === false) {
+            if (count > 0) {
+                var tempCount = 0,
+                    i = 0;
+                while (true) {
+                    i++;
+                    var tempStart = localeMoment(eventItem.start).add(i, 'days');
+                    var dayOfWeek = tempStart.weekday();
+                    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
+                        tempCount++;
+                        if (tempCount === count) {
+                            newStart = tempStart.format(_index.DATETIME_FORMAT);
+                            break;
+                        }
+                    }
+                }
+            } else {
+                var _tempCount = 0,
+                    _i = 0;
+                while (true) {
+                    _i--;
+                    var _tempStart = localeMoment(eventItem.start).add(_i, 'days');
+                    var _dayOfWeek = _tempStart.weekday();
+                    if (_dayOfWeek !== 0 && _dayOfWeek !== 6) {
+                        _tempCount--;
+                        if (_tempCount === count) {
+                            newStart = _tempStart.format(_index.DATETIME_FORMAT);
+                            break;
+                        }
+                    }
+                }
+            }
+        }
 
@@ -289,3 +330,3 @@ var hasConflict = false;
         if (hasConflict) {
-            var _props4 = _this2.props,
+            var _props4 = _this3.props,
                 conflictOccurred = _props4.conflictOccurred,
@@ -296,3 +337,3 @@ left = _props4.left,
 
-            _this2.setState({
+            _this3.setState({
                 left: left,
@@ -308,3 +349,3 @@ top: top,
             }
-            _this2.subscribeResizeEvent(_this2.props);
+            _this3.subscribeResizeEvent(_this3.props);
         } else {
@@ -319,11 +360,11 @@ if (updateEventStart != undefined) updateEventStart(schedulerData, eventItem, newStart);
 
-        var schedulerData = _this2.props.schedulerData;
+        var schedulerData = _this3.props.schedulerData;
 
         schedulerData._startResizing();
-        _this2.setState({
+        _this3.setState({
             endX: ev.clientX
         });
 
-        document.documentElement.addEventListener('mousemove', _this2.doEndDrag, false);
-        document.documentElement.addEventListener('mouseup', _this2.stopEndDrag, false);
+        document.documentElement.addEventListener('mousemove', _this3.doEndDrag, false);
+        document.documentElement.addEventListener('mouseup', _this3.stopEndDrag, false);
     };
@@ -333,3 +374,3 @@
         ev.stopPropagation();
-        var _props5 = _this2.props,
+        var _props5 = _this3.props,
             width = _props5.width,
@@ -344,3 +385,3 @@ leftIndex = _props5.leftIndex,
         var maxWidth = (headers.length - leftIndex) * cellWidth - offset;
-        var endX = _this2.state.endX;
+        var endX = _this3.state.endX;
 
@@ -351,3 +392,3 @@
 
-        _this2.setState({ width: newWidth });
+        _this3.setState({ width: newWidth });
     };
@@ -357,6 +398,6 @@
         ev.stopPropagation();
-        document.documentElement.removeEventListener('mousemove', _this2.doEndDrag, false);
-        document.documentElement.removeEventListener('mouseup', _this2.stopEndDrag, false);
+        document.documentElement.removeEventListener('mousemove', _this3.doEndDrag, false);
+        document.documentElement.removeEventListener('mouseup', _this3.stopEndDrag, false);
 
-        var _props6 = _this2.props,
+        var _props6 = _this3.props,
             width = _props6.width,
@@ -371,3 +412,3 @@ leftIndex = _props6.leftIndex,
         var headers = schedulerData.headers,
-            viewType = schedulerData.viewType,
+            cellUnit = schedulerData.cellUnit,
             events = schedulerData.events,
@@ -381,3 +422,3 @@ config = schedulerData.config,
         var maxWidth = (headers.length - leftIndex) * cellWidth - offset;
-        var endX = _this2.state.endX;
+        var endX = _this3.state.endX;
 
@@ -390,3 +431,36 @@
         if (newWidth < minWidth) count = leftIndex - rightIndex + 1;else if (newWidth > maxWidth) count = headers.length - rightIndex;
-        var newEnd = localeMoment(eventItem.end).add(viewType === _index.ViewTypes.Day ? count * config.minuteStep : count, viewType === _index.ViewTypes.Day ? 'minutes' : 'days').format(_index.DATETIME_FORMAT);
+        var newEnd = localeMoment(eventItem.end).add(cellUnit === _index.CellUnits.Hour ? count * config.minuteStep : count, cellUnit === _index.CellUnits.Hour ? 'minutes' : 'days').format(_index.DATETIME_FORMAT);
+        if (count !== 0 && cellUnit !== _index.CellUnits.Hour && config.displayWeekend === false) {
+            if (count > 0) {
+                var tempCount = 0,
+                    i = 0;
+                while (true) {
+                    i++;
+                    var tempEnd = localeMoment(eventItem.end).add(i, 'days');
+                    var dayOfWeek = tempEnd.weekday();
+                    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
+                        tempCount++;
+                        if (tempCount === count) {
+                            newEnd = tempEnd.format(_index.DATETIME_FORMAT);
+                            break;
+                        }
+                    }
+                }
+            } else {
+                var _tempCount2 = 0,
+                    _i2 = 0;
+                while (true) {
+                    _i2--;
+                    var _tempEnd = localeMoment(eventItem.end).add(_i2, 'days');
+                    var _dayOfWeek2 = _tempEnd.weekday();
+                    if (_dayOfWeek2 !== 0 && _dayOfWeek2 !== 6) {
+                        _tempCount2--;
+                        if (_tempCount2 === count) {
+                            newEnd = _tempEnd.format(_index.DATETIME_FORMAT);
+                            break;
+                        }
+                    }
+                }
+            }
+        }
 
@@ -409,3 +483,3 @@ var hasConflict = false;
         if (hasConflict) {
-            var _props7 = _this2.props,
+            var _props7 = _this3.props,
                 conflictOccurred = _props7.conflictOccurred,
@@ -416,3 +490,3 @@ left = _props7.left,
 
-            _this2.setState({
+            _this3.setState({
                 left: left,
@@ -428,3 +502,3 @@ top: top,
             }
-            _this2.subscribeResizeEvent(_this2.props);
+            _this3.subscribeResizeEvent(_this3.props);
         } else {
@@ -454,9 +528,9 @@ if (updateEventEnd != undefined) updateEventEnd(schedulerData, eventItem, newEnd);
     this.subscribeResizeEvent = function (props) {
-        if (_this2.refs.startResizer != undefined) {
-            _this2.refs.startResizer.removeEventListener('mousedown', _this2.initStartDrag, false);
-            if (_this2.startResizable(props)) _this2.refs.startResizer.addEventListener('mousedown', _this2.initStartDrag, false);
+        if (_this3.startResizer != undefined) {
+            _this3.startResizer.removeEventListener('mousedown', _this3.initStartDrag, false);
+            if (_this3.startResizable(props)) _this3.startResizer.addEventListener('mousedown', _this3.initStartDrag, false);
         }
-        if (_this2.refs.endResizer != undefined) {
-            _this2.refs.endResizer.removeEventListener('mousedown', _this2.initEndDrag, false);
-            if (_this2.endResizable(props)) _this2.refs.endResizer.addEventListener('mousedown', _this2.initEndDrag, false);
+        if (_this3.endResizer != undefined) {
+            _this3.endResizer.removeEventListener('mousedown', _this3.initEndDrag, false);
+            if (_this3.endResizable(props)) _this3.endResizer.addEventListener('mousedown', _this3.initEndDrag, false);
         }
@@ -463,0 +537,0 @@ };

lib/HeaderView.js

@@ -43,3 +43,3 @@ 'use strict';
             var headers = schedulerData.headers,
-                viewType = schedulerData.viewType,
+                cellUnit = schedulerData.cellUnit,
                 config = schedulerData.config,
@@ -54,3 +54,3 @@ localeMoment = schedulerData.localeMoment;
             var style = {};
-            if (viewType === _index.ViewTypes.Day) {
+            if (cellUnit === _index.CellUnits.Hour) {
                 headers.forEach(function (item, index) {
@@ -57,0 +57,0 @@ if (index % minuteStepsInHour === 0) {

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.DemoData = exports.AddMorePopover = exports.DnDContext = exports.DnDSource = exports.SummaryPos = exports.ViewTypes = exports.SchedulerData = exports.DATETIME_FORMAT = exports.DATE_FORMAT = undefined;
+exports.DemoData = exports.AddMorePopover = exports.DnDContext = exports.DnDSource = exports.SummaryPos = exports.CellUnits = exports.ViewTypes = exports.SchedulerData = exports.DATETIME_FORMAT = exports.DATE_FORMAT = undefined;
 
@@ -97,2 +97,6 @@ var _row = require('antd/es/row');
 
+var _CellUnits = require('./CellUnits');
+
+var _CellUnits2 = _interopRequireDefault(_CellUnits);
+
 var _SummaryPos = require('./SummaryPos');
@@ -151,4 +155,8 @@
             contentHeight: schedulerData.getSchedulerContentDesiredHeight(),
-            browserScrollbarHeight: 17,
-            browserScrollbarWidth: 17
+            contentScrollbarHeight: 17,
+            contentScrollbarWidth: 17,
+            resourceScrollbarHeight: 17,
+            resourceScrollbarWidth: 17,
+            scrollLeft: 0,
+            scrollTop: 0
         };
@@ -241,7 +249,11 @@ return _this;
 
-                var browserScrollbarHeight = this.state.browserScrollbarHeight,
-                    browserScrollbarWidth = this.state.browserScrollbarWidth,
+                var contentScrollbarHeight = this.state.contentScrollbarHeight,
+                    contentScrollbarWidth = this.state.contentScrollbarWidth,
+                    resourceScrollbarHeight = this.state.resourceScrollbarHeight,
+                    resourceScrollbarWidth = this.state.resourceScrollbarWidth,
                     contentHeight = this.state.contentHeight;
-                var schedulerContentStyle = { overflow: 'auto', margin: "0px, 0px, 0px, 0px", position: "relative" };
-                var resourceContentStyle = { overflowX: "auto", overflowY: "auto", margin: '0px -' + browserScrollbarWidth + 'px 0px 0px' };
+                var resourcePaddingBottom = resourceScrollbarHeight === 0 ? contentScrollbarHeight : 0;
+                var contentPaddingBottom = contentScrollbarHeight === 0 ? resourceScrollbarHeight : 0;
+                var schedulerContentStyle = { overflow: 'auto', margin: "0px", position: "relative", paddingBottom: contentPaddingBottom };
+                var resourceContentStyle = { overflowX: "auto", overflowY: "auto", width: resourceTableWidth + resourceScrollbarWidth - 2, margin: '0px -' + contentScrollbarWidth + 'px 0px 0px' };
                 if (config.schedulerMaxHeight > 0) {
@@ -271,3 +283,3 @@ schedulerContentStyle = _extends({}, schedulerContentStyle, {
                                     'div',
-                                    { style: { overflowX: "scroll", overflowY: "hidden", margin: '0px 0px -' + browserScrollbarHeight + 'px' } },
+                                    { style: { overflowX: "scroll", overflowY: "hidden", margin: '0px 0px -' + contentScrollbarHeight + 'px' } },
                                     _react2.default.createElement(
@@ -296,3 +308,3 @@ 'table',
                                 _react2.default.createElement(_ResourceView2.default, _extends({}, this.props, {
-                                    browserScrollbarHeight: browserScrollbarHeight
+                                    contentScrollbarHeight: resourcePaddingBottom
                                 }))
@@ -313,6 +325,6 @@ )
                                     'div',
-                                    { style: { overflowX: "scroll", overflowY: "hidden", margin: '0px 0px -' + browserScrollbarHeight + 'px' }, ref: this.schedulerHeadRef, onMouseOver: this.onSchedulerHeadMouseOver, onMouseOut: this.onSchedulerHeadMouseOut, onScroll: this.onSchedulerHeadScroll },
+                                    { style: { overflowX: "scroll", overflowY: "hidden", margin: '0px 0px -' + contentScrollbarHeight + 'px' }, ref: this.schedulerHeadRef, onMouseOver: this.onSchedulerHeadMouseOver, onMouseOut: this.onSchedulerHeadMouseOut, onScroll: this.onSchedulerHeadScroll },
                                     _react2.default.createElement(
                                         'div',
-                                        { style: { paddingRight: browserScrollbarWidth + 'px', width: schedulerWidth + browserScrollbarWidth } },
+                                        { style: { paddingRight: contentScrollbarWidth + 'px', width: schedulerWidth + contentScrollbarWidth } },
                                         _react2.default.createElement(
@@ -414,3 +426,3 @@ 'table',
                 'table',
-                { className: 'scheduler', style: { width: width } },
+                { className: 'scheduler', style: { width: width + 'px' } },
                 _react2.default.createElement(
@@ -463,3 +475,7 @@ 'thead',
     slotItemTemplateResolver: _propTypes.PropTypes.func,
-    nonAgendaCellHeaderTemplateResolver: _propTypes.PropTypes.func
+    nonAgendaCellHeaderTemplateResolver: _propTypes.PropTypes.func,
+    onScrollLeft: _propTypes.PropTypes.func,
+    onScrollRight: _propTypes.PropTypes.func,
+    onScrollTop: _propTypes.PropTypes.func,
+    onScrollBottom: _propTypes.PropTypes.func
 }, _initialiseProps = function _initialiseProps() {
@@ -471,9 +487,15 @@ var _this3 = this;
 
-        var browserScrollbarHeight = 17,
-            browserScrollbarWidth = 17,
+        var contentScrollbarHeight = 17,
+            contentScrollbarWidth = 17,
+            resourceScrollbarHeight = 17,
+            resourceScrollbarWidth = 17,
             contentHeight = schedulerData.getSchedulerContentDesiredHeight();
         if (!!_this3.schedulerContent) {
-            browserScrollbarHeight = _this3.schedulerContent.offsetHeight - _this3.schedulerContent.clientHeight;
-            browserScrollbarWidth = _this3.schedulerContent.offsetWidth - _this3.schedulerContent.clientWidth;
+            contentScrollbarHeight = _this3.schedulerContent.offsetHeight - _this3.schedulerContent.clientHeight;
+            contentScrollbarWidth = _this3.schedulerContent.offsetWidth - _this3.schedulerContent.clientWidth;
         }
+        if (!!_this3.schedulerResource) {
+            resourceScrollbarHeight = _this3.schedulerResource.offsetHeight - _this3.schedulerResource.clientHeight;
+            resourceScrollbarWidth = _this3.schedulerResource.offsetWidth - _this3.schedulerResource.clientWidth;
+        }
         if (!!_this3.schedulerContentBgTable && !!_this3.schedulerContentBgTable.offsetHeight) {
@@ -485,8 +507,8 @@ contentHeight = _this3.schedulerContentBgTable.offsetHeight;
         var needSet = false;
-        if (browserScrollbarHeight != _this3.state.browserScrollbarHeight) {
-            tmpState = _extends({}, tmpState, { browserScrollbarHeight: browserScrollbarHeight });
+        if (contentScrollbarHeight != _this3.state.contentScrollbarHeight) {
+            tmpState = _extends({}, tmpState, { contentScrollbarHeight: contentScrollbarHeight });
             needSet = true;
         }
-        if (browserScrollbarWidth != _this3.state.browserScrollbarWidth) {
-            tmpState = _extends({}, tmpState, { browserScrollbarWidth: browserScrollbarWidth });
+        if (contentScrollbarWidth != _this3.state.contentScrollbarWidth) {
+            tmpState = _extends({}, tmpState, { contentScrollbarWidth: contentScrollbarWidth });
             needSet = true;
@@ -498,2 +520,10 @@ }
         }
+        if (resourceScrollbarHeight != _this3.state.resourceScrollbarHeight) {
+            tmpState = _extends({}, tmpState, { resourceScrollbarHeight: resourceScrollbarHeight });
+            needSet = true;
+        }
+        if (resourceScrollbarWidth != _this3.state.resourceScrollbarWidth) {
+            tmpState = _extends({}, tmpState, { resourceScrollbarWidth: resourceScrollbarWidth });
+            needSet = true;
+        }
         if (needSet) _this3.setState(tmpState);
@@ -555,8 +585,38 @@ };
         }
+
+        var _props2 = _this3.props,
+            schedulerData = _props2.schedulerData,
+            onScrollLeft = _props2.onScrollLeft,
+            onScrollRight = _props2.onScrollRight,
+            onScrollTop = _props2.onScrollTop,
+            onScrollBottom = _props2.onScrollBottom;
+        var _state = _this3.state,
+            scrollLeft = _state.scrollLeft,
+            scrollTop = _state.scrollTop;
+
+        if (_this3.schedulerContent.scrollLeft !== scrollLeft) {
+            if (_this3.schedulerContent.scrollLeft === 0 && onScrollLeft != undefined) {
+                onScrollLeft(schedulerData, _this3.schedulerContent, _this3.schedulerContent.scrollWidth - _this3.schedulerContent.clientWidth);
+            }
+            if (_this3.schedulerContent.scrollLeft === _this3.schedulerContent.scrollWidth - _this3.schedulerContent.clientWidth && onScrollRight != undefined) {
+                onScrollRight(schedulerData, _this3.schedulerContent, _this3.schedulerContent.scrollWidth - _this3.schedulerContent.clientWidth);
+            }
+        } else if (_this3.schedulerContent.scrollTop !== scrollTop) {
+            if (_this3.schedulerContent.scrollTop === 0 && onScrollTop != undefined) {
+                onScrollTop(schedulerData, _this3.schedulerContent, _this3.schedulerContent.scrollHeight - _this3.schedulerContent.clientHeight);
+            }
+            if (_this3.schedulerContent.scrollTop === _this3.schedulerContent.scrollHeight - _this3.schedulerContent.clientHeight && onScrollBottom != undefined) {
+                onScrollBottom(schedulerData, _this3.schedulerContent, _this3.schedulerContent.scrollHeight - _this3.schedulerContent.clientHeight);
+            }
+        }
+        _this3.setState({
+            scrollLeft: _this3.schedulerContent.scrollLeft,
+            scrollTop: _this3.schedulerContent.scrollTop
+        });
     };
 
     this.onViewChange = function (e) {
-        var _props2 = _this3.props,
-            onViewChange = _props2.onViewChange,
-            schedulerData = _props2.schedulerData;
+        var _props3 = _this3.props,
+            onViewChange = _props3.onViewChange,
+            schedulerData = _props3.schedulerData;
 
@@ -570,5 +630,5 @@ var viewType = parseInt(e.target.value.charAt(0));
     this.goNext = function () {
-        var _props3 = _this3.props,
-            nextClick = _props3.nextClick,
-            schedulerData = _props3.schedulerData;
+        var _props4 = _this3.props,
+            nextClick = _props4.nextClick,
+            schedulerData = _props4.schedulerData;
 
@@ -579,5 +639,5 @@ nextClick(schedulerData);
     this.goBack = function () {
-        var _props4 = _this3.props,
-            prevClick = _props4.prevClick,
-            schedulerData = _props4.schedulerData;
+        var _props5 = _this3.props,
+            prevClick = _props5.prevClick,
+            schedulerData = _props5.schedulerData;
 
@@ -596,5 +656,5 @@ prevClick(schedulerData);
 
-        var _props5 = _this3.props,
-            onSelectDate = _props5.onSelectDate,
-            schedulerData = _props5.schedulerData;
+        var _props6 = _this3.props,
+            onSelectDate = _props6.onSelectDate,
+            schedulerData = _props6.schedulerData;
 
@@ -608,2 +668,3 @@ onSelectDate(schedulerData, date);
 exports.ViewTypes = _ViewTypes2.default;
+exports.CellUnits = _CellUnits2.default;
 exports.SummaryPos = _SummaryPos2.default;
@@ -610,0 +671,0 @@ exports.DnDSource = _DnDSource2.default;

lib/ResourceEvents.js

@@ -114,3 +114,3 @@ 'use strict';
                 config = schedulerData.config,
-                viewType = schedulerData.viewType,
+                cellUnit = schedulerData.cellUnit,
                 localeMoment = schedulerData.localeMoment;
@@ -126,3 +126,3 @@ var _this$state = _this.state,
             var endTime = resourceEvents.headerItems[rightIndex - 1].end;
-            if (viewType !== _index.ViewTypes.Day) endTime = localeMoment(resourceEvents.headerItems[rightIndex - 1].start).hour(23).minute(59).second(59).format(_index.DATETIME_FORMAT);
+            if (cellUnit !== _index.CellUnits.Hour) endTime = localeMoment(resourceEvents.headerItems[rightIndex - 1].start).hour(23).minute(59).second(59).format(_index.DATETIME_FORMAT);
             var slotId = resourceEvents.slotId;
@@ -240,3 +240,3 @@ var slotName = resourceEvents.slotName;
                 dndSource = _props.dndSource;
-            var viewType = schedulerData.viewType,
+            var cellUnit = schedulerData.cellUnit,
                 startDate = schedulerData.startDate,
@@ -271,3 +271,3 @@ endDate = schedulerData.endDate,
                             var durationEnd = localeMoment(endDate).add(1, 'days');
-                            if (viewType === _index.ViewTypes.Day) {
+                            if (cellUnit === _index.CellUnits.Hour) {
                                 durationStart = localeMoment(startDate).add(config.dayStartFrom, 'hours');
@@ -274,0 +274,0 @@ durationEnd = localeMoment(endDate).add(config.dayStopTo + 1, 'hours');

lib/ResourceView.js

@@ -39,3 +39,3 @@ 'use strict';
                 schedulerData = _props.schedulerData,
-                browserScrollbarHeight = _props.browserScrollbarHeight,
+                contentScrollbarHeight = _props.contentScrollbarHeight,
                 slotClickedFunc = _props.slotClickedFunc,
@@ -47,3 +47,3 @@ slotItemTemplateResolver = _props.slotItemTemplateResolver;
             var width = schedulerData.getResourceTableWidth() - 2;
-            var paddingBottom = browserScrollbarHeight;
+            var paddingBottom = contentScrollbarHeight;
             var resourceList = renderData.map(function (item) {
@@ -55,2 +55,3 @@ var a = slotClickedFunc != undefined ? _react2.default.createElement(
                         } },
+                    _react2.default.createElement('span', { className: 'expander-space' }),
                     item.slotName
@@ -60,7 +61,12 @@ ) : _react2.default.createElement(
                     null,
-                    item.slotName
+                    _react2.default.createElement('span', { className: 'expander-space' }),
+                    _react2.default.createElement(
+                        'span',
+                        null,
+                        item.slotName
+                    )
                 );
                 var slotItem = _react2.default.createElement(
                     'div',
-                    { style: { width: width }, title: item.slotName, className: 'overflow-text header2-text' },
+                    { title: item.slotName, className: 'overflow-text header2-text', style: { textAlign: "left" } },
                     a
@@ -103,3 +109,3 @@ );
     schedulerData: _propTypes.PropTypes.object.isRequired,
-    browserScrollbarHeight: _propTypes.PropTypes.number.isRequired,
+    contentScrollbarHeight: _propTypes.PropTypes.number.isRequired,
     slotClickedFunc: _propTypes.PropTypes.func,
@@ -106,0 +112,0 @@ slotItemTemplateResolver: _propTypes.PropTypes.func

lib/SchedulerData.js

@@ -18,4 +18,2 @@ 'use strict';
 
-var _rrule2 = _interopRequireDefault(_rrule);
-
 var _config = require('./config');
@@ -52,2 +50,3 @@
         this.viewType = viewType;
+        this.cellUnit = viewType === _index.ViewTypes.Day ? _index.CellUnits.Hour : _index.CellUnits.Day;
         this.showAgenda = showAgenda;
@@ -60,6 +59,6 @@ this.isEventPerspective = isEventPerspective;
         if (!!localeMoment) this.localeMoment = localeMoment;
-        this._resolveDate(0, date);
         this.config = newConfig == undefined ? _config2.default : _extends({}, _config2.default, newConfig);
         this._validateMinuteStep(this.config.minuteStep);
         this.behaviors = newBehaviors == undefined ? _behaviors2.default : _extends({}, _behaviors2.default, newBehaviors);
+        this._resolveDate(0, date);
         this._createHeaders();
@@ -214,2 +213,3 @@ this._createRenderData();
             this.isEventPerspective = isEventPerspective;
+            this.cellUnit = _index.CellUnits.Day;
 
@@ -219,48 +219,55 @@ if (this.viewType !== viewType) {
 
-                if (this.viewType < viewType) {
-                    if (viewType === _index.ViewTypes.Week) {
-                        this.startDate = this.localeMoment(date).startOf('week').format(_index.DATE_FORMAT);
-                        this.endDate = this.localeMoment(this.startDate).endOf('week').format(_index.DATE_FORMAT);
-                    } else if (viewType === _index.ViewTypes.Month) {
-                        this.startDate = this.localeMoment(date).startOf('month').format(_index.DATE_FORMAT);
-                        this.endDate = this.localeMoment(this.startDate).endOf('month').format(_index.DATE_FORMAT);
-                    } else if (viewType === _index.ViewTypes.Quarter) {
-                        this.startDate = this.localeMoment(date).startOf('quarter').format(_index.DATE_FORMAT);
-                        this.endDate = this.localeMoment(this.startDate).endOf('quarter').format(_index.DATE_FORMAT);
-                    } else if (viewType === _index.ViewTypes.Year) {
-                        this.startDate = this.localeMoment(date).startOf('year').format(_index.DATE_FORMAT);
-                        this.endDate = this.localeMoment(this.startDate).endOf('year').format(_index.DATE_FORMAT);
-                    }
+                if (viewType === _index.ViewTypes.Custom || viewType === _index.ViewTypes.Custom1 || viewType === _index.ViewTypes.Custom2) {
+                    this.viewType = viewType;
+                    this._resolveDate(0, date);
                 } else {
-                    var start = this.localeMoment(this.startDate);
-                    var end = this.localeMoment(this.endDate).add(1, 'days');
+                    if (this.viewType < viewType) {
+                        if (viewType === _index.ViewTypes.Week) {
+                            this.startDate = this.localeMoment(date).startOf('week').format(_index.DATE_FORMAT);
+                            this.endDate = this.localeMoment(this.startDate).endOf('week').format(_index.DATE_FORMAT);
+                        } else if (viewType === _index.ViewTypes.Month) {
+                            this.startDate = this.localeMoment(date).startOf('month').format(_index.DATE_FORMAT);
+                            this.endDate = this.localeMoment(this.startDate).endOf('month').format(_index.DATE_FORMAT);
+                        } else if (viewType === _index.ViewTypes.Quarter) {
+                            this.startDate = this.localeMoment(date).startOf('quarter').format(_index.DATE_FORMAT);
+                            this.endDate = this.localeMoment(this.startDate).endOf('quarter').format(_index.DATE_FORMAT);
+                        } else if (viewType === _index.ViewTypes.Year) {
+                            this.startDate = this.localeMoment(date).startOf('year').format(_index.DATE_FORMAT);
+                            this.endDate = this.localeMoment(this.startDate).endOf('year').format(_index.DATE_FORMAT);
+                        }
+                    } else {
+                        var start = this.localeMoment(this.startDate);
+                        var end = this.localeMoment(this.endDate).add(1, 'days');
 
-                    if (this.selectDate !== undefined) {
-                        var selectDate = this.localeMoment(this.selectDate);
-                        if (selectDate >= start && selectDate < end) {
-                            date = this.selectDate;
+                        if (this.selectDate !== undefined) {
+                            var selectDate = this.localeMoment(this.selectDate);
+                            if (selectDate >= start && selectDate < end) {
+                                date = this.selectDate;
+                            }
                         }
-                    }
 
-                    var now = this.localeMoment();
-                    if (now >= start && now < end) {
-                        date = now.format(_index.DATE_FORMAT);
+                        var now = this.localeMoment();
+                        if (now >= start && now < end) {
+                            date = now.format(_index.DATE_FORMAT);
+                        }
+
+                        if (viewType === _index.ViewTypes.Day) {
+                            this.startDate = date;
+                            this.endDate = this.startDate;
+                            this.cellUnit = _index.CellUnits.Hour;
+                        } else if (viewType === _index.ViewTypes.Week) {
+                            this.startDate = this.localeMoment(date).startOf('week').format(_index.DATE_FORMAT);
+                            this.endDate = this.localeMoment(this.startDate).endOf('week').format(_index.DATE_FORMAT);
+                        } else if (viewType === _index.ViewTypes.Month) {
+                            this.startDate = this.localeMoment(date).startOf('month').format(_index.DATE_FORMAT);
+                            this.endDate = this.localeMoment(this.startDate).endOf('month').format(_index.DATE_FORMAT);
+                        } else if (viewType === _index.ViewTypes.Quarter) {
+                            this.startDate = this.localeMoment(date).startOf('quarter').format(_index.DATE_FORMAT);
+                            this.endDate = this.localeMoment(this.startDate).endOf('quarter').format(_index.DATE_FORMAT);
+                        }
                     }
 
-                    if (viewType === _index.ViewTypes.Day) {
-                        this.startDate = date;
-                        this.endDate = this.startDate;
-                    } else if (viewType === _index.ViewTypes.Week) {
-                        this.startDate = this.localeMoment(date).startOf('week').format(_index.DATE_FORMAT);
-                        this.endDate = this.localeMoment(this.startDate).endOf('week').format(_index.DATE_FORMAT);
-                    } else if (viewType === _index.ViewTypes.Month) {
-                        this.startDate = this.localeMoment(date).startOf('month').format(_index.DATE_FORMAT);
-                        this.endDate = this.localeMoment(this.startDate).endOf('month').format(_index.DATE_FORMAT);
-                    } else if (viewType === _index.ViewTypes.Quarter) {
-                        this.startDate = this.localeMoment(date).startOf('quarter').format(_index.DATE_FORMAT);
-                        this.endDate = this.localeMoment(this.startDate).endOf('quarter').format(_index.DATE_FORMAT);
-                    }
+                    this.viewType = viewType;
                 }
 
-                this.viewType = viewType;
                 this.events = [];
@@ -320,3 +327,3 @@ this._createHeaders();
 
-            return this.viewType === _index.ViewTypes.Week ? this.config.weekResourceTableWidth : this.viewType === _index.ViewTypes.Day ? this.config.dayResourceTableWidth : this.viewType === _index.ViewTypes.Month ? this.config.monthResourceTableWidth : this.viewType === _index.ViewTypes.Year ? this.config.yearResourceTableWidth : this.config.quarterResourceTableWidth;
+            return this.viewType === _index.ViewTypes.Week ? this.config.weekResourceTableWidth : this.viewType === _index.ViewTypes.Day ? this.config.dayResourceTableWidth : this.viewType === _index.ViewTypes.Month ? this.config.monthResourceTableWidth : this.viewType === _index.ViewTypes.Year ? this.config.yearResourceTableWidth : this.viewType === _index.ViewTypes.Quarter ? this.config.quarterResourceTableWidth : this.config.customResourceTableWidth;
         }
@@ -326,3 +333,3 @@ }, {
         value: function getContentCellWidth() {
-            return this.viewType === _index.ViewTypes.Week ? this.config.weekCellWidth : this.viewType === _index.ViewTypes.Day ? this.config.dayCellWidth : this.viewType === _index.ViewTypes.Month ? this.config.monthCellWidth : this.viewType === _index.ViewTypes.Year ? this.config.yearCellWidth : this.config.quarterCellWidth;
+            return this.viewType === _index.ViewTypes.Week ? this.config.weekCellWidth : this.viewType === _index.ViewTypes.Day ? this.config.dayCellWidth : this.viewType === _index.ViewTypes.Month ? this.config.monthCellWidth : this.viewType === _index.ViewTypes.Year ? this.config.yearCellWidth : this.viewType === _index.ViewTypes.Quarter ? this.config.quarterCellWidth : this.config.customCellWidth;
         }
@@ -332,3 +339,3 @@ }, {
         value: function getCellMaxEvents() {
-            return this.viewType === _index.ViewTypes.Week ? this.config.weekMaxEvents : this.viewType === _index.ViewTypes.Day ? this.config.dayMaxEvents : this.viewType === _index.ViewTypes.Month ? this.config.monthMaxEvents : this.viewType === _index.ViewTypes.Year ? this.config.yearMaxEvents : this.config.quarterMaxEvents;
+            return this.viewType === _index.ViewTypes.Week ? this.config.weekMaxEvents : this.viewType === _index.ViewTypes.Day ? this.config.dayMaxEvents : this.viewType === _index.ViewTypes.Month ? this.config.monthMaxEvents : this.viewType === _index.ViewTypes.Year ? this.config.yearMaxEvents : this.viewType === _index.ViewTypes.Quarter ? this.config.quarterMaxEvents : this.config.customMaxEvents;
         }
@@ -347,3 +354,3 @@ }, {
 
-            if (this.viewType !== _index.ViewTypes.Day) dateLabel = start.format('LL') + '-' + end.format('LL');
+            if (start != end) dateLabel = start.format('LL') + '-' + end.format('LL');
 
@@ -426,6 +433,10 @@ if (!!this.behaviors.getDateLabelFunc) dateLabel = this.behaviors.getDateLabelFunc(this, this.viewType, this.startDate, this.endDate);
                 var windowStart = _this2.localeMoment(_this2.startDate),
-                    windowEnd = _this2.localeMoment(_this2.endDate),
+                    windowEnd = _this2.localeMoment(_this2.endDate).add(1, 'days'),
                     oldStart = _this2.localeMoment(item.start),
                     oldEnd = _this2.localeMoment(item.end),
-                    rule = _rrule2.default.fromString(item.rrule);
+                    rule = (0, _rrule.rrulestr)(item.rrule),
+                    oldDtstart = undefined;
+                if (!!rule.origOptions.dtstart) {
+                    oldDtstart = _this2.localeMoment(rule.origOptions.dtstart);
+                }
                 rule.origOptions.dtstart = oldStart.toDate();
@@ -437,3 +448,17 @@ if (!rule.origOptions.until || windowEnd < _this2.localeMoment(rule.origOptions.until)) {
                 //reload
-                rule = _rrule2.default.fromString(rule.toString());
+                rule = (0, _rrule.rrulestr)(rule.toString());
+                if (item.exdates || item.exrule) {
+                    var rruleSet = new _rrule.RRuleSet();
+                    rruleSet.rrule(rule);
+                    if (item.exrule) {
+                        rruleSet.exrule((0, _rrule.rrulestr)(item.exrule));
+                    }
+                    if (item.exdates) {
+                        item.exdates.forEach(function (exdate) {
+                            rruleSet.exdate(_this2.localeMoment(exdate).toDate());
+                        });
+                    }
+                    rule = rruleSet;
+                }
+
                 var all = rule.all();
@@ -443,2 +468,4 @@ var newEvents = all.map(function (time, index) {
                         recurringEventId: item.id,
+                        recurringEventStart: item.start,
+                        recurringEventEnd: item.end,
                         id: item.id + '-' + index,
@@ -452,3 +479,3 @@ start: _this2.localeMoment(time).format(_index.DATETIME_FORMAT),
                         eventEnd = _this2.localeMoment(newEvent.end);
-                    if (_this2.isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd)) {
+                    if (_this2.isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd) && (!oldDtstart || eventStart >= oldDtstart)) {
                         _this2._attachEvent(newEvent);
@@ -481,2 +508,11 @@ }
                 this.endDate = this.localeMoment(this.startDate).endOf('year').format(_index.DATE_FORMAT);
+            } else if (this.viewType === _index.ViewTypes.Custom || this.viewType === _index.ViewTypes.Custom1 || this.viewType === _index.ViewTypes.Custom2) {
+                if (this.behaviors.getCustomDateFunc != undefined) {
+                    var customDate = this.behaviors.getCustomDateFunc(this, num, date);
+                    this.startDate = customDate.startDate;
+                    this.endDate = customDate.endDate;
+                    if (!!customDate.cellUnit) this.cellUnit = customDate.cellUnit;
+                } else {
+                    throw new Error('This is custom view type, set behaviors.getCustomDateFunc func to resolve the time window(startDate and endDate) yourself');
+                }
             }
@@ -495,3 +531,3 @@ }
             } else {
-                if (this.viewType === _index.ViewTypes.Day) {
+                if (this.cellUnit === _index.CellUnits.Hour) {
                     start = start.add(this.config.dayStartFrom, 'hours');
@@ -514,4 +550,7 @@ end = end.add(this.config.dayStopTo, 'hours');
                         var _time = header.format(_index.DATETIME_FORMAT);
-                        var _nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, _time);
-                        headers.push({ time: _time, nonWorkingTime: _nonWorkingTime });
+                        var dayOfWeek = header.weekday();
+                        if (this.config.displayWeekend || dayOfWeek !== 0 && dayOfWeek !== 6) {
+                            var _nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, _time);
+                            headers.push({ time: _time, nonWorkingTime: _nonWorkingTime });
+                        }
 
@@ -530,3 +569,3 @@ header = header.add(1, 'days');
                 startValue = start.format(_index.DATETIME_FORMAT);
-            var endValue = this.showAgenda ? this.viewType === _index.ViewTypes.Week ? start.add(1, 'weeks').format(_index.DATETIME_FORMAT) : this.viewType === _index.ViewTypes.Day ? start.add(1, 'days').format(_index.DATETIME_FORMAT) : this.viewType === _index.ViewTypes.Month ? start.add(1, 'months').format(_index.DATETIME_FORMAT) : this.viewType === _index.ViewTypes.Year ? start.add(1, 'years').format(_index.DATETIME_FORMAT) : start.add(1, 'quarters').format(_index.DATETIME_FORMAT) : this.viewType === _index.ViewTypes.Day ? start.add(this.config.minuteStep, 'minutes').format(_index.DATETIME_FORMAT) : start.add(1, 'days').format(_index.DATETIME_FORMAT);
+            var endValue = this.showAgenda ? this.viewType === _index.ViewTypes.Week ? start.add(1, 'weeks').format(_index.DATETIME_FORMAT) : this.viewType === _index.ViewTypes.Day ? start.add(1, 'days').format(_index.DATETIME_FORMAT) : this.viewType === _index.ViewTypes.Month ? start.add(1, 'months').format(_index.DATETIME_FORMAT) : this.viewType === _index.ViewTypes.Year ? start.add(1, 'years').format(_index.DATETIME_FORMAT) : this.viewType === _index.ViewTypes.Quarter ? start.add(1, 'quarters').format(_index.DATETIME_FORMAT) : this.localeMoment(this.endDate).add(1, 'days').format(_index.DATETIME_FORMAT) : this.cellUnit === _index.CellUnits.Hour ? start.add(this.config.minuteStep, 'minutes').format(_index.DATETIME_FORMAT) : start.add(1, 'days').format(_index.DATETIME_FORMAT);
             return {
@@ -636,3 +675,3 @@ time: header.time,
                     var spanStart = this.localeMoment(header.time),
-                        spanEnd = this.viewType === _index.ViewTypes.Day ? this.localeMoment(header.time).add(this.config.minuteStep, 'minutes') : this.localeMoment(header.time).add(1, 'days');
+                        spanEnd = this.cellUnit === _index.CellUnits.Hour ? this.localeMoment(header.time).add(this.config.minuteStep, 'minutes') : this.localeMoment(header.time).add(1, 'days');
 
@@ -767,2 +806,8 @@ if (spanStart < end && spanEnd > start) {
                             var render = headerStart <= eventStart || index === 0;
+                            if (render === false) {
+                                var previousHeader = resourceEvents.headerItems[index - 1];
+                                var previousHeaderStart = _this5.localeMoment(previousHeader.start),
+                                    previousHeaderEnd = _this5.localeMoment(previousHeader.end);
+                                if (previousHeaderEnd <= eventStart || previousHeaderStart >= eventEnd) render = true;
+                            }
                             header.events[pos] = _this5._createHeaderEvent(render, span, item);
@@ -769,0 +814,0 @@ }

lib/ViewTypes.js

@@ -11,5 +11,8 @@ "use strict";
     Quarter: 3,
-    Year: 4
+    Year: 4,
+    Custom: 5,
+    Custom1: 6,
+    Custom2: 7
 };
 
 exports.default = ViewTypes;

package.json

 {
   "name": "react-big-scheduler",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A scheduler and resource planning component built for React and made for modern browsers (IE10+)",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -129,5 +129,7 @@ react-big-scheduler
  view type, and will render the time window of the `2017-12` month in `ViewTypes.Month` view type. 
- * `viewType` is the initial view type, now Scheduler supports `Day`, `Week`, `Month`, `Quarter`, `Year` 5 view types. 
- `viewType`, `showAgenda` and `isEventPerspective` are a group which should be contained in the SchedulerData.config.views 
- array, and they together decide which view should be rendered. When `showAgenda` and `isEventPerspective` are both `false`, 
+ * `viewType` is the initial view type, now Scheduler supports `Day`, `Week`, `Month`, `Quarter`, `Year` 5 built-in view types,
+ in addition Scheduler now supports `Custom`, `Custom1`, `Custom2` 3 custom view types at the same time, in which you can control 
+ the time window yourself, refer to [this example](https://stephenchou1017.github.io/scheduler/#/customtimewindow). `viewType`, 
+ `showAgenda` and `isEventPerspective` are a group which should be contained in the SchedulerData.config.views array, 
+ and they together decide which view should be rendered. When `showAgenda` and `isEventPerspective` are both `false`, 
  Scheduler will render the resource view, refer to [this example](https://stephenchou1017.github.io/scheduler/#/views).
@@ -435,2 +437,8 @@ * `showAgenda` is a bool value, if true, Scheduler will display the agenda view of current view type. Agenda view is
 
+  #### displayWeekend
+  Controls Scheduler whether to display weekends in non-agenda view, default `true`.
+
+  #### relativeMove
+  Controls Scheduler whether to move events(only DnDTypes.EVENT type) relatively or absolutely, default `true`, means relatively.
+
   #### minuteStep
@@ -575,2 +583,20 @@ Minute step for day view type in non-agenda view, can be 10, 12, 15, 20, 30, 60, etc, default 30.
   Use this function, you can customize the table header cell style.  Refer to [this example](https://stephenchou1017.github.io/scheduler/#/customtableheaders).
+
+  #### onScrollLeft, onScrollRight
+  ```js
+  onScrollLeft: PropTypes.func
+  onScrollLeft(schedulerData, schedulerContent, maxScrollLeft)
+  onScrollRight: PropTypes.func
+  onScrollRight(schedulerData, schedulerContent, maxScrollLeft)
+  ```
+  Callback function fired when the scheduler content div scrolls to leftmost or rightmost. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/infinitescroll).
+
+  #### onScrollTop, onScrollBottom
+  ```js
+  onScrollTop: PropTypes.func
+  onScrollTop(schedulerData, schedulerContent, maxScrollTop)
+  onScrollBottom: PropTypes.func
+  onScrollBottom(schedulerData, schedulerContent, maxScrollTop)
+  ```
+  Callback function fired when the scheduler content div scrolls to topmost or bottommost. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/infinitescroll).
   
@@ -577,0 +603,0 @@ #### slotClickedFunc

No alert changes

Improved metrics

Total package byte prevSize

239880

increased by6.85%

Number of package files

30

increased by3.45%

Lines of code

4045

increased by6.11%

Number of lines in readme file

661

increased by4.09%

No dependency changes