makula-schedule 2.2.2 → 2.2.4

package/dist/components/EventItem.js

@@ -625,6 +625,20 @@ var EventItem = /*#__PURE__*/function (_Component) {
           return _this2.endResizer = _ref7;
         }
       });
+      var showOverflowArrows = config.overflowArrowsEnabled !== false;
+      var arrowStyle = {
+        lineHeight: "".concat(config.eventItemHeight, "px")
+      };
+      var showLeftArrow = showOverflowArrows && !isStart;
+      var showRightArrow = showOverflowArrows && !isEnd;
+      var leftArrow = showLeftArrow ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "event-overflow-arrow event-overflow-arrow-left",
+        style: arrowStyle
+      }, "\u2039") : null;
+      var rightArrow = showRightArrow ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "event-overflow-arrow event-overflow-arrow-right",
+        style: arrowStyle
+      }, "\u203A") : null;
       var eventItemTemplate = /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(roundCls, " event-item"),
         key: eventItem.id,
@@ -639,7 +653,7 @@ var EventItem = /*#__PURE__*/function (_Component) {
         }
       }, eventTitle));
       if (eventItemTemplateResolver !== undefined) {
-        eventItemTemplate = eventItemTemplateResolver(schedulerData, eventItem, bgColor, isStart, isEnd, 'event-item', config.eventItemHeight, undefined);
+        eventItemTemplate = eventItemTemplateResolver(schedulerData, eventItem, bgColor, isStart, isEnd, 'event-item', config.eventItemHeight, undefined, showLeftArrow, showRightArrow);
       }
       var a = /*#__PURE__*/_react["default"].createElement("a", {
         className: "timeline-event",
@@ -653,7 +667,7 @@ var EventItem = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           if (eventItemClick) eventItemClick(schedulerData, eventItem);
         }
-      }, eventItemTemplate, startResizeDiv, endResizeDiv);
+      }, leftArrow, eventItemTemplate, startResizeDiv, endResizeDiv, rightArrow);
       var getMousePositionOptionsData = function getMousePositionOptionsData() {
         var popoverOffsetX = 0;
         var mousePositionPlacement = '';

package/dist/components/ResourceEvents.js

@@ -369,6 +369,17 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
               } else {
                 _width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
               }
+              if (config.overflowArrowsEnabled !== false) {
+                if (!isStart) {
+                  var originalLeft = _left;
+                  _left = index * cellWidth;
+                  _width += originalLeft - _left;
+                }
+                if (!isEnd) {
+                  var rightEdge = (index + evt.span) * cellWidth;
+                  _width = rightEdge - _left;
+                }
+              }
               var top = marginTop + idx * config.eventItemLineHeight;
               var eventItem = /*#__PURE__*/_react["default"].createElement(_EventItem["default"], _extends({}, _this2.props, {
                 key: "".concat(evt.eventItem.id, "_").concat(headerItem.time),

package/dist/components/SchedulerData.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
-var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
 var _quarterOfYear = _interopRequireDefault(require("dayjs/plugin/quarterOfYear"));
 var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
 var _weekday = _interopRequireDefault(require("dayjs/plugin/weekday"));
+var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
 var _rrule = require("rrule");
 var _default = require("../config/default");
 var _scheduler = _interopRequireDefault(require("../config/scheduler"));
@@ -1158,11 +1158,38 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
           var span = _this6._getSpan(item.start, item.end, _this6.headers);
           var eventStart = new Date(item.start);
           var eventEnd = new Date(item.end);
-          var pos = -1;
+
+          // Collect all overlapping headers first
+          var overlappingHeaders = [];
           resourceEvents.headerItems.forEach(function (header, index) {
             var headerStart = new Date(header.start);
             var headerEnd = new Date(header.end);
             if (headerEnd > eventStart && headerStart < eventEnd) {
+              overlappingHeaders.push({
+                header: header,
+                index: index
+              });
+            }
+          });
+          if (overlappingHeaders.length > 0) {
+            // Find a pos that is free across ALL overlapping headers
+            var pos = 0;
+            var posFound = false;
+            while (!posFound) {
+              posFound = true;
+              for (var i = 0; i < overlappingHeaders.length; i += 1) {
+                if (overlappingHeaders[i].header.events[pos] !== undefined) {
+                  posFound = false;
+                  pos += 1;
+                  break;
+                }
+              }
+            }
+
+            // Place the event at the found pos across all overlapping headers
+            overlappingHeaders.forEach(function (_ref6) {
+              var header = _ref6.header,
+                index = _ref6.index;
               header.count += 1;
               if (header.count > resourceEvents.rowMaxCount) {
                 resourceEvents.rowMaxCount = header.count;
@@ -1170,11 +1197,7 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
                 var newRowHeight = rowsCount * _this6.config.eventItemLineHeight + (_this6.config.creatable && _this6.config.checkConflict === false ? 20 : 2);
                 if (newRowHeight > resourceEvents.rowHeight) resourceEvents.rowHeight = newRowHeight;
               }
-              if (pos === -1) {
-                var tmp = 0;
-                while (header.events[tmp] !== undefined) tmp += 1;
-                pos = tmp;
-              }
+              var headerStart = new Date(header.start);
               var render = headerStart <= eventStart || index === 0;
               if (render === false) {
                 var previousHeader = resourceEvents.headerItems[index - 1];
@@ -1183,8 +1206,8 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
                 if (previousHeaderEnd <= eventStart || previousHeaderStart >= eventEnd) render = true;
               }
               header.events[pos] = _this6._createHeaderEvent(render, span, item);
-            }
-          });
+            });
+          }
         }
       });
       if (cellMaxEventsCount <= cellMaxEventsCountValue || this.behaviors.getSummaryFunc !== undefined) {

package/dist/config/scheduler.js

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

package/dist/index.d.ts

@@ -24,7 +24,9 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
     isEnd: boolean,
     mustAddCssClass: string,
     mustBeHeight: number,
-    agendaMaxEventWidth: number
+    agendaMaxEventWidth: number,
+    showLeftArrow?: boolean,
+    showRightArrow?: boolean
   ) => void;
   CustomEventPopover?: (
     schedulerData: SchedulerData<EventType>,
@@ -404,6 +406,7 @@ export interface SchedulerDataConfig {
   relativeMove?: boolean;
   defaultExpanded?: boolean;
   dragAndDropEnabled?: boolean;
+  overflowArrowsEnabled?: boolean;
   snapToGrid?: boolean;
   schedulerHeaderEventsFuncsTimeoutMs?: number;
   resourceName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makula-schedule",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "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",