react-big-schedule 5.2.0 → 5.3.0

package/dist/components/AgendaEventItem.js

@@ -58,7 +58,7 @@ function AgendaEventItem(props) {
   };
   var eventLink = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
     type: "button",
-    className: "day-event txt-btn-dis",
+    className: "day-event rbs-txt-btn-dis",
     onClick: handleClick,
     children: eventItemTemplate
   });

package/dist/components/AgendaResourceEvents.js

@@ -49,7 +49,7 @@ function AgendaResourceEvents(props) {
     return [];
   });
   var slotItemContent = slotClickedFunc ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    className: "txt-btn-dis",
+    className: "rbs-txt-btn-dis",
     type: "button",
     onClick: function onClick() {
       return slotClickedFunc(schedulerData, resourceEvents);

package/dist/components/EventItem.js

@@ -678,7 +678,6 @@ var EventItem = /*#__PURE__*/function (_Component) {
         placement: isPopoverPlacementMousePosition ? mousePositionPlacement : popoverPlacement,
         content: content,
         trigger: config.eventItemPopoverTrigger,
-        overlayClassName: "scheduler-event-item-popover",
         children: aItem
       });
     }

package/dist/components/EventItemPopover.js

@@ -34,7 +34,7 @@ function EventItemPopover(_ref) {
   var renderViewEvent = function renderViewEvent(text, clickHandler) {
     var marginLeft = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      className: "header2-text txt-btn-dis",
+      className: "header2-text rbs-txt-btn-dis",
       type: "button",
       style: {
         color: '#108EE9',

package/dist/components/ResourceEvents.js

@@ -336,9 +336,44 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
               var isEnd = eventEnd <= durationEnd;
               var _left = index * cellWidth + (index > 0 ? 2 : 3);
               var _width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
+              var dayStart = localeDayjs(new Date(headerItem.start)).startOf('day');
+              var dayDurationMinutes = 1440;
+              var baseCellWidth = cellWidth - (index > 0 ? 5 : 6);
+              if (cellUnit === _default2.CellUnit.Day) {
+                if (evt.span === 1) {
+                  var startOffsetMinutes = eventStart.diff(dayStart, 'minute');
+                  var eventDurationMinutes = eventEnd.diff(eventStart, 'minute');
+                  var startPercentage = startOffsetMinutes / dayDurationMinutes;
+                  var durationPercentage = eventDurationMinutes / dayDurationMinutes;
+                  var leftOffset = baseCellWidth * startPercentage;
+                  var eventWidth = baseCellWidth * durationPercentage;
+                  _left = index * cellWidth + (index > 0 ? 2 : 3) + leftOffset;
+                  _width = Math.max(1, eventWidth); // ensure minimum width of 1px
+                } else {
+                  var headerStart = localeDayjs(new Date(headerItem.start));
+                  var headerEnd = localeDayjs(new Date(headerItem.end));
+                  var isFirstDay = eventStart >= headerStart && eventStart < headerEnd;
+                  if (isFirstDay) {
+                    var eventStartDayStart = eventStart.startOf('day');
+                    var eventEndDayEnd = eventEnd.endOf('day');
+                    var totalSpanMinutes = eventEndDayEnd.diff(eventStartDayStart, 'minute');
+                    var eventStartOffsetMinutes = eventStart.diff(eventStartDayStart, 'minute');
+                    var _eventDurationMinutes = eventEnd.diff(eventStart, 'minute');
+                    var _startPercentage = eventStartOffsetMinutes / dayDurationMinutes;
+                    var _durationPercentage = totalSpanMinutes > 0 ? _eventDurationMinutes / totalSpanMinutes : 1;
+                    var totalWidth = evt.span * cellWidth - (index > 0 ? 5 : 6);
+                    var _leftOffset = cellWidth * _startPercentage;
+                    var _eventWidth = totalWidth * _durationPercentage;
+                    _left = index * cellWidth + (index > 0 ? 2 : 3) + _leftOffset;
+                    _width = Math.max(1, _eventWidth);
+                  }
+                }
+              } else {
+                _width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
+              }
               var top = marginTop + idx * config.eventItemLineHeight;
               var eventItem = /*#__PURE__*/(0, _react.createElement)(_EventItem["default"], _objectSpread(_objectSpread({}, _this2.props), {}, {
-                key: evt.eventItem.id,
+                key: "".concat(evt.eventItem.id, "_").concat(headerItem.time),
                 eventItem: evt.eventItem,
                 dndSource: dndSource,
                 isStart: isStart,

package/dist/components/ResourceView.js

@@ -36,13 +36,12 @@ function ResourceView(_ref) {
       className: "expander-space"
     }, "es".concat(item.indent));
     var iconProps = {
-      key: "es".concat(item.indent),
       onClick: function onClick() {
         return handleToggleExpand(item);
       }
     };
     if (item.hasChildren) {
-      indent = item.expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MinusSquareOutlined, _objectSpread({}, iconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusSquareOutlined, _objectSpread({}, iconProps));
+      indent = item.expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MinusSquareOutlined, _objectSpread({}, iconProps), "es".concat(item.indent)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusSquareOutlined, _objectSpread({}, iconProps), "es".concat(item.indent));
     }
     indents.push(indent);
     var slotCell = slotClickedFunc ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
@@ -52,7 +51,7 @@ function ResourceView(_ref) {
         style: {
           cursor: 'pointer'
         },
-        className: "slot-text txt-btn-dis",
+        className: "slot-text rbs-txt-btn-dis",
         onClick: function onClick() {
           return slotClickedFunc(schedulerData, item);
         },
@@ -62,7 +61,7 @@ function ResourceView(_ref) {
       className: "slot-cell",
       children: [indents, /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         type: "button",
-        className: "slot-text txt-btn-dis",
+        className: "slot-text rbs-txt-btn-dis",
         style: {
           cursor: slotClickedFunc === undefined ? undefined : 'pointer'
         },

package/dist/css/style.css

@@ -1,262 +1,256 @@
-.rbs *,
-.rbs *::before,
-.rbs *::after {
-  box-sizing: border-box;
-}
-
-/* Text Styles */
-.rbs .header1-text {
-  font-size: 25px;
-  color: #90cdf9;
-  font-weight: 500;
-}
-
-.rbs .header2-text,
-.rbs .header3-text,
-.rbs .base-text,
-.rbs .help-text,
-.rbs .disabled-text {
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.rbs .header2-text {
-  font-size: 14px;
-}
-
-.rbs .help-text {
-  color: #999;
-}
-
-.rbs .disabled-text {
-  color: #ccc;
-}
-
-/* Scheduler Components */
-.rbs {
-  margin: 20px auto;
-  border-spacing: 0;
-}
-
-.rbs td {
-  padding: 0;
-}
-
-.rbs .resource-view {
-  border: 1px solid #e9e9e9;
-  overflow: hidden;
-}
-
-.rbs .scheduler-view {
-  border: 1px solid #e9e9e9;
-  margin: 0 0 0 -1px;
-  padding: 0;
-}
-
-/* Positioning */
-.rbs .scheduler-content {
-  position: relative;
-  z-index: 2;
-}
-
-.rbs .scheduler-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-}
-
-.rbs .expander-space {
-  overflow: hidden;
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  line-height: 1em;
-  font-size: 0.9em;
-  vertical-align: middle;
-  margin-top: -1%;
-}
-
-/* Tables */
-.rbs table.resource-table,
-.rbs table.scheduler-bg-table,
-.rbs table.scheduler-table,
-.rbs table.scheduler-content-table {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border-spacing: 0;
-}
-
-.rbs table.resource-table,
-.rbs table.scheduler-bg-table,
-.rbs table.scheduler-table {
-  text-align: center;
-}
-
-.rbs table.scheduler-table {
-  border: 1px solid #e9e9e9;
-}
-
-.rbs table.scheduler-content-table {
-  border: 0 solid #e9e9e9;
-}
-
-/* Table Borders */
-.rbs table.resource-table tr,
-.rbs table.scheduler-bg-table tr,
-.rbs table.scheduler-table tr {
-  border-bottom: 1px solid #e9e9e9;
-}
-
-.rbs table.resource-table th,
-.rbs table.scheduler-table th,
-.rbs table.resource-table td,
-.rbs table.scheduler-bg-table td,
-.rbs table.scheduler-table td,
-.rbs table.scheduler-bg-table th {
-  border-right: 1px solid #e9e9e9;
-  border-bottom: 1px solid #e9e9e9;
-}
-
-.rbs table.resource-table tr th:last-child,
-.rbs table.scheduler-table tr th:last-child,
-.rbs table.resource-table tr td:last-child,
-.rbs table.scheduler-table tr td:last-child {
-  border-right: 0;
-}
-
-.rbs table.scheduler-table tr:last-child td {
-  border-bottom: 0;
-}
-
-/* Events */
-.rbs .timeline-event {
-  position: absolute;
-  cursor: pointer;
-}
-
-.rbs .day-event {
-  position: relative;
-  display: inline-block;
-  margin: 0 5px;
-}
-
-.rbs .day-event-container {
-  text-align: left;
-  padding: 5px 5px 0;
-}
-
-.rbs .event-container {
-  position: relative;
-}
-
-.rbs .event-item {
-  margin: 1px 0;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #fff;
-  padding-right: 20px !important;
-}
-
-/* Rounded Borders */
-.rbs .round-all {
-  border-radius: 14px;
-}
-
-.rbs .round-head {
-  border-radius: 14px 0 0 14px;
-}
-
-.rbs .round-tail {
-  border-radius: 0 14px 14px 0;
-}
-
-.rbs .round-none {
-  border-radius: 0;
-}
-
-/* Utilities */
-.rbs .overflow-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 5px !important;
-}
-
-.rbs .status-dot {
-  width: 14px;
-  height: 14px;
-  border-radius: 7px;
-}
-
-.rbs .selected-area {
-  position: absolute;
-}
-
-/* Slots and Cells */
-.rbs .slot-cell,
-.rbs .slot-text {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
-.rbs .slot-text {
-  display: inline-block;
-}
-
-/* ANT Design Components */
-.rbs .ant-radio-button-wrapper-checked {
-  background-color: #108ee9;
-  color: #ffffff;
-}
-
-.rbs .icon-nav:hover {
-  color: #1e90ff !important;
-  box-shadow: 0 0 0 !important;
-  cursor: pointer;
-}
-
-/* Popover and Overlay */
-.rbs-add-more-popover-overlay {
-  position: absolute;
-  z-index: 5;
-  border: 1px solid #e5e5e5;
-  background-color: #fff;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
-  padding: 10px;
-}
-
-.rbs-popover-calendar {
-  width: 300px;
-}
-
-/* Resizable Elements */
-.rbs .event-resizer {
-  position: absolute;
-  z-index: 4;
-  display: block;
-  width: 7px;
-  top: -1px;
-  bottom: -1px;
-}
-
-.rbs .event-start-resizer {
-  cursor: w-resize;
-  left: -1px;
-}
-
-.rbs .event-end-resizer {
-  cursor: e-resize;
-  right: -1px;
-}
-
-/* Buttons */
-.rbs .txt-btn-dis {
-  border: none;
-  background-color: transparent;
-}
+.rbs *,
+.rbs *::before,
+.rbs *::after {
+  box-sizing: border-box;
+}
+
+/* Text Styles */
+.rbs .header1-text {
+  font-size: 25px;
+  color: #90cdf9;
+  font-weight: 500;
+}
+
+.rbs .header2-text,
+.rbs .header3-text,
+.rbs .base-text,
+.rbs .help-text,
+.rbs .disabled-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.rbs .header2-text {
+  font-size: 14px;
+}
+
+.rbs .help-text {
+  color: #999;
+}
+
+.rbs .disabled-text {
+  color: #ccc;
+}
+
+/* Scheduler Components */
+.rbs {
+  margin: 20px auto;
+  border-spacing: 0;
+}
+
+.rbs td {
+  padding: 0;
+}
+
+.rbs .resource-view {
+  border: 1px solid #e9e9e9;
+  overflow: hidden;
+}
+
+.rbs .scheduler-view {
+  border: 1px solid #e9e9e9;
+  margin: 0 0 0 -1px;
+  padding: 0;
+}
+
+/* Positioning */
+.rbs .scheduler-content {
+  position: relative;
+  z-index: 2;
+}
+
+.rbs .scheduler-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.rbs .expander-space {
+  overflow: hidden;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1em;
+  font-size: 0.9em;
+  vertical-align: middle;
+  margin-top: -1%;
+}
+
+/* Tables */
+.rbs table.resource-table,
+.rbs table.scheduler-bg-table,
+.rbs table.scheduler-table,
+.rbs table.scheduler-content-table {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border-spacing: 0;
+}
+
+.rbs table.resource-table,
+.rbs table.scheduler-bg-table,
+.rbs table.scheduler-table {
+  text-align: center;
+}
+
+.rbs table.scheduler-table {
+  border: 1px solid #e9e9e9;
+}
+
+.rbs table.scheduler-content-table {
+  border: 0 solid #e9e9e9;
+}
+
+/* Table Borders */
+.rbs table.resource-table tr,
+.rbs table.scheduler-bg-table tr,
+.rbs table.scheduler-table tr {
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.rbs table.resource-table th,
+.rbs table.scheduler-table th,
+.rbs table.resource-table td,
+.rbs table.scheduler-bg-table td,
+.rbs table.scheduler-table td,
+.rbs table.scheduler-bg-table th {
+  border-right: 1px solid #e9e9e9;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.rbs table.resource-table tr th:last-child,
+.rbs table.scheduler-table tr th:last-child,
+.rbs table.resource-table tr td:last-child,
+.rbs table.scheduler-table tr td:last-child {
+  border-right: 0;
+}
+
+.rbs table.scheduler-table tr:last-child td {
+  border-bottom: 0;
+}
+
+/* Events */
+.rbs .timeline-event {
+  position: absolute;
+  cursor: pointer;
+}
+
+.rbs .day-event {
+  position: relative;
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.rbs .day-event-container {
+  text-align: left;
+  padding: 5px 5px 0;
+}
+
+.rbs .event-container {
+  position: relative;
+}
+
+.rbs .event-item {
+  margin: 1px 0;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  padding-right: 20px !important;
+}
+
+/* Rounded Borders */
+.rbs .round-all {
+  border-radius: 14px;
+}
+
+.rbs .round-head {
+  border-radius: 14px 0 0 14px;
+}
+
+.rbs .round-tail {
+  border-radius: 0 14px 14px 0;
+}
+
+.rbs .round-none {
+  border-radius: 0;
+}
+
+/* Utilities */
+.rbs .overflow-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 5px !important;
+}
+
+.rbs .status-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 7px;
+}
+
+.rbs .selected-area {
+  position: absolute;
+}
+
+/* Slots and Cells */
+.rbs .slot-cell,
+.rbs .slot-text {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.rbs .slot-text {
+  display: inline-block;
+}
+
+.rbs .icon-nav:hover {
+  color: #1e90ff !important;
+  box-shadow: 0 0 0 !important;
+  cursor: pointer;
+}
+
+/* Popover and Overlay */
+.rbs-add-more-popover-overlay {
+  position: absolute;
+  z-index: 5;
+  border: 1px solid #e5e5e5;
+  background-color: #fff;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
+  padding: 10px;
+}
+
+.rbs-popover-calendar {
+  width: 300px;
+}
+
+/* Resizable Elements */
+.rbs .event-resizer {
+  position: absolute;
+  z-index: 4;
+  display: block;
+  width: 7px;
+  top: -1px;
+  bottom: -1px;
+}
+
+.rbs .event-start-resizer {
+  cursor: w-resize;
+  left: -1px;
+}
+
+.rbs .event-end-resizer {
+  cursor: e-resize;
+  right: -1px;
+}
+
+/* Buttons */
+.rbs-txt-btn-dis {
+  border: none;
+  background-color: transparent;
+}