react-big-schedule 7.1.1-beta.2 → 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:
@@ -274,6 +284,18 @@ 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. 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
+
+Columns are days or hours by default. A custom view (`ViewType.Custom`, `Custom1`, `Custom2`) picks its own cadence through `behaviors.getCustomDateFunc`, which returns `cellUnit: CellUnit.Week`, `CellUnit.Month`, `CellUnit.Quarter` or `CellUnit.Year` along with the date range. Events then span the week/month cells they overlap. Header text comes from `nonAgendaWeekCellHeaderFormat` / `nonAgendaMonthCellHeaderFormat` / `nonAgendaQuarterCellHeaderFormat` / `nonAgendaYearCellHeaderFormat` (use `|` to split a header into lines). Per-cell totals come from `behaviors.getSummaryFunc`. Refer to [this example](https://react-big-schedule.vercel.app/cadence).
+
 #### Theming with antd `ConfigProvider`
 
 The antd parts (header controls, date picker popover, event popover) pick up an antd `ConfigProvider` placed above `<Scheduler>`, so antd theme tokens apply to them. The timeline grid itself is styled by the scheduler's own CSS.
@@ -596,7 +618,7 @@ Used to resolve the locale string of date label of Scheduler component.(Refer to
 The width of Scheduler. Scheduler uses responsive layout so schedulerWidth should be a percentage.
 
 The Scheduler renders inside a container that is `width: 100%` and `max-height: 100%` of its parent, so it fills the parent
-and follows it when resized (it measures that container with a `ResizeObserver`; `besidesWidth` is no longer needed).
+and follows it when resized (it measures that container with a `ResizeObserver`).
 Resource columns keep their configured width and the time columns stretch to fill the rest.
 
 To size it differently, pass `className` (e.g. tailwind classes) or `style` to the `Scheduler` component, for example

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/HeaderView.js

@@ -97,7 +97,8 @@ function HeaderView({
     const formatMap = {
       [CellUnit.Week]: config.nonAgendaWeekCellHeaderFormat,
       [CellUnit.Month]: config.nonAgendaMonthCellHeaderFormat,
-      [CellUnit.Year]: config.nonAgendaYearCellHeaderFormat
+      [CellUnit.Year]: config.nonAgendaYearCellHeaderFormat,
+      [CellUnit.Quarter]: config.nonAgendaQuarterCellHeaderFormat
     };
     return formatMap[cellUnitParam] || config.nonAgendaOtherCellHeaderFormat;
   }, [config]);

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/components/SchedulerData.js

@@ -23,8 +23,6 @@ export default class SchedulerData {
     this.scrollToSpecialDayjs = false;
     this.documentWidth = 0;
     this.documentHeight = 0;
-    // true once the scheduler measures its own container, so besidesWidth (a window-based offset) is not applied
-    this.measuredByContainer = false;
     this.schedulerHeaderHeight = 0;
     this._shouldReloadViewType = false;
     this.version = 0;
@@ -169,12 +167,6 @@ export default class SchedulerData {
       this.bumpVersion();
     }
   }
-  setBesidesWidth(besidesWidth) {
-    if (besidesWidth >= 0 && this.config.besidesWidth !== besidesWidth) {
-      this.config.besidesWidth = besidesWidth;
-      this.bumpVersion();
-    }
-  }
   setUnderneathHeight(underneathHeight) {
     if (underneathHeight >= 0 && this.config.underneathHeight !== underneathHeight) {
       this.config.underneathHeight = underneathHeight;
@@ -389,8 +381,7 @@ export default class SchedulerData {
     return !!contentCellWidth.endsWith && contentCellWidth.endsWith('%');
   }
   getSchedulerWidth() {
-    const besidesWidth = this.measuredByContainer ? 0 : this.config.besidesWidth;
-    const baseWidth = this.documentWidth - besidesWidth > 0 ? this.documentWidth - besidesWidth : 0;
+    const baseWidth = this.documentWidth > 0 ? this.documentWidth : 0;
     return this.isSchedulerResponsive() ? parseInt(baseWidth * Number(this.config.schedulerWidth.slice(0, -1)) / 100, 10) : this.config.schedulerWidth;
   }
   getSchedulerHeight() {
@@ -641,12 +632,6 @@ export default class SchedulerData {
     const configProperty = viewConfigMap[this.viewType] || 'customCellWidth';
     return this.config[configProperty];
   }
-  _setMeasuredByContainer(measuredByContainer) {
-    if (this.measuredByContainer !== measuredByContainer) {
-      this.measuredByContainer = measuredByContainer;
-      this.bumpVersion();
-    }
-  }
   _setDocumentWidth(documentWidth) {
     if (documentWidth >= 0 && documentWidth !== this.documentWidth) {
       this.documentWidth = documentWidth;
@@ -857,6 +842,14 @@ export default class SchedulerData {
         });
         header = header.add(1, 'months').startOf('month');
       }
+    } else if (this.cellUnit === CellUnit.Quarter) {
+      while (header >= start && header <= end) {
+        const time = header.format(DATE_FORMAT);
+        timeSlots.push({
+          time
+        });
+        header = header.add(1, 'quarters').startOf('quarter');
+      }
     } else if (this.cellUnit === CellUnit.Year) {
       while (header >= start && header <= end) {
         const time = header.format(DATE_FORMAT);
@@ -1057,7 +1050,8 @@ export default class SchedulerData {
       [CellUnit.Hour]: 'minutes',
       [CellUnit.Week]: 'weeks',
       [CellUnit.Month]: 'months',
-      [CellUnit.Year]: 'years'
+      [CellUnit.Year]: 'years',
+      [CellUnit.Quarter]: 'quarters'
     }[this.cellUnit] || 'days';
     return {
       amount: unit === 'minutes' ? this.config.minuteStep : 1,

package/dist/components/index.js

@@ -135,7 +135,6 @@ function Scheduler(props) {
     const update = () => {
       schedulerData.beginBatch();
       try {
-        schedulerData._setMeasuredByContainer(true);
         schedulerData._setDocumentWidth(widthEl.clientWidth);
         if (responsiveByParent) {
           schedulerData._setDocumentHeight(parentEl ? getInnerHeight(parentEl) : document.documentElement.clientHeight);

package/dist/config/default.js

@@ -16,7 +16,8 @@ export const CellUnit = {
   Hour: 1,
   Week: 2,
   Month: 3,
-  Year: 4
+  Year: 4,
+  Quarter: 5
 };
 export const SummaryPos = {
   Top: 0,

package/dist/config/scheduler.js

@@ -11,7 +11,6 @@ import { SummaryPos, ViewType } from './default';
  */
 export default {
   schedulerWidth: '100%',
-  besidesWidth: 20,
   underneathHeight: 20,
   schedulerMaxHeight: 0,
   tableHeaderHeight: 40,
@@ -59,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,
@@ -89,6 +92,7 @@ export default {
   nonAgendaWeekCellHeaderFormat: 'ww/YYYY',
   nonAgendaMonthCellHeaderFormat: 'MMM YYYY',
   nonAgendaYearCellHeaderFormat: 'YYYY',
+  nonAgendaQuarterCellHeaderFormat: '[Q]Q YYYY',
   nonAgendaOtherCellHeaderFormat: 'ddd M/D',
   minuteStep: 30,
   views: [{

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

@@ -233,6 +233,10 @@ export class DnDSource {
 export enum CellUnit {
   Day,
   Hour,
+  Week,
+  Month,
+  Year,
+  Quarter,
 }
 
 export enum ViewType {
@@ -330,8 +334,6 @@ export interface State<EventType extends EventItem = EventItem> {
 
 export interface SchedulerDataConfig {
   schedulerWidth?: `${number}%`;
-  /** @deprecated The scheduler measures its own container now, so this offset is ignored. */
-  besidesWidth?: number;
   underneathHeight?: number;
   schedulerMaxHeight?: number;
   tableHeaderHeight?: number;
@@ -420,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.2",
+  "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",