react-big-schedule 7.1.1-beta.3 → 8.0.0

package/README.md

@@ -107,6 +107,16 @@ We would like to acknowledge the following projects for their inspiration and co
 We are continuously working on enhancing react-big-schedule and welcome your feedback and suggestions for future improvements.
 
 
+## Supported versions
+
+Only **8.0.0 or later** is supported. Issues and security reports for older versions are not handled; please upgrade to the latest release first.
+
+### Upgrading to 8.0
+
+- `besidesWidth` and `SchedulerData.setBesidesWidth()` are removed. The scheduler measures its own container, so just delete the option.
+- The locale is kept per `SchedulerData` instance (`setSchedulerLocale` / `localeDayjs.locale`) and no longer changes the global dayjs. Call `dayjs.locale(...)` yourself if your app needs the global locale to change.
+- Events in the vertical resource view can now be moved and resized like in the horizontal views. Set `movable`, `startResizable` and `endResizable` to `false` in the config to keep that view read-only.
+
 ## Use and Setup
 
 1.) To install react-big-schedule, use your preferred package manager:
@@ -276,7 +286,11 @@ const prevClick = data => {
 
 #### Vertical resource view
 
-`ViewType.VerticalResource` shows resources as columns and time as rows. Events render and drag-to-create works across resources and time slots. Moving and resizing existing events by drag is not supported in this view yet (they are read-only there); use the horizontal views for that. Row height grows with the number of overlapping events, like the horizontal views. Refer to [this example](https://react-big-schedule.vercel.app/vertical-view).
+`ViewType.VerticalResource` shows resources as columns and time as rows. Events render and drag-to-create works across resources and time slots. Drag an event to another resource column and/or time row to move it (`moveEvent` receives the resource as `slotId`), and drag its top or bottom edge to change its start or end (`updateEventStart` / `updateEventEnd`). Row height grows with the number of overlapping events, like the horizontal views. Refer to [this example](https://react-big-schedule.vercel.app/vertical-view).
+
+#### Drop preview
+
+While an event, task or resource is dragged over a row, the cells where it would be placed are highlighted. Configure it in the `SchedulerData` config: `dropPreviewEnabled` (default `true`), `dropPreviewClassName` and `dropPreviewStyle` (an inline style object, e.g. `{ border: '2px dashed #52c41a', background: 'rgba(82, 196, 26, 0.16)' }`). Refer to [this example](https://react-big-schedule.vercel.app/drag-and-drop).
 
 #### Weekly / monthly columns
 

package/dist/components/DnDContext.js

@@ -21,6 +21,65 @@ export default class DnDContext {
       initialEnd
     };
   };
+
+  // Vertical resource view: rows are time slots and columns are resources, so the pointer column picks the
+  // resource and the pointer row, relative to the row the event was grabbed in, shifts its time.
+  getVerticalMove = (props, monitor, component) => {
+    const {
+      schedulerData,
+      resourceEvents
+    } = props;
+    const {
+      localeDayjs,
+      config
+    } = schedulerData;
+    const event = monitor.getItem();
+    const pos = getPos(component.eventContainer);
+    const column = Math.floor((monitor.getClientOffset().x - pos.x) / schedulerData.getContentCellWidth());
+    const header = resourceEvents.headerItems[Math.max(0, Math.min(column, resourceEvents.headerItems.length - 1))];
+    if (!header) return null;
+    const grabbedSlotId = this.sourceMap.get(monitor.getItemType())?.dragSlotId ?? resourceEvents.slotId;
+    const shift = localeDayjs(resourceEvents.slotId).diff(localeDayjs(grabbedSlotId));
+    const start = localeDayjs(event.start).add(shift, 'ms');
+    const end = start.add(localeDayjs(event.end).diff(localeDayjs(event.start)), 'ms');
+
+    // crossResourceMove disabled: the event stays in its resource and only moves in time
+    const keepResource = config.crossResourceMove === false;
+    const slotId = keepResource ? schedulerData._getEventSlotId(event) : header.id;
+    const slotName = schedulerData.getSlotById(slotId)?.name;
+    return {
+      slotId,
+      slotName,
+      start: start.format(DATETIME_FORMAT),
+      end: end.format(DATETIME_FORMAT),
+      isVertical: true
+    };
+  };
+
+  // Box shown while dragging: the cells (in this row) the dragged item would cover, as { left, width }.
+  getDropPreview = (resourceEvents, cellWidth, firstIndex, start, end) => {
+    const {
+      headerItems
+    } = resourceEvents;
+    let first = firstIndex;
+    let count = 1;
+    if (start && end) {
+      const from = new Date(start);
+      const to = new Date(end);
+      const covered = headerItems.reduce((acc, header, index) => {
+        if (new Date(header.end) > from && new Date(header.start) < to) acc.push(index);
+        return acc;
+      }, []);
+      if (covered.length > 0) {
+        first = covered[0];
+        count = covered.length;
+      }
+    }
+    return {
+      left: first * cellWidth,
+      width: count * cellWidth
+    };
+  };
   getDropSpec = () => ({
     drop: (props, monitor, component) => {
       const {
@@ -32,6 +91,9 @@ export default class DnDContext {
         localeDayjs
       } = schedulerData;
       const type = monitor.getItemType();
+      if (schedulerData.isVerticalResourceView() && type === DnDTypes.EVENT) {
+        return this.getVerticalMove(props, monitor, component);
+      }
       const pos = getPos(component.eventContainer);
       const cellWidth = schedulerData.getContentCellWidth();
       let initialStartTime = null;
@@ -75,6 +137,16 @@ export default class DnDContext {
       this.config = config;
       const item = monitor.getItem();
       const type = monitor.getItemType();
+      if (schedulerData.isVerticalResourceView() && type === DnDTypes.EVENT) {
+        const move = this.getVerticalMove(props, monitor, component);
+        const column = Math.floor((monitor.getClientOffset().x - getPos(component.eventContainer).x) / schedulerData.getContentCellWidth());
+        const columnIndex = Math.max(0, Math.min(column, resourceEvents.headerItems.length - 1));
+        component.setDropPreview?.(this.getDropPreview(resourceEvents, schedulerData.getContentCellWidth(), columnIndex));
+        if (move && movingEvent) {
+          movingEvent(schedulerData, move.slotId, move.slotName, move.start, move.end, 'Move', type, item);
+        }
+        return;
+      }
       const pos = getPos(component.eventContainer);
       const cellWidth = schedulerData.getContentCellWidth();
       let initialStart = null;
@@ -119,6 +191,7 @@ export default class DnDContext {
         }
         action = 'Move';
       }
+      component.setDropPreview?.(this.getDropPreview(resourceEvents, cellWidth, leftIndex, isEvent ? newStart : undefined, isEvent ? newEnd : undefined));
       if (movingEvent) {
         movingEvent(schedulerData, slotId, slotName, newStart, newEnd, action, type, item);
       }

package/dist/components/DnDSource.js

@@ -4,12 +4,18 @@ export default class DnDSource {
     this.resolveDragObjFunc = resolveDragObjFunc;
     this.dndType = dndType;
     this.DnDEnabled = DnDEnabled;
+    // vertical view: the time row the user grabbed the event in (an event is drawn once per row it covers)
+    this.dragSlotId = undefined;
   }
   getDragSpec = () => ({
     // beginDrag: (props, monitor, component) => this.resolveDragObjFunc(props),
-    beginDrag: props => this.resolveDragObjFunc(props),
+    beginDrag: props => {
+      this.dragSlotId = props.slotId;
+      return this.resolveDragObjFunc(props);
+    },
     // endDrag: (props, monitor, component) => {
     endDrag: (props, monitor) => {
+      this.dragSlotId = undefined;
       if (!monitor.didDrop()) return;
       const {
         moveEvent,
@@ -41,7 +47,9 @@ export default class DnDSource {
       const isEvent = type === DnDTypes.EVENT;
       if (isEvent) {
         const event = item;
-        if (config.relativeMove) {
+        if (dropResult.isVertical) {
+          // the vertical drop already resolved the final start/end (see DnDContext.getVerticalMove)
+        } else if (config.relativeMove) {
           newStart = localeDayjs(event.start).add(localeDayjs(newStart).diff(localeDayjs(new Date(initialStart))), 'ms').format(DATETIME_FORMAT);
         } else if (viewType !== ViewType.Day) {
           const tmpDayjs = localeDayjs(newStart);

package/dist/components/EventItem.js

@@ -211,6 +211,10 @@ class EventItem extends Component {
       conflictOccurred
     } = this.props;
     schedulerData._stopResizing();
+    if (schedulerData.isVerticalResourceView()) {
+      await this.stopVerticalResize(ev, 'start');
+      return;
+    }
     const {
       width: stateWidth
     } = this.state;
@@ -293,6 +297,65 @@ class EventItem extends Component {
       this.subscribeResizeEvent(this.props);
     } else if (updateEventStart !== undefined) updateEventStart(schedulerData, eventItem, newStart);
   };
+
+  // Vertical resource view: rows are time slots, so the row under the pointer gives the new start (its top
+  // edge) or end (its bottom edge). The event is drawn once per row, so this works for any row height.
+  stopVerticalResize = async (ev, dragType) => {
+    const {
+      schedulerData,
+      eventItem,
+      updateEventStart,
+      updateEventEnd,
+      conflictOccurred
+    } = this.props;
+    const {
+      config,
+      events,
+      localeDayjs
+    } = schedulerData;
+    const row = document.elementFromPoint(ev.clientX, ev.clientY)?.closest('[data-slot-id]');
+    if (!row) return;
+    const rowStart = localeDayjs(row.dataset.slotId);
+    const isStart = dragType === 'start';
+    const newStart = isStart ? rowStart.format(DATETIME_FORMAT) : eventItem.start;
+    const newEnd = isStart ? eventItem.end : rowStart.add(config.minuteStep, 'minutes').format(DATETIME_FORMAT);
+    if (!localeDayjs(newEnd).isAfter(localeDayjs(newStart))) return;
+    if (isStart ? newStart === eventItem.start : newEnd === eventItem.end) return;
+    const slotId = schedulerData._getEventSlotId(eventItem);
+    const hasConflict = config.checkConflict && events.some(e => {
+      if (schedulerData._getEventSlotId(e) !== slotId || e.id === eventItem.id) return false;
+      return localeDayjs(newStart).isBefore(localeDayjs(e.end)) && localeDayjs(newEnd).isAfter(localeDayjs(e.start));
+    });
+    if (hasConflict) {
+      conflictOccurred?.(schedulerData, isStart ? 'StartResize' : 'EndResize', eventItem, DnDTypes.EVENT, slotId, schedulerData.getSlotById(slotId)?.name, newStart, newEnd);
+    } else if (isStart) updateEventStart?.(schedulerData, eventItem, newStart);else updateEventEnd?.(schedulerData, eventItem, newEnd);
+  };
+
+  // Vertical resource view: the event is drawn once per time row; only the row holding the event's start
+  // (or end) gets the top (or bottom) handle.
+  getVerticalEdges = () => {
+    const {
+      schedulerData,
+      eventItem,
+      slotId
+    } = this.props;
+    if (!schedulerData.isVerticalResourceView() || !slotId) return {
+      top: true,
+      bottom: true
+    };
+    const {
+      localeDayjs,
+      config
+    } = schedulerData;
+    const rowStart = localeDayjs(slotId);
+    const rowEnd = rowStart.add(config.minuteStep, 'minutes');
+    const eventStart = localeDayjs(eventItem.start);
+    const eventEnd = localeDayjs(eventItem.end);
+    return {
+      top: !eventStart.isBefore(rowStart) && eventStart.isBefore(rowEnd),
+      bottom: eventEnd.isAfter(rowStart) && !eventEnd.isAfter(rowEnd)
+    };
+  };
   cancelStartDrag = ev => {
     ev.stopPropagation();
     this.startResizer.removeEventListener('touchmove', this.doStartDrag, false);
@@ -364,6 +427,10 @@ class EventItem extends Component {
       conflictOccurred
     } = this.props;
     schedulerData._stopResizing();
+    if (schedulerData.isVerticalResourceView()) {
+      await this.stopVerticalResize(ev, 'end');
+      return;
+    }
     const {
       width: stateWidth
     } = this.state;
@@ -544,13 +611,14 @@ class EventItem extends Component {
     });
     const start = localeDayjs(new Date(eventItem.start));
     const eventTitle = isInPopover ? `${start.format('HH:mm')} ${titleText}` : titleText;
+    const verticalEdges = this.getVerticalEdges();
     let startResizeDiv = /*#__PURE__*/_jsx("div", {});
-    if (startResizable(this.props)) startResizeDiv = /*#__PURE__*/_jsx("div", {
+    if (startResizable(this.props) && verticalEdges.top) startResizeDiv = /*#__PURE__*/_jsx("div", {
       className: "event-resizer event-start-resizer",
       ref: ref => this.startResizer = ref
     });
     let endResizeDiv = /*#__PURE__*/_jsx("div", {});
-    if (endResizable(this.props)) endResizeDiv = /*#__PURE__*/_jsx("div", {
+    if (endResizable(this.props) && verticalEdges.bottom) endResizeDiv = /*#__PURE__*/_jsx("div", {
       className: "event-resizer event-end-resizer",
       ref: ref => this.endResizer = ref
     });

package/dist/components/ResourceEvents.js

@@ -47,7 +47,9 @@ class ResourceEvents extends PureComponent {
       // Add vertical selection tracking
       originalStartRowIndex: -1,
       startRowIndex: -1,
-      endRowIndex: -1
+      endRowIndex: -1,
+      // where the dragged item would land (set from the drop target's hover)
+      dropPreview: null
     };
     this.supportTouch = false; // 'ontouchstart' in window;
   }
@@ -81,6 +83,14 @@ class ResourceEvents extends PureComponent {
       width: 0
     });
   }
+  setDropPreview = dropPreview => {
+    if (!Number.isFinite(dropPreview.left) || !Number.isFinite(dropPreview.width)) return;
+    const current = this.state.dropPreview;
+    if (current?.left === dropPreview.left && current?.width === dropPreview.width) return;
+    this.setState({
+      dropPreview
+    });
+  };
   cleanupDragInteraction = () => {
     document.documentElement.removeEventListener('touchmove', this.doDrag, false);
     document.documentElement.removeEventListener('touchend', this.stopDrag, false);
@@ -574,6 +584,7 @@ class ResourceEvents extends PureComponent {
               isStart: isStart,
               isEnd: isEnd,
               isInPopover: false,
+              slotId: resourceEvents.slotId,
               left: left,
               width: width,
               top: top,
@@ -629,13 +640,27 @@ class ResourceEvents extends PureComponent {
         }
       }
     });
+
+    // drop preview: styled box where the item being dragged over this row would be placed
+    const {
+      dropPreview
+    } = this.state;
+    const dropPreviewBox = this.props.isOver && this.props.canDrop && config.dropPreviewEnabled !== false && dropPreview ? /*#__PURE__*/_jsx("div", {
+      className: `drop-preview${config.dropPreviewClassName ? ` ${config.dropPreviewClassName}` : ''}`,
+      style: {
+        left: dropPreview.left,
+        width: dropPreview.width,
+        ...config.dropPreviewStyle
+      }
+    }) : null;
     const eventContainer = /*#__PURE__*/_jsxs("div", {
       ref: this.eventContainerRef,
       className: "event-container",
+      "data-slot-id": resourceEvents.slotId,
       style: {
         height: resourceEvents.rowHeight
       },
-      children: [selectedArea, sharedSelectedArea, verticalSelectionOverlay, eventList]
+      children: [selectedArea, sharedSelectedArea, verticalSelectionOverlay, dropPreviewBox, eventList]
     });
     return /*#__PURE__*/_jsx("tr", {
       children: /*#__PURE__*/_jsx("td", {

package/dist/config/scheduler.js

@@ -58,6 +58,10 @@ export default {
   // month row above the day cells (month names spanning their days), like the week number row
   showMonthRow: false,
   monthRowHeight: 24,
+  // box shown on the row/cell where a dragged event, task or resource would be placed
+  dropPreviewEnabled: true,
+  dropPreviewClassName: '',
+  dropPreviewStyle: undefined,
   startResizable: true,
   endResizable: true,
   movable: true,

package/dist/css/style.css

@@ -165,6 +165,18 @@
   position: relative;
 }
 
+.rbs .drop-preview {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  box-sizing: border-box;
+  pointer-events: none;
+  border: 2px dashed #1677ff;
+  border-radius: 4px;
+  background: rgba(22, 119, 255, 0.14);
+}
+
 .rbs .event-item {
   margin: 1px 0;
   width: 100%;
@@ -277,6 +289,26 @@
   right: -1px;
 }
 
+/* Vertical resource view: events resize from their top / bottom edge */
+.rbs.vertical-view .event-resizer {
+  width: auto;
+  height: 7px;
+  left: -1px;
+  right: -1px;
+  top: auto;
+  bottom: auto;
+}
+
+.rbs.vertical-view .event-start-resizer {
+  cursor: n-resize;
+  top: -1px;
+}
+
+.rbs.vertical-view .event-end-resizer {
+  cursor: s-resize;
+  bottom: -1px;
+}
+
 /* Buttons */
 .rbs-txt-btn-dis {
   border: none;

package/dist/index.d.ts

@@ -422,6 +422,12 @@ export interface SchedulerDataConfig {
   showWeekNumber?: boolean;
   weekNumberRowHeight?: number;
   showMonthRow?: boolean;
+  /** Show a box where the dragged event / task / resource would be placed (default true). */
+  dropPreviewEnabled?: boolean;
+  /** Extra class name for the drop preview box. */
+  dropPreviewClassName?: string;
+  /** Inline style for the drop preview box, e.g. `{ border: '2px dashed green' }`. */
+  dropPreviewStyle?: React.CSSProperties;
   monthRowHeight?: number;
   weekNumberLabel?: string;
   headerBorderColor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "7.1.1-beta.3",
+  "version": "8.0.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",