makula-schedule 2.0.0 → 2.1.0

package/dist/components/EventItem.js

@@ -159,19 +159,32 @@ var EventItem = /*#__PURE__*/function (_Component) {
         leftIndex = _this$props3.leftIndex,
         rightIndex = _this$props3.rightIndex,
         schedulerData = _this$props3.schedulerData;
+      var config = schedulerData.config;
       var cellWidth = schedulerData.getContentCellWidth();
       var offset = leftIndex > 0 ? 5 : 6;
       var minWidth = cellWidth - offset;
       var maxWidth = rightIndex * cellWidth - offset;
       var startX = _this.state.startX;
-      var newLeft = left + clientX - startX;
-      var newWidth = width + startX - clientX;
-      if (newWidth < minWidth) {
-        newWidth = minWidth;
-        newLeft = (rightIndex - 1) * cellWidth + (rightIndex - 1 > 0 ? 2 : 3);
-      } else if (newWidth > maxWidth) {
-        newWidth = maxWidth;
-        newLeft = 3;
+      var newLeft;
+      var newWidth;
+      if (config.snapToGrid) {
+        var deltaX = clientX - startX;
+        var snappedCells = Math.round(deltaX / cellWidth);
+        var newLeftIndex = leftIndex + snappedCells;
+        var clampedLeftIndex = Math.max(0, Math.min(newLeftIndex, rightIndex - 1));
+        var clampedOffset = clampedLeftIndex > 0 ? 5 : 6;
+        newLeft = clampedLeftIndex * cellWidth + (clampedLeftIndex > 0 ? 2 : 3);
+        newWidth = (rightIndex - clampedLeftIndex) * cellWidth - clampedOffset;
+      } else {
+        newLeft = left + clientX - startX;
+        newWidth = width + startX - clientX;
+        if (newWidth < minWidth) {
+          newWidth = minWidth;
+          newLeft = (rightIndex - 1) * cellWidth + (rightIndex - 1 > 0 ? 2 : 3);
+        } else if (newWidth > maxWidth) {
+          newWidth = maxWidth;
+          newLeft = 3;
+        }
       }
       _this.setState({
         left: newLeft,
@@ -321,15 +334,26 @@ var EventItem = /*#__PURE__*/function (_Component) {
       var _this$props6 = _this.props,
         width = _this$props6.width,
         leftIndex = _this$props6.leftIndex,
+        rightIndex = _this$props6.rightIndex,
         schedulerData = _this$props6.schedulerData;
-      var headers = schedulerData.headers;
+      var headers = schedulerData.headers,
+        config = schedulerData.config;
       var cellWidth = schedulerData.getContentCellWidth();
       var offset = leftIndex > 0 ? 5 : 6;
       var minWidth = cellWidth - offset;
       var maxWidth = (headers.length - leftIndex) * cellWidth - offset;
       var endX = _this.state.endX;
-      var newWidth = width + clientX - endX;
-      if (newWidth < minWidth) newWidth = minWidth;else if (newWidth > maxWidth) newWidth = maxWidth;
+      var newWidth;
+      if (config.snapToGrid) {
+        var deltaX = clientX - endX;
+        var snappedCells = Math.round(deltaX / cellWidth);
+        var currentSpan = rightIndex - leftIndex;
+        var newSpan = Math.max(1, Math.min(currentSpan + snappedCells, headers.length - leftIndex));
+        newWidth = newSpan * cellWidth - offset;
+      } else {
+        newWidth = width + clientX - endX;
+        if (newWidth < minWidth) newWidth = minWidth;else if (newWidth > maxWidth) newWidth = maxWidth;
+      }
       _this.setState({
         width: newWidth
       });

package/dist/components/SchedulerData.js

@@ -48,10 +48,10 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
     this.schedulerHeaderHeight = 0;
     this._shouldReloadViewType = false;
     this.calendarPopoverLocale = undefined;
-    _dayjs["default"].extend(_isoWeek["default"]);
     _dayjs["default"].extend(_quarterOfYear["default"]);
     _dayjs["default"].extend(_weekday["default"]);
     _dayjs["default"].extend(_utc["default"]);
+    _dayjs["default"].extend(_isoWeek["default"]);
     this.localeDayjs = _dayjs["default"];
     this.config = newConfig === undefined ? _scheduler["default"] : _objectSpread(_objectSpread({}, _scheduler["default"]), newConfig);
     this._updateLabelsFromI18n();
@@ -1003,7 +1003,7 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
       if (this.showAgenda) return 1;
       var timeBetween = function timeBetween(date1, date2, timeIn) {
         if (timeIn === 'days' || timeIn === 'day') {
-          if (date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth()) {
+          if (date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear()) {
             return 1;
           }
         }
@@ -1049,6 +1049,8 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
       } else if (this.viewType === _default.ViewType.Week || this.viewType === _default.ViewType.Month || this.viewType === _default.ViewType.Quarter || this.viewType === _default.ViewType.Year) {
         var startDate = windowStart < eventStart ? eventStart : windowStart;
         var endDate = windowEnd > eventEnd ? eventEnd : windowEnd;
+        startDate.setHours(0, 0, 0, 0);
+        endDate.setHours(23, 59, 59);
         span = Math.ceil(timeBetween(startDate, endDate, 'days'));
       } else {
         if (this.cellUnit === _default.CellUnit.Day) {

package/dist/config/scheduler.js

@@ -80,6 +80,7 @@ var _default = exports["default"] = {
   relativeMove: true,
   defaultExpanded: true,
   dragAndDropEnabled: true,
+  snapToGrid: false,
   schedulerHeaderEventsFuncsTimeoutMs: 100,
   resourceName: 'Resource Name',
   taskName: 'Task Name',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makula-schedule",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React Big Schedule  is a powerful and intuitive scheduler and resource planning solution built with React. Seamlessly integrate this modern browser-compatible component into your applications to effectively manage time, appointments, and resources. With drag-and-drop functionality, interactive UI, and granular views, react-big-schedule empowers users to effortlessly schedule and allocate resources with precision. Enhance productivity and streamline your workflow with this React-based solution, designed to optimize time management and simplify calendar-based operations. Perfect for applications requiring advanced scheduling capabilities, react-big-schedule offers a seamless and intuitive experience for managing appointments, resource allocation, and time slots. Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning. It is the updated version of react-big-scheduler",
   "keywords": [
     "react-big-schedule",