react-big-schedule 7.0.0 → 7.1.0

package/README.md

@@ -17,7 +17,7 @@ Unlock the potential of your React projects with react-big-schedule and revoluti
 
 ### This project code is forked from:
 
-- [react-big-scheduler](https://stephenchou1017.github.io/scheduler/#/).
+- [react-big-scheduler](https://github.com/StephenChou1017/react-big-scheduler).
 - [react-big-scheduler-stch](https://github.com/hbatalhaStch/react-big-scheduler).
 
 ## Installation
@@ -93,7 +93,7 @@ Special thanks to the following contributors:
 
 We would like to acknowledge the following projects for their inspiration and contributions:
 
-- [react-big-scheduler](https://stephenchou1017.github.io/scheduler/#/).
+- [react-big-scheduler](https://github.com/StephenChou1017/react-big-scheduler).
 - [react-big-scheduler-stch](https://github.com/hbatalhaStch/react-big-scheduler).
 
 ## Roadmap
@@ -240,10 +240,10 @@ constructor(date=dayjs().format(DATE_FORMAT), viewType = ViewType.Week,
   view type, and will render the time window of the `2022-12` month in `ViewType.Month` view type.
 - `viewType` is the initial view type, now Scheduler supports `Day`, `Week`, `Month`, `Quarter`, `Year` 5 built-in view types,
   in addition Scheduler now supports `Custom`, `Custom1`, `Custom2` 3 custom view types at the same time, in which you can control
-  the time window yourself, refer to [this example](https://stephenchou1017.github.io/scheduler/#/customtimewindow). `viewType`,
+  the time window yourself, refer to [this example](https://react-big-schedule.vercel.app/custom-time). `viewType`,
   `showAgenda` and `isEventPerspective` are a group which should be contained in the SchedulerData.config.views array,
   and they together decide which view should be rendered. When `showAgenda` and `isEventPerspective` are both `false`,
-  Scheduler will render the resource view, refer to [this example](https://stephenchou1017.github.io/scheduler/#/views).
+  Scheduler will render the resource view, refer to [this example](https://react-big-schedule.vercel.app/basic).
 - `showAgenda` is a bool value, if true, Scheduler will display the agenda view of current view type. Agenda view is
   read only.
 - `isEventPerspective` is a bool value, if true, Scheduler will display the task view of current view type. In
@@ -410,7 +410,7 @@ addResource(resource);
 ```
 
 Add the `resource` to the `SchedulerData.resources`, make sure that `resource.id` is not duplicated. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/addresource).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### addEventGroup
 
@@ -529,7 +529,7 @@ getViewEndDate();
 
 Returns a dayjs object with the endDate of the currently selected view.
 
-### Locale support(Refer to [this example](https://stephenchou1017.github.io/scheduler/#/locale) for details.)
+### Locale support(Refer to [this example](https://react-big-schedule.vercel.app/custom-time) for details.)
 
 #### SchedulerData.config.resourceName
 
@@ -586,7 +586,7 @@ Scheduler component. Without `parentRef` the window height is used.
 
 The max height of Scheduler. If the desired height is bigger than the max height, the header row of Scheduler will be
 frozen and vertical scroll bar will appear, but this won't happen when the max height is set to `0`. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/freezefirstrow).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 **If you are using `responsiveByParent`, you can omit this setting or set it to `0` to ensure the Scheduler height conforms to the parent container.**
 When conforming to the parent container, the Scheduler will fill the available space and scroll bars will appear as needed.
@@ -620,7 +620,7 @@ Width of Scheduler table cells in resource view and task view of different view
 #### dayMaxEvents, weekMaxEvents, monthMaxEvents, yearMaxEvents, quarterMaxEvents
 
 Max events count of a cell in resource view and task view of different view types. A '+N more' will appear when exceeded.
-Refer to [this example](https://stephenchou1017.github.io/scheduler/#/addmore).
+Refer to [this example](https://react-big-schedule.vercel.app/add-more).
 
 #### eventItemHeight
 
@@ -697,13 +697,13 @@ Controls whether to create new event item in resource view and task view.
 #### crossResourceMove
 
 Controls whether to cross-slot move an event item in resource view and task view. If `false`, the `slotId` and `slotName`
-won't change in the `moveEvent` method. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/nocrossslotmove).
+won't change in the `moveEvent` method. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### checkConflict
 
 Controls whether to check conflicts when creating, resizing or moving an event item in resource view and task view. If
 `true`, Scheduler will call the `conflictOccurred` function if given. Refer to
-[this example](https://stephenchou1017.github.io/scheduler/#/overlapcheck).
+[this example](https://react-big-schedule.vercel.app/customization).
 
 #### scrollToSpecialDayjsEnabled
 
@@ -793,7 +793,7 @@ getSummary(schedulerData, headerEvents, slotId, slotName, headerStart, headerEnd
 ```
 
 Method that defines the summary text displayed in the Scheduler cells.Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/summary).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### getCustomDateFunc
 
@@ -802,7 +802,7 @@ getCustomDate(schedulerData, num, (date = undefined));
 ```
 
 Method that controls the start and end of time window when current view type is Custom, Custom1 or Custom2.Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/customtimewindow).
+to [this example](https://react-big-schedule.vercel.app/custom-time).
 
 #### getNonAgendaViewBodyCellBgColorFunc
 
@@ -950,7 +950,7 @@ rightCustomHeader: PropTypes.object;
 ```
 
 Component you need to put in the Scheduler header, it could be a div or a react component. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/customheader).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### conflictOccurred
 
@@ -969,7 +969,7 @@ eventItemTemplateResolver: PropTypes.func;
 eventItemTemplateResolver(schedulerData, event, bgColor, isStart, isEnd, mustAddCssClass, mustBeHeight, agendaMaxEventWidth);
 ```
 
-Use this function, you can customize the event style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/customeventstyle).
+Use this function, you can customize the event style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 ### eventItemPopoverTemplateResolver
 
@@ -978,7 +978,7 @@ eventItemPopoverTemplateResolver: PropTypes.func;
 eventItemPopoverTemplateResolver(schedulerData, eventItem, title, start, end, statusColor);
 ```
 
-Use this function, you can customize the event's popover style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/custompopover).
+Use this function, you can customize the event's popover style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### slotItemTemplateResolver
 
@@ -996,7 +996,7 @@ nonAgendaCellHeaderTemplateResolver: PropTypes.func;
 nonAgendaCellHeaderTemplateResolver(schedulerData, item, formattedDateItems, style);
 ```
 
-Use this function, you can customize the table header cell style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/customtableheaders).
+Use this function, you can customize the table header cell style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### onScrollLeft, onScrollRight
 
@@ -1007,7 +1007,7 @@ onScrollRight: PropTypes.func;
 onScrollRight(schedulerData, schedulerContent, maxScrollLeft);
 ```
 
-Callback function fired when the scheduler content div scrolls to leftmost or rightmost. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/infinitescroll).
+Callback function fired when the scheduler content div scrolls to leftmost or rightmost. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### onScrollTop, onScrollBottom
 
@@ -1018,7 +1018,7 @@ onScrollBottom: PropTypes.func;
 onScrollBottom(schedulerData, schedulerContent, maxScrollTop);
 ```
 
-Callback function fired when the scheduler content div scrolls to topmost or bottommost. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/infinitescroll).
+Callback function fired when the scheduler content div scrolls to topmost or bottommost. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### slotClickedFunc
 
@@ -1027,7 +1027,7 @@ slotClickedFunc: PropTypes.func;
 ```
 
 If it's set, slots will be clickable, and will fire this function when a slot is clicked. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/resourceclickable).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### dndSources
 
@@ -1037,7 +1037,7 @@ dndSources: PropTypes.array;
 
 DnDSource array that registered to Scheduler. Use [DnDSource](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/components/DnDSource.js),
 we can simplify the drag and drop coding in React-Big-Scheduler. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/draganddrop).
+to [this example](https://react-big-schedule.vercel.app/drag-and-drop).
 
 #### onSetAddMoreState
 
@@ -1048,7 +1048,7 @@ onSetAddMoreState(newState);
 
 Callback function fired when a '+N more' is clicked, is used to control the visibility and the position of the `AddMorePopover`.
 `newState` is a json such as {headerItem: headerItem, left: 20, top: 20, height: 100}. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/addmore).
+to [this example](https://react-big-schedule.vercel.app/add-more).
 
 #### subtitleGetter
 

package/dist/components/EventItem.js

@@ -720,7 +720,8 @@ EventItem.propTypes = {
   viewEvent2Click: PropTypes.func,
   viewEvent2Text: PropTypes.string,
   conflictOccurred: PropTypes.func,
-  eventItemTemplateResolver: PropTypes.func
+  eventItemTemplateResolver: PropTypes.func,
+  eventItemPopoverTemplateResolver: PropTypes.func
 };
 EventItem.defaultProps = {
   isDragging: undefined,
@@ -736,5 +737,6 @@ EventItem.defaultProps = {
   viewEvent2Click: undefined,
   viewEvent2Text: undefined,
   conflictOccurred: undefined,
-  eventItemTemplateResolver: undefined
+  eventItemTemplateResolver: undefined,
+  eventItemPopoverTemplateResolver: undefined
 };

package/dist/components/ResourceEvents.js

@@ -29,6 +29,7 @@ class ResourceEvents extends PureComponent {
     viewEvent2Text: PropTypes.string,
     newEvent: PropTypes.func,
     eventItemTemplateResolver: PropTypes.func,
+    eventItemPopoverTemplateResolver: PropTypes.func,
     onSelectionChange: PropTypes.func,
     isRowSelected: PropTypes.bool,
     selectionPreview: PropTypes.shape({
@@ -268,7 +269,7 @@ class ResourceEvents extends PureComponent {
       rightIndex
     } = this.state;
     this.cleanupDragInteraction();
-    if (headers.length === 0 || !resourceEvents.headerItems || resourceEvents.headerItems.length === 0) {
+    const resetSelection = () => {
       this.setState({
         startX: 0,
         leftIndex: 0,
@@ -284,13 +285,25 @@ class ResourceEvents extends PureComponent {
         left: 0,
         width: 0
       });
+    };
+    if (headers.length === 0 || !resourceEvents.headerItems || resourceEvents.headerItems.length === 0) {
+      resetSelection();
       return;
     }
+
+    // a cell width of 0 (container not measured yet) makes the drag indexes NaN or Infinity
+    const toIndex = (value, fallback) => Number.isFinite(value) ? value : fallback;
     const maxLeftIndex = headers.length - 1;
-    const safeLeftIndex = Math.max(0, Math.min(leftIndex, maxLeftIndex));
+    const safeLeftIndex = Math.max(0, Math.min(toIndex(leftIndex, 0), maxLeftIndex));
     const maxRightIndex = Math.min(headers.length, resourceEvents.headerItems.length);
-    let safeRightIndex = Math.max(1, rightIndex, safeLeftIndex + 1);
+    let safeRightIndex = Math.max(1, toIndex(rightIndex, 1), safeLeftIndex + 1);
     safeRightIndex = Math.min(safeRightIndex, maxRightIndex);
+
+    // headers and headerItems can be out of step while the view rebuilds; drop the selection instead of throwing
+    if (!headers[safeLeftIndex] || !resourceEvents.headerItems[safeRightIndex - 1]) {
+      resetSelection();
+      return;
+    }
     const isVertical = schedulerData.isVerticalResourceView();
     // vertical view: rows are time slots and columns are resources, so the roles swap
     const selectedRowIds = this.getSelectedResourceIds();
@@ -575,6 +588,7 @@ class ResourceEvents extends PureComponent {
               viewEvent2Click: this.props.viewEvent2Click,
               viewEvent2Text: this.props.viewEvent2Text,
               eventItemTemplateResolver: this.props.eventItemTemplateResolver,
+              eventItemPopoverTemplateResolver: this.props.eventItemPopoverTemplateResolver,
               subtitleGetter: this.props.subtitleGetter,
               updateEventStart: this.props.updateEventStart,
               updateEventEnd: this.props.updateEventEnd,

package/dist/components/index.js

@@ -364,10 +364,11 @@ function Scheduler(props) {
     viewEvent2Text: props.viewEvent2Text,
     newEvent: props.newEvent,
     eventItemTemplateResolver: props.eventItemTemplateResolver,
+    eventItemPopoverTemplateResolver: props.eventItemPopoverTemplateResolver,
     onSelectionChange: handleSelectionChange,
     isRowSelected: selectedIdsSet.has(item.slotId),
     selectionPreview: selectionPreview
-  }, item.slotId)), [displayRenderData, schedulerData, schedulerDataVersion, eventDndSource, dndContext, props.onSetAddMoreState, props.updateEventStart, props.updateEventEnd, props.moveEvent, props.movingEvent, props.conflictOccurred, props.subtitleGetter, props.eventItemClick, props.viewEventClick, props.viewEventText, props.viewEvent2Click, props.viewEvent2Text, props.newEvent, props.eventItemTemplateResolver, handleSelectionChange, selectedIdsSet, selectionPreview]);
+  }, item.slotId)), [displayRenderData, schedulerData, schedulerDataVersion, eventDndSource, dndContext, props.onSetAddMoreState, props.updateEventStart, props.updateEventEnd, props.moveEvent, props.movingEvent, props.conflictOccurred, props.subtitleGetter, props.eventItemClick, props.viewEventClick, props.viewEventText, props.viewEvent2Click, props.viewEvent2Text, props.newEvent, props.eventItemTemplateResolver, props.eventItemPopoverTemplateResolver, handleSelectionChange, selectedIdsSet, selectionPreview]);
   let tbodyContent = /*#__PURE__*/_jsx("tr", {});
   if (showAgenda) {
     tbodyContent = /*#__PURE__*/_jsx(AgendaView, {
@@ -655,6 +656,7 @@ Scheduler.propTypes = {
   viewEvent2Text: PropTypes.string,
   conflictOccurred: PropTypes.func,
   eventItemTemplateResolver: PropTypes.func,
+  eventItemPopoverTemplateResolver: PropTypes.func,
   dndSources: PropTypes.array,
   slotClickedFunc: PropTypes.func,
   toggleExpandFunc: PropTypes.func,

package/package.json

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