react-big-schedule 8.1.0 → 9.0.1

package/dist/components/index.js

@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { CellUnit, DATE_FORMAT, DATETIME_FORMAT, SummaryPos, ViewType } from '../config/default';
+import { toDate } from '../helper/behaviors';
 import DemoData from '../sample-data/sample1';
 import AddMorePopover from './AddMorePopover';
 import AgendaView from './AgendaView';
@@ -13,669 +14,442 @@ import ResourceView from './ResourceView';
 import SchedulerData from './SchedulerData';
 import SchedulerHeader from './SchedulerHeader';
 import wrapperFun from './WrapperFun';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const initDndContext = (schedulerData, dndSources) => {
-  let sources = [];
-  sources.push(new DnDSource(dndProps => dndProps.eventItem, schedulerData.config.dragAndDropEnabled));
-  if (dndSources !== undefined && dndSources.length > 0) {
-    sources = [...sources, ...dndSources];
-  }
-  return new DnDContext(sources);
+    let sources = [];
+    sources.push(new DnDSource((dndProps) => dndProps.eventItem, schedulerData.config.dragAndDropEnabled));
+    if (dndSources !== undefined && dndSources.length > 0) {
+        sources = [...sources, ...dndSources];
+    }
+    return new DnDContext(sources);
 };
-
-/**
- * Render the full scheduler table including the header toolbar, resource column, timeline header, and all resource event rows.
- *
- * @param {object} props - Component properties.
- * @param {SchedulerData} props.schedulerData - View model that supplies configuration, layout, and rendering data for the scheduler.
- * @param {Array<DnDSource>} [props.dndSources] - Additional drag-and-drop sources merged into the scheduler's DnD context on first mount.
- * @param {React.RefObject<HTMLElement>} [props.parentRef] - Parent container ref used when `config.responsiveByParent` is true; a ResizeObserver tracks this element's size.
- * @param {function(SchedulerData):void} props.prevClick - Called when navigating to the previous time range.
- * @param {function(SchedulerData):void} props.nextClick - Called when navigating to the next time range.
- * @param {function(SchedulerData, object):void} props.onViewChange - Called when the view type, agenda toggle, or event perspective changes.
- * @param {function(SchedulerData, string|Date):void} props.onSelectDate - Called when a date is selected from the date picker.
- * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollLeft] - Called when content reaches the leftmost scroll position.
- * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollRight] - Called when content reaches the rightmost scroll position.
- * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollTop] - Called when content reaches the topmost scroll position.
- * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollBottom] - Called when content reaches the bottommost scroll position.
- * @returns {JSX.Element} The root scheduler table element containing the rendered scheduler UI.
- */
-
+/** Render the full scheduler: header toolbar, resource column, timeline header and all resource event rows. */
 // content-box height: clientHeight includes the padding, which the scheduler cannot use
-const getInnerHeight = el => {
-  const {
-    paddingTop,
-    paddingBottom
-  } = window.getComputedStyle(el);
-  return el.clientHeight - (parseFloat(paddingTop) || 0) - (parseFloat(paddingBottom) || 0);
+const getInnerHeight = (el) => {
+    const { paddingTop, paddingBottom } = window.getComputedStyle(el);
+    return el.clientHeight - (parseFloat(paddingTop) || 0) - (parseFloat(paddingBottom) || 0);
 };
 function Scheduler(props) {
-  const {
-    schedulerData,
-    dndSources,
-    parentRef,
-    className,
-    style,
-    prevClick,
-    nextClick,
-    onViewChange,
-    onSelectDate,
-    leftCustomHeader,
-    rightCustomHeader,
-    CustomResourceHeader,
-    configTableHeaderStyle,
-    onScrollLeft,
-    onScrollRight,
-    onScrollTop,
-    onScrollBottom
-  } = props;
-  const [dndContext] = useState(() => initDndContext(schedulerData, dndSources));
-  const [contentScrollbarHeight, setContentScrollbarHeight] = useState(17);
-  const [contentScrollbarWidth, setContentScrollbarWidth] = useState(17);
-  const [resourceScrollbarHeight, setResourceScrollbarHeight] = useState(17);
-  const [resourceScrollbarWidth, setResourceScrollbarWidth] = useState(17);
-  const [selectionState, setSelectionState] = useState({
-    isSelecting: false,
-    selectedResourceIds: [],
-    left: 0,
-    width: 0
-  });
-  const [, setRenderTrigger] = useState(0);
-  const schedulerRootRef = useRef(null);
-  const containerRef = useRef(null);
-
-  // Layout/header refs - declare before setSchedulerHeaderRef useCallback
-  const schedulerHeaderRef = useRef(null);
-
-  // Callback ref pattern for ResizeObserver to handle schedulerHeader element reassignment
-  const [schedulerHeaderEl, setSchedulerHeaderEl] = useState(null);
-  const setSchedulerHeaderRef = useCallback(el => {
-    schedulerHeaderRef.current = el;
-    setSchedulerHeaderEl(el);
-  }, []);
-
-  // Scroll sync refs
-  const schedulerHeadRef = useRef(null);
-  const schedulerResourceRef = useRef(null);
-  const schedulerContentRef = useRef(null);
-  const schedulerContentBgTableRef = useRef(null);
-
-  // Observer refs
-  const ulObserverRef = useRef(null);
-  const headerObserverRef = useRef(null);
-
-  // Scroll position tracking
-  const currentAreaRef = useRef(-1);
-  const scrollLeftRef = useRef(0);
-  const scrollTopRef = useRef(0);
-  const scrollbarSizeRef = useRef({
-    contentScrollbarHeight: 17,
-    contentScrollbarWidth: 17,
-    resourceScrollbarHeight: 17,
-    resourceScrollbarWidth: 17
-  });
-  useEffect(() => {
-    if (typeof schedulerData.setVersionChangeNotifier === 'function') {
-      schedulerData.setVersionChangeNotifier(setRenderTrigger);
-      return () => schedulerData.setVersionChangeNotifier(null);
-    }
-    return undefined;
-  }, [schedulerData]);
-
-  // Width comes from the scheduler's own wrapper (100% wide of its parent). `parentRef` only supplies the height
-  // when responsiveByParent is on.
-  useEffect(() => {
-    const {
-      responsiveByParent
-    } = schedulerData.config;
-    const parentEl = responsiveByParent ? parentRef?.current : null;
-    // the wrapper is 100% wide of its parent (padding excluded), so it gives the width in both modes
-    const widthEl = containerRef.current;
-    if (!widthEl) return undefined;
-    const update = () => {
-      schedulerData.beginBatch();
-      try {
-        schedulerData._setDocumentWidth(widthEl.clientWidth);
-        if (responsiveByParent) {
-          schedulerData._setDocumentHeight(parentEl ? getInnerHeight(parentEl) : document.documentElement.clientHeight);
+    const { schedulerData, dndSources, parentRef, className, style, prevClick, nextClick, onViewChange, onSelectDate, leftCustomHeader, rightCustomHeader, CustomResourceHeader, configTableHeaderStyle, onScrollLeft, onScrollRight, onScrollTop, onScrollBottom, } = props;
+    const [dndContext] = useState(() => initDndContext(schedulerData, dndSources));
+    const [contentScrollbarHeight, setContentScrollbarHeight] = useState(17);
+    const [contentScrollbarWidth, setContentScrollbarWidth] = useState(17);
+    const [resourceScrollbarHeight, setResourceScrollbarHeight] = useState(17);
+    const [resourceScrollbarWidth, setResourceScrollbarWidth] = useState(17);
+    const [selectionState, setSelectionState] = useState({
+        isSelecting: false,
+        selectedResourceIds: [],
+        left: 0,
+        width: 0,
+    });
+    const [, setRenderTrigger] = useState(0);
+    const schedulerRootRef = useRef(null);
+    const containerRef = useRef(null);
+    // Layout/header refs - declare before setSchedulerHeaderRef useCallback
+    const schedulerHeaderRef = useRef(null);
+    // Callback ref pattern for ResizeObserver to handle schedulerHeader element reassignment
+    const [schedulerHeaderEl, setSchedulerHeaderEl] = useState(null);
+    const setSchedulerHeaderRef = useCallback((el) => {
+        schedulerHeaderRef.current = el;
+        setSchedulerHeaderEl(el);
+    }, []);
+    // Scroll sync refs
+    const schedulerHeadRef = useRef(null);
+    const schedulerResourceRef = useRef(null);
+    const schedulerContentRef = useRef(null);
+    const schedulerContentBgTableRef = useRef(null);
+    // Observer refs
+    const ulObserverRef = useRef(null);
+    const headerObserverRef = useRef(null);
+    // Scroll position tracking
+    const currentAreaRef = useRef(-1);
+    const scrollLeftRef = useRef(0);
+    const scrollTopRef = useRef(0);
+    const scrollbarSizeRef = useRef({
+        contentScrollbarHeight: 17,
+        contentScrollbarWidth: 17,
+        resourceScrollbarHeight: 17,
+        resourceScrollbarWidth: 17,
+    });
+    useEffect(() => {
+        if (typeof schedulerData.setVersionChangeNotifier === 'function') {
+            schedulerData.setVersionChangeNotifier(setRenderTrigger);
+            return () => schedulerData.setVersionChangeNotifier(null);
         }
-      } finally {
-        schedulerData.endBatch();
-      }
-    };
-    update();
-    ulObserverRef.current = new ResizeObserver(update);
-    ulObserverRef.current.observe(widthEl);
-    if (parentEl) ulObserverRef.current.observe(parentEl);
-    const listenToWindow = responsiveByParent && !parentEl;
-    if (listenToWindow) window.addEventListener('resize', update);
-    return () => {
-      ulObserverRef.current?.disconnect();
-      if (listenToWindow) window.removeEventListener('resize', update);
-    };
-  }, [parentRef, schedulerData]);
-  useEffect(() => {
-    if (schedulerData.config.responsiveByParent && schedulerHeaderEl) {
-      const updateHeaderHeight = node => {
-        const rect = node.getBoundingClientRect();
-        const style = window.getComputedStyle(node);
-        const totalHeight = rect.height + (parseFloat(style.marginTop) || 0) + (parseFloat(style.marginBottom) || 0) + schedulerData.getHeaderGroupRowsHeight();
-        schedulerData._setSchedulerHeaderHeight(totalHeight);
-      };
-      updateHeaderHeight(schedulerHeaderEl);
-      headerObserverRef.current = new ResizeObserver(entries => {
-        for (const entry of entries) {
-          updateHeaderHeight(entry.target);
+        return undefined;
+    }, [schedulerData]);
+    // Width comes from the scheduler's own wrapper (100% wide of its parent). `parentRef` only supplies the height
+    // when responsiveByParent is on.
+    useEffect(() => {
+        const { responsiveByParent } = schedulerData.config;
+        const parentEl = responsiveByParent ? parentRef?.current : null;
+        // the wrapper is 100% wide of its parent (padding excluded), so it gives the width in both modes
+        const widthEl = containerRef.current;
+        if (!widthEl)
+            return undefined;
+        const update = () => {
+            schedulerData.beginBatch();
+            try {
+                schedulerData._setDocumentWidth(widthEl.clientWidth);
+                if (responsiveByParent) {
+                    schedulerData._setDocumentHeight(parentEl ? getInnerHeight(parentEl) : document.documentElement.clientHeight);
+                }
+            }
+            finally {
+                schedulerData.endBatch();
+            }
+        };
+        update();
+        ulObserverRef.current = new ResizeObserver(update);
+        ulObserverRef.current.observe(widthEl);
+        if (parentEl)
+            ulObserverRef.current.observe(parentEl);
+        const listenToWindow = responsiveByParent && !parentEl;
+        if (listenToWindow)
+            window.addEventListener('resize', update);
+        return () => {
+            ulObserverRef.current?.disconnect();
+            if (listenToWindow)
+                window.removeEventListener('resize', update);
+        };
+    }, [parentRef, schedulerData]);
+    useEffect(() => {
+        if (schedulerData.config.responsiveByParent && schedulerHeaderEl) {
+            const updateHeaderHeight = (node) => {
+                const rect = node.getBoundingClientRect();
+                const style = window.getComputedStyle(node);
+                const totalHeight = rect.height +
+                    (parseFloat(style.marginTop) || 0) +
+                    (parseFloat(style.marginBottom) || 0) +
+                    schedulerData.getHeaderGroupRowsHeight();
+                schedulerData._setSchedulerHeaderHeight(totalHeight);
+            };
+            updateHeaderHeight(schedulerHeaderEl);
+            headerObserverRef.current = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    updateHeaderHeight(entry.target);
+                }
+            });
+            headerObserverRef.current.observe(schedulerHeaderEl);
+            return () => {
+                if (headerObserverRef.current) {
+                    headerObserverRef.current.disconnect();
+                }
+            };
         }
-      });
-      headerObserverRef.current.observe(schedulerHeaderEl);
-      return () => {
-        if (headerObserverRef.current) {
-          headerObserverRef.current.disconnect();
+    }, [
+        schedulerHeaderEl,
+        schedulerData,
+        schedulerData.config.showWeekNumber,
+        schedulerData.config.weekNumberRowHeight,
+        schedulerData.config.showMonthRow,
+        schedulerData.config.monthRowHeight,
+    ]);
+    const resolveScrollbarSize = useCallback(() => {
+        const prev = scrollbarSizeRef.current;
+        const newContentHeight = schedulerContentRef.current
+            ? schedulerContentRef.current.offsetHeight - schedulerContentRef.current.clientHeight
+            : 17;
+        const newContentWidth = schedulerContentRef.current
+            ? schedulerContentRef.current.offsetWidth - schedulerContentRef.current.clientWidth
+            : 17;
+        const newResourceHeight = schedulerResourceRef.current
+            ? schedulerResourceRef.current.offsetHeight - schedulerResourceRef.current.clientHeight
+            : 17;
+        const newResourceWidth = schedulerResourceRef.current
+            ? schedulerResourceRef.current.offsetWidth - schedulerResourceRef.current.clientWidth
+            : 17;
+        if (newContentHeight !== prev.contentScrollbarHeight) {
+            setContentScrollbarHeight(newContentHeight);
+            scrollbarSizeRef.current.contentScrollbarHeight = newContentHeight;
         }
-      };
-    }
-  }, [schedulerHeaderEl, schedulerData, schedulerData.config.showWeekNumber, schedulerData.config.weekNumberRowHeight, schedulerData.config.showMonthRow, schedulerData.config.monthRowHeight]);
-  const resolveScrollbarSize = useCallback(() => {
-    const prev = scrollbarSizeRef.current;
-    const newContentHeight = schedulerContentRef.current ? schedulerContentRef.current.offsetHeight - schedulerContentRef.current.clientHeight : 17;
-    const newContentWidth = schedulerContentRef.current ? schedulerContentRef.current.offsetWidth - schedulerContentRef.current.clientWidth : 17;
-    const newResourceHeight = schedulerResourceRef.current ? schedulerResourceRef.current.offsetHeight - schedulerResourceRef.current.clientHeight : 17;
-    const newResourceWidth = schedulerResourceRef.current ? schedulerResourceRef.current.offsetWidth - schedulerResourceRef.current.clientWidth : 17;
-    if (newContentHeight !== prev.contentScrollbarHeight) {
-      setContentScrollbarHeight(newContentHeight);
-      scrollbarSizeRef.current.contentScrollbarHeight = newContentHeight;
-    }
-    if (newContentWidth !== prev.contentScrollbarWidth) {
-      setContentScrollbarWidth(newContentWidth);
-      scrollbarSizeRef.current.contentScrollbarWidth = newContentWidth;
-    }
-    if (newResourceHeight !== prev.resourceScrollbarHeight) {
-      setResourceScrollbarHeight(newResourceHeight);
-      scrollbarSizeRef.current.resourceScrollbarHeight = newResourceHeight;
-    }
-    if (newResourceWidth !== prev.resourceScrollbarWidth) {
-      setResourceScrollbarWidth(newResourceWidth);
-      scrollbarSizeRef.current.resourceScrollbarWidth = newResourceWidth;
-    }
-  }, []);
-  useEffect(() => {
-    resolveScrollbarSize();
-    const {
-      localeDayjs,
-      behaviors
-    } = schedulerData;
-    if (schedulerData.getScrollToSpecialDayjs() && behaviors.getScrollSpecialDayjsFunc) {
-      if (schedulerContentRef.current && schedulerContentRef.current.scrollWidth > schedulerContentRef.current.clientWidth) {
-        const start = localeDayjs(new Date(schedulerData.startDate)).startOf('day');
-        const end = localeDayjs(new Date(schedulerData.endDate)).endOf('day');
-        const specialDayjs = behaviors.getScrollSpecialDayjsFunc(schedulerData, start, end);
-        if (specialDayjs >= start && specialDayjs <= end) {
-          let index = 0;
-          schedulerData.headers.forEach(item => {
-            if (specialDayjs >= localeDayjs(new Date(item.time))) index += 1;
-          });
-          schedulerContentRef.current.scrollLeft = (index - 1) * schedulerData.getContentCellWidth();
-          schedulerData.setScrollToSpecialDayjs(false);
+        if (newContentWidth !== prev.contentScrollbarWidth) {
+            setContentScrollbarWidth(newContentWidth);
+            scrollbarSizeRef.current.contentScrollbarWidth = newContentWidth;
         }
-      }
-    }
-  }, [schedulerData, resolveScrollbarSize]);
-  const onSchedulerHeadMouseOver = useCallback(() => {
-    currentAreaRef.current = 2;
-  }, []);
-  const onSchedulerHeadMouseOut = useCallback(() => {
-    currentAreaRef.current = -1;
-  }, []);
-  const onSchedulerHeadScroll = useCallback(() => {
-    if ((currentAreaRef.current === 2 || currentAreaRef.current === -1) && schedulerContentRef.current.scrollLeft !== schedulerHeadRef.current.scrollLeft) {
-      schedulerContentRef.current.scrollLeft = schedulerHeadRef.current.scrollLeft;
-    }
-  }, []);
-  const onSchedulerResourceMouseOver = useCallback(() => {
-    currentAreaRef.current = 1;
-  }, []);
-  const onSchedulerResourceMouseOut = useCallback(() => {
-    currentAreaRef.current = -1;
-  }, []);
-  const onSchedulerResourceScroll = useCallback(() => {
-    if (schedulerResourceRef.current && (currentAreaRef.current === 1 || currentAreaRef.current === -1) && schedulerContentRef.current.scrollTop !== schedulerResourceRef.current.scrollTop) {
-      schedulerContentRef.current.scrollTop = schedulerResourceRef.current.scrollTop;
-    }
-  }, []);
-  const onSchedulerContentMouseOver = useCallback(() => {
-    currentAreaRef.current = 0;
-  }, []);
-  const onSchedulerContentMouseOut = useCallback(() => {
-    currentAreaRef.current = -1;
-  }, []);
-  const onSchedulerContentScroll = useCallback(() => {
-    if (schedulerResourceRef.current) {
-      if (currentAreaRef.current === 0 || currentAreaRef.current === -1) {
-        if (schedulerHeadRef.current.scrollLeft !== schedulerContentRef.current.scrollLeft) {
-          schedulerHeadRef.current.scrollLeft = schedulerContentRef.current.scrollLeft;
+        if (newResourceHeight !== prev.resourceScrollbarHeight) {
+            setResourceScrollbarHeight(newResourceHeight);
+            scrollbarSizeRef.current.resourceScrollbarHeight = newResourceHeight;
         }
-        if (schedulerResourceRef.current.scrollTop !== schedulerContentRef.current.scrollTop) {
-          schedulerResourceRef.current.scrollTop = schedulerContentRef.current.scrollTop;
+        if (newResourceWidth !== prev.resourceScrollbarWidth) {
+            setResourceScrollbarWidth(newResourceWidth);
+            scrollbarSizeRef.current.resourceScrollbarWidth = newResourceWidth;
         }
-      }
-    }
-    if (schedulerContentRef.current.scrollLeft !== scrollLeftRef.current) {
-      if (schedulerContentRef.current.scrollLeft === 0 && onScrollLeft !== undefined) {
-        onScrollLeft(schedulerData, schedulerContentRef.current, schedulerContentRef.current.scrollWidth - schedulerContentRef.current.clientWidth);
-      }
-      if (Math.round(schedulerContentRef.current.scrollLeft) === schedulerContentRef.current.scrollWidth - schedulerContentRef.current.clientWidth && onScrollRight !== undefined) {
-        onScrollRight(schedulerData, schedulerContentRef.current, schedulerContentRef.current.scrollWidth - schedulerContentRef.current.clientWidth);
-      }
-    } else if (schedulerContentRef.current.scrollTop !== scrollTopRef.current) {
-      if (schedulerContentRef.current.scrollTop === 0 && onScrollTop !== undefined) {
-        onScrollTop(schedulerData, schedulerContentRef.current, schedulerContentRef.current.scrollHeight - schedulerContentRef.current.clientHeight);
-      }
-      if (Math.round(schedulerContentRef.current.scrollTop) === schedulerContentRef.current.scrollHeight - schedulerContentRef.current.clientHeight && onScrollBottom !== undefined) {
-        onScrollBottom(schedulerData, schedulerContentRef.current, schedulerContentRef.current.scrollHeight - schedulerContentRef.current.clientHeight);
-      }
+    }, []);
+    useEffect(() => {
+        resolveScrollbarSize();
+        const { localeDayjs, behaviors } = schedulerData;
+        if (schedulerData.getScrollToSpecialDayjs() && behaviors.getScrollSpecialDayjsFunc) {
+            if (schedulerContentRef.current &&
+                schedulerContentRef.current.scrollWidth > schedulerContentRef.current.clientWidth) {
+                const start = localeDayjs(toDate(schedulerData.startDate)).startOf('day');
+                const end = localeDayjs(toDate(schedulerData.endDate)).endOf('day');
+                const specialDayjs = behaviors.getScrollSpecialDayjsFunc(schedulerData, start, end);
+                if (specialDayjs >= start && specialDayjs <= end) {
+                    let index = 0;
+                    schedulerData.headers.forEach(item => {
+                        if (specialDayjs >= localeDayjs(new Date(item.time)))
+                            index += 1;
+                    });
+                    schedulerContentRef.current.scrollLeft = (index - 1) * schedulerData.getContentCellWidth();
+                    schedulerData.setScrollToSpecialDayjs(false);
+                }
+            }
+        }
+    }, [schedulerData, resolveScrollbarSize]);
+    const onSchedulerHeadMouseOver = useCallback(() => {
+        currentAreaRef.current = 2;
+    }, []);
+    const onSchedulerHeadMouseOut = useCallback(() => {
+        currentAreaRef.current = -1;
+    }, []);
+    const onSchedulerHeadScroll = useCallback(() => {
+        const content = schedulerContentRef.current;
+        const head = schedulerHeadRef.current;
+        if (content &&
+            head &&
+            (currentAreaRef.current === 2 || currentAreaRef.current === -1) &&
+            content.scrollLeft !== head.scrollLeft) {
+            content.scrollLeft = head.scrollLeft;
+        }
+    }, []);
+    const onSchedulerResourceMouseOver = useCallback(() => {
+        currentAreaRef.current = 1;
+    }, []);
+    const onSchedulerResourceMouseOut = useCallback(() => {
+        currentAreaRef.current = -1;
+    }, []);
+    const onSchedulerResourceScroll = useCallback(() => {
+        const content = schedulerContentRef.current;
+        const resource = schedulerResourceRef.current;
+        if (content &&
+            resource &&
+            (currentAreaRef.current === 1 || currentAreaRef.current === -1) &&
+            content.scrollTop !== resource.scrollTop) {
+            content.scrollTop = resource.scrollTop;
+        }
+    }, []);
+    const onSchedulerContentMouseOver = useCallback(() => {
+        currentAreaRef.current = 0;
+    }, []);
+    const onSchedulerContentMouseOut = useCallback(() => {
+        currentAreaRef.current = -1;
+    }, []);
+    const onSchedulerContentScroll = useCallback(() => {
+        const content = schedulerContentRef.current;
+        const head = schedulerHeadRef.current;
+        if (!content || !head)
+            return;
+        if (schedulerResourceRef.current) {
+            if (currentAreaRef.current === 0 || currentAreaRef.current === -1) {
+                if (head.scrollLeft !== content.scrollLeft) {
+                    head.scrollLeft = content.scrollLeft;
+                }
+                if (schedulerResourceRef.current.scrollTop !== content.scrollTop) {
+                    schedulerResourceRef.current.scrollTop = content.scrollTop;
+                }
+            }
+        }
+        if (content.scrollLeft !== scrollLeftRef.current) {
+            if (content.scrollLeft === 0 && onScrollLeft !== undefined) {
+                onScrollLeft(schedulerData, content, content.scrollWidth - content.clientWidth);
+            }
+            if (Math.round(content.scrollLeft) === content.scrollWidth - content.clientWidth && onScrollRight !== undefined) {
+                onScrollRight(schedulerData, content, content.scrollWidth - content.clientWidth);
+            }
+        }
+        else if (content.scrollTop !== scrollTopRef.current) {
+            if (content.scrollTop === 0 && onScrollTop !== undefined) {
+                onScrollTop(schedulerData, content, content.scrollHeight - content.clientHeight);
+            }
+            if (Math.round(content.scrollTop) === content.scrollHeight - content.clientHeight &&
+                onScrollBottom !== undefined) {
+                onScrollBottom(schedulerData, content, content.scrollHeight - content.clientHeight);
+            }
+        }
+        scrollLeftRef.current = content.scrollLeft;
+        scrollTopRef.current = content.scrollTop;
+    }, [schedulerData, onScrollLeft, onScrollRight, onScrollTop, onScrollBottom]);
+    const handleViewChange = useCallback((e) => {
+        const viewType = parseInt(e.target.value.charAt(0), 10);
+        const showAgenda = e.target.value.charAt(1) === '1';
+        const isEventPerspective = e.target.value.charAt(2) === '1';
+        onViewChange(schedulerData, { viewType, showAgenda, isEventPerspective });
+    }, [onViewChange, schedulerData]);
+    const goNext = useCallback(() => nextClick(schedulerData), [nextClick, schedulerData]);
+    const goBack = useCallback(() => prevClick(schedulerData), [prevClick, schedulerData]);
+    const onSelect = useCallback((date) => onSelectDate(schedulerData, date), [onSelectDate, schedulerData]);
+    const { viewType, renderData, showAgenda, config } = schedulerData;
+    const width = schedulerData.getSchedulerWidth();
+    const { showWeekNumber, weekNumberRowHeight, showMonthRow, monthRowHeight } = config;
+    const schedulerDataVersion = schedulerData.getVersion ? schedulerData.getVersion() : 0;
+    const schedulerWidth = schedulerData.getContentTableWidth();
+    const weekNumberRowStyle = useMemo(() => ({ height: weekNumberRowHeight }), [weekNumberRowHeight]);
+    const weekNumberThStyle = useMemo(() => ({
+        borderBottom: `1px solid ${config.headerBorderColor ?? 'var(--rbs-border)'}`,
+        fontSize: '0.85em',
+        opacity: 0.7,
+        padding: '4px 8px',
+    }), [config.headerBorderColor]);
+    const schedulerInnerStyle = useMemo(() => ({ width: schedulerWidth }), [schedulerWidth]);
+    const displayRenderData = useMemo(() => renderData.filter(o => o.render), [renderData]);
+    const eventDndSource = dndContext.getDndSource();
+    if (!eventDndSource)
+        throw new Error('react-big-schedule: no DnD source registered for events');
+    const handleSelectionChange = useCallback((isSelecting, selectedResourceIds, preview = {}) => {
+        const nextSelectedResourceIds = selectedResourceIds || [];
+        const nextLeft = preview.left || 0;
+        const nextWidth = preview.width || 0;
+        setSelectionState(prev => {
+            const sameIdsLength = prev.selectedResourceIds.length === nextSelectedResourceIds.length;
+            const sameIds = sameIdsLength && prev.selectedResourceIds.every((id, index) => id === nextSelectedResourceIds[index]);
+            if (prev.isSelecting === isSelecting && prev.left === nextLeft && prev.width === nextWidth && sameIds) {
+                return prev;
+            }
+            return {
+                isSelecting,
+                selectedResourceIds: nextSelectedResourceIds,
+                left: nextLeft,
+                width: nextWidth,
+            };
+        });
+    }, []);
+    const selectionPreview = useMemo(() => ({
+        isSelecting: selectionState.isSelecting,
+        left: selectionState.left,
+        width: selectionState.width,
+    }), [selectionState.isSelecting, selectionState.left, selectionState.width]);
+    const selectedIdsSet = useMemo(() => new Set(selectionState.selectedResourceIds), [selectionState.selectedResourceIds]);
+    const resourceEventsList = useMemo(() => displayRenderData.map(item => (_jsx(ResourceEvents, { resourceEvents: item, schedulerData: schedulerData, schedulerDataVersion: schedulerDataVersion, dndSource: eventDndSource, dndContext: dndContext, onSetAddMoreState: props.onSetAddMoreState, updateEventStart: props.updateEventStart, updateEventEnd: props.updateEventEnd, moveEvent: props.moveEvent, movingEvent: props.movingEvent, conflictOccurred: props.conflictOccurred, subtitleGetter: props.subtitleGetter, eventItemClick: props.eventItemClick, viewEventClick: props.viewEventClick, viewEventText: props.viewEventText, viewEvent2Click: props.viewEvent2Click, 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,
+        props.eventItemPopoverTemplateResolver,
+        handleSelectionChange,
+        selectedIdsSet,
+        selectionPreview,
+    ]);
+    let tbodyContent = _jsx("tr", {});
+    if (showAgenda) {
+        tbodyContent = (_jsx(AgendaView, { schedulerData: schedulerData, subtitleGetter: props.subtitleGetter, eventItemClick: props.eventItemClick, viewEventClick: props.viewEventClick, viewEventText: props.viewEventText, viewEvent2Click: props.viewEvent2Click, viewEvent2Text: props.viewEvent2Text, slotClickedFunc: props.slotClickedFunc, slotItemTemplateResolver: props.slotItemTemplateResolver, eventItemTemplateResolver: props.eventItemTemplateResolver, eventItemPopoverTemplateResolver: props.eventItemPopoverTemplateResolver }));
     }
-    scrollLeftRef.current = schedulerContentRef.current.scrollLeft;
-    scrollTopRef.current = schedulerContentRef.current.scrollTop;
-  }, [schedulerData, onScrollLeft, onScrollRight, onScrollTop, onScrollBottom]); // ✅ no props ref
-
-  const handleViewChange = useCallback(e => {
-    const viewType = parseInt(e.target.value.charAt(0), 10);
-    const showAgenda = e.target.value.charAt(1) === '1';
-    const isEventPerspective = e.target.value.charAt(2) === '1';
-    onViewChange(schedulerData, {
-      viewType,
-      showAgenda,
-      isEventPerspective
-    });
-  }, [onViewChange, schedulerData]);
-  const goNext = useCallback(() => nextClick(schedulerData), [nextClick, schedulerData]);
-  const goBack = useCallback(() => prevClick(schedulerData), [prevClick, schedulerData]);
-  const onSelect = useCallback(date => onSelectDate(schedulerData, date), [onSelectDate, schedulerData]);
-  const {
-    viewType,
-    renderData,
-    showAgenda,
-    config
-  } = schedulerData;
-  const width = schedulerData.getSchedulerWidth();
-  const {
-    showWeekNumber,
-    weekNumberRowHeight,
-    showMonthRow,
-    monthRowHeight
-  } = config;
-  const schedulerDataVersion = schedulerData.getVersion ? schedulerData.getVersion() : 0;
-  const schedulerWidth = schedulerData.getContentTableWidth();
-  const weekNumberRowStyle = useMemo(() => ({
-    height: weekNumberRowHeight
-  }), [weekNumberRowHeight]);
-  const weekNumberThStyle = useMemo(() => ({
-    borderBottom: `1px solid ${config.headerBorderColor ?? '#e9e9e9'}`,
-    fontSize: '0.85em',
-    opacity: 0.7,
-    padding: '4px 8px'
-  }), [config.headerBorderColor]);
-  const schedulerInnerStyle = useMemo(() => ({
-    width: schedulerWidth
-  }), [schedulerWidth]);
-  const displayRenderData = useMemo(() => renderData.filter(o => o.render), [renderData]);
-  const eventDndSource = dndContext.getDndSource();
-  const handleSelectionChange = useCallback((isSelecting, selectedResourceIds, preview = {}) => {
-    const nextSelectedResourceIds = selectedResourceIds || [];
-    const nextLeft = preview.left || 0;
-    const nextWidth = preview.width || 0;
-    setSelectionState(prev => {
-      const sameIdsLength = prev.selectedResourceIds.length === nextSelectedResourceIds.length;
-      const sameIds = sameIdsLength && prev.selectedResourceIds.every((id, index) => id === nextSelectedResourceIds[index]);
-      if (prev.isSelecting === isSelecting && prev.left === nextLeft && prev.width === nextWidth && sameIds) {
-        return prev;
-      }
-      return {
-        isSelecting,
-        selectedResourceIds: nextSelectedResourceIds,
-        left: nextLeft,
-        width: nextWidth
-      };
-    });
-  }, []);
-  const selectionPreview = useMemo(() => ({
-    isSelecting: selectionState.isSelecting,
-    left: selectionState.left,
-    width: selectionState.width
-  }), [selectionState.isSelecting, selectionState.left, selectionState.width]);
-  const selectedIdsSet = useMemo(() => new Set(selectionState.selectedResourceIds), [selectionState.selectedResourceIds]);
-  const resourceEventsList = useMemo(() => displayRenderData.map(item => /*#__PURE__*/_jsx(ResourceEvents, {
-    resourceEvents: item,
-    schedulerData: schedulerData,
-    schedulerDataVersion: schedulerDataVersion,
-    dndSource: eventDndSource,
-    dndContext: dndContext,
-    onSetAddMoreState: props.onSetAddMoreState,
-    updateEventStart: props.updateEventStart,
-    updateEventEnd: props.updateEventEnd,
-    moveEvent: props.moveEvent,
-    movingEvent: props.movingEvent,
-    conflictOccurred: props.conflictOccurred,
-    subtitleGetter: props.subtitleGetter,
-    eventItemClick: props.eventItemClick,
-    viewEventClick: props.viewEventClick,
-    viewEventText: props.viewEventText,
-    viewEvent2Click: props.viewEvent2Click,
-    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, props.eventItemPopoverTemplateResolver, handleSelectionChange, selectedIdsSet, selectionPreview]);
-  let tbodyContent = /*#__PURE__*/_jsx("tr", {});
-  if (showAgenda) {
-    tbodyContent = /*#__PURE__*/_jsx(AgendaView, {
-      schedulerData: schedulerData,
-      subtitleGetter: props.subtitleGetter,
-      eventItemClick: props.eventItemClick,
-      viewEventClick: props.viewEventClick,
-      viewEventText: props.viewEventText,
-      viewEvent2Click: props.viewEvent2Click,
-      viewEvent2Text: props.viewEvent2Text,
-      slotClickedFunc: props.slotClickedFunc,
-      slotItemTemplateResolver: props.slotItemTemplateResolver,
-      eventItemTemplateResolver: props.eventItemTemplateResolver,
-      eventItemPopoverTemplateResolver: props.eventItemPopoverTemplateResolver
-    });
-  } else {
-    const resourceTableWidth = schedulerData.getResourceTableWidth();
-    const schedulerContainerWidth = width - (config.resourceViewEnabled ? resourceTableWidth : 0);
-    const configuredContentHeight = config.schedulerContentHeight;
-    const contentHeight = !config.responsiveByParent && configuredContentHeight === '100%' ? schedulerData.getSchedulerContentDesiredHeight() : configuredContentHeight;
-    const resourcePaddingBottom = resourceScrollbarHeight === 0 ? contentScrollbarHeight : 0;
-    const contentPaddingBottom = contentScrollbarHeight === 0 ? resourceScrollbarHeight : 0;
-    let schedulerContentStyle = {
-      overflowX: viewType === ViewType.Week ? 'hidden' : 'auto',
-      overflowY: 'auto',
-      margin: '0px',
-      position: 'relative',
-      height: contentHeight,
-      paddingBottom: contentPaddingBottom
-    };
-    let resourceContentStyle = {
-      height: contentHeight,
-      overflowX: 'auto',
-      overflowY: 'auto',
-      width: resourceTableWidth + resourceScrollbarWidth,
-      margin: `0px -${contentScrollbarWidth}px 0px 0px`
-    };
-    if (config.schedulerMaxHeight > 0) {
-      const totalHeaderHeight = config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight();
-      schedulerContentStyle = {
-        ...schedulerContentStyle,
-        maxHeight: config.schedulerMaxHeight - totalHeaderHeight
-      };
-      resourceContentStyle = {
-        ...resourceContentStyle,
-        maxHeight: config.schedulerMaxHeight - totalHeaderHeight
-      };
-    } else if (config.responsiveByParent && schedulerData.documentHeight > 0) {
-      const availableHeight = schedulerData.getSchedulerHeight();
-      schedulerContentStyle = {
-        ...schedulerContentStyle,
-        height: availableHeight
-      };
-      resourceContentStyle = {
-        ...resourceContentStyle,
-        height: availableHeight
-      };
+    else {
+        const resourceTableWidth = schedulerData.getResourceTableWidth();
+        const schedulerContainerWidth = width - (config.resourceViewEnabled ? resourceTableWidth : 0);
+        const configuredContentHeight = config.schedulerContentHeight;
+        const contentHeight = !config.responsiveByParent && configuredContentHeight === '100%'
+            ? schedulerData.getSchedulerContentDesiredHeight()
+            : configuredContentHeight;
+        const resourcePaddingBottom = resourceScrollbarHeight === 0 ? contentScrollbarHeight : 0;
+        const contentPaddingBottom = contentScrollbarHeight === 0 ? resourceScrollbarHeight : 0;
+        let schedulerContentStyle = {
+            overflowX: viewType === ViewType.Week ? 'hidden' : 'auto',
+            overflowY: 'auto',
+            margin: '0px',
+            position: 'relative',
+            height: contentHeight,
+            paddingBottom: contentPaddingBottom,
+        };
+        let resourceContentStyle = {
+            height: contentHeight,
+            overflowX: 'auto',
+            overflowY: 'auto',
+            width: resourceTableWidth + resourceScrollbarWidth,
+            margin: `0px -${contentScrollbarWidth}px 0px 0px`,
+        };
+        if (config.schedulerMaxHeight > 0) {
+            const totalHeaderHeight = config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight();
+            schedulerContentStyle = {
+                ...schedulerContentStyle,
+                maxHeight: config.schedulerMaxHeight - totalHeaderHeight,
+            };
+            resourceContentStyle = {
+                ...resourceContentStyle,
+                maxHeight: config.schedulerMaxHeight - totalHeaderHeight,
+            };
+        }
+        else if (config.responsiveByParent && schedulerData.documentHeight > 0) {
+            const availableHeight = schedulerData.getSchedulerHeight();
+            schedulerContentStyle = {
+                ...schedulerContentStyle,
+                height: availableHeight,
+            };
+            resourceContentStyle = {
+                ...resourceContentStyle,
+                height: availableHeight,
+            };
+        }
+        const resourceName = schedulerData.isEventPerspective ? config.taskName : config.resourceName;
+        const resourceColumnStyle = {
+            display: config.resourceViewEnabled ? undefined : 'none',
+            width: resourceTableWidth,
+            verticalAlign: 'top',
+        };
+        const resourceHeaderStyle = {
+            borderBottom: `1px solid ${config.headerBorderColor ?? 'var(--rbs-border)'}`,
+            height: config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight(),
+            ...configTableHeaderStyle,
+        };
+        const resourceHeaderScrollStyle = {
+            overflowX: 'scroll',
+            overflowY: 'hidden',
+            margin: `0px 0px -${contentScrollbarHeight}px`,
+        };
+        const schedulerViewStyle = {
+            width: schedulerContainerWidth,
+        };
+        const schedulerViewColumnStyle = {
+            verticalAlign: 'top',
+        };
+        const schedulerHeadWrapperStyle = {
+            overflow: 'hidden',
+            borderBottom: `1px solid ${config.headerBorderColor ?? 'var(--rbs-border)'}`,
+            height: config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight(),
+        };
+        const schedulerHeadScrollStyle = {
+            overflowX: 'scroll',
+            overflowY: 'hidden',
+            margin: `0px 0px -${contentScrollbarHeight}px`,
+        };
+        const schedulerHeadInnerStyle = {
+            paddingRight: `${contentScrollbarWidth}px`,
+            width: schedulerWidth + contentScrollbarWidth,
+        };
+        tbodyContent = (_jsxs("tr", { children: [_jsx("td", { style: resourceColumnStyle, children: _jsxs("div", { className: "resource-view", children: [_jsx("div", { style: resourceHeaderStyle, children: _jsx("div", { style: resourceHeaderScrollStyle, children: _jsx("table", { className: "resource-table", children: _jsxs("thead", { children: [showMonthRow && (_jsx("tr", { style: { height: monthRowHeight }, children: _jsx("th", { style: weekNumberThStyle }) })), showWeekNumber && (_jsx("tr", { style: weekNumberRowStyle, children: _jsx("th", { style: weekNumberThStyle, children: config.weekNumberLabel ?? 'Week No.' }) })), _jsx("tr", { style: { height: config.tableHeaderHeight }, children: _jsx("th", { className: "header3-text", children: CustomResourceHeader ? _jsx(CustomResourceHeader, {}) : resourceName }) })] }) }) }) }), _jsx("section", { style: resourceContentStyle, ref: schedulerResourceRef, onMouseOver: onSchedulerResourceMouseOver, onFocus: onSchedulerResourceMouseOver, onMouseOut: onSchedulerResourceMouseOut, onBlur: onSchedulerResourceMouseOut, onScroll: onSchedulerResourceScroll, "aria-label": "Resource sidebar", children: _jsx(ResourceView, { schedulerData: schedulerData, schedulerDataVersion: schedulerDataVersion, contentScrollbarHeight: resourcePaddingBottom, slotClickedFunc: props.slotClickedFunc, slotItemTemplateResolver: props.slotItemTemplateResolver, toggleExpandFunc: props.toggleExpandFunc, CustomResourceCell: props.CustomResourceCell, isSelecting: selectionState.isSelecting, selectedResourceIds: selectionState.selectedResourceIds }) })] }) }), _jsx("td", { style: schedulerViewColumnStyle, children: _jsxs("div", { className: "scheduler-view", style: schedulerViewStyle, children: [_jsx("div", { style: schedulerHeadWrapperStyle, children: _jsx("section", { style: schedulerHeadScrollStyle, ref: schedulerHeadRef, onMouseOver: onSchedulerHeadMouseOver, onFocus: onSchedulerHeadMouseOver, onMouseOut: onSchedulerHeadMouseOut, onBlur: onSchedulerHeadMouseOut, onScroll: onSchedulerHeadScroll, "aria-label": "Scheduler Header", children: _jsx("div", { style: schedulerHeadInnerStyle, children: _jsx("table", { className: "scheduler-bg-table", style: schedulerInnerStyle, children: _jsx(HeaderView, { schedulerData: schedulerData, schedulerDataVersion: schedulerDataVersion, nonAgendaCellHeaderTemplateResolver: props.nonAgendaCellHeaderTemplateResolver }) }) }) }) }), _jsx("section", { style: schedulerContentStyle, ref: schedulerContentRef, onMouseOver: onSchedulerContentMouseOver, onFocus: onSchedulerContentMouseOver, onMouseOut: onSchedulerContentMouseOut, onBlur: onSchedulerContentMouseOut, onScroll: onSchedulerContentScroll, "aria-label": "Scheduler content", children: _jsxs("div", { style: schedulerInnerStyle, children: [_jsx("div", { className: "scheduler-content", children: _jsx("table", { className: "scheduler-content-table", children: _jsx("tbody", { children: resourceEventsList }) }) }), _jsx("div", { className: "scheduler-bg", children: _jsx("table", { className: "scheduler-bg-table", style: schedulerInnerStyle, ref: schedulerContentBgTableRef, children: _jsx(BodyView, { schedulerData: schedulerData, schedulerDataVersion: schedulerDataVersion }) }) })] }) })] }) })] }));
     }
-    const resourceName = schedulerData.isEventPerspective ? config.taskName : config.resourceName;
-    const resourceColumnStyle = {
-      display: config.resourceViewEnabled ? undefined : 'none',
-      width: resourceTableWidth,
-      verticalAlign: 'top'
-    };
-    const resourceHeaderStyle = {
-      borderBottom: `1px solid ${config.headerBorderColor ?? '#e9e9e9'}`,
-      height: config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight(),
-      ...configTableHeaderStyle
-    };
-    const resourceHeaderScrollStyle = {
-      overflowX: 'scroll',
-      overflowY: 'hidden',
-      margin: `0px 0px -${contentScrollbarHeight}px`
-    };
-    const schedulerViewStyle = {
-      width: schedulerContainerWidth
-    };
-    const schedulerViewColumnStyle = {
-      verticalAlign: 'top'
-    };
-    const schedulerHeadWrapperStyle = {
-      overflow: 'hidden',
-      borderBottom: `1px solid ${config.headerBorderColor ?? '#e9e9e9'}`,
-      height: config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight()
-    };
-    const schedulerHeadScrollStyle = {
-      overflowX: 'scroll',
-      overflowY: 'hidden',
-      margin: `0px 0px -${contentScrollbarHeight}px`
-    };
-    const schedulerHeadInnerStyle = {
-      paddingRight: `${contentScrollbarWidth}px`,
-      width: schedulerWidth + contentScrollbarWidth
-    };
-    tbodyContent = /*#__PURE__*/_jsxs("tr", {
-      children: [/*#__PURE__*/_jsx("td", {
-        style: resourceColumnStyle,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "resource-view",
-          children: [/*#__PURE__*/_jsx("div", {
-            style: resourceHeaderStyle,
-            children: /*#__PURE__*/_jsx("div", {
-              style: resourceHeaderScrollStyle,
-              children: /*#__PURE__*/_jsx("table", {
-                className: "resource-table",
-                children: /*#__PURE__*/_jsxs("thead", {
-                  children: [showMonthRow && /*#__PURE__*/_jsx("tr", {
-                    style: {
-                      height: monthRowHeight
-                    },
-                    children: /*#__PURE__*/_jsx("th", {
-                      style: weekNumberThStyle
-                    })
-                  }), showWeekNumber && /*#__PURE__*/_jsx("tr", {
-                    style: weekNumberRowStyle,
-                    children: /*#__PURE__*/_jsx("th", {
-                      style: weekNumberThStyle,
-                      children: config.weekNumberLabel ?? 'Week No.'
-                    })
-                  }), /*#__PURE__*/_jsx("tr", {
-                    style: {
-                      height: config.tableHeaderHeight
-                    },
-                    children: /*#__PURE__*/_jsx("th", {
-                      className: "header3-text",
-                      children: CustomResourceHeader ? /*#__PURE__*/_jsx(CustomResourceHeader, {}) : resourceName
-                    })
-                  })]
-                })
-              })
-            })
-          }), /*#__PURE__*/_jsx("section", {
-            style: resourceContentStyle,
-            ref: schedulerResourceRef,
-            onMouseOver: onSchedulerResourceMouseOver,
-            onFocus: onSchedulerResourceMouseOver,
-            onMouseOut: onSchedulerResourceMouseOut,
-            onBlur: onSchedulerResourceMouseOut,
-            onScroll: onSchedulerResourceScroll,
-            "aria-label": "Resource sidebar",
-            children: /*#__PURE__*/_jsx(ResourceView, {
-              schedulerData: schedulerData,
-              schedulerDataVersion: schedulerDataVersion,
-              contentScrollbarHeight: resourcePaddingBottom,
-              slotClickedFunc: props.slotClickedFunc,
-              slotItemTemplateResolver: props.slotItemTemplateResolver,
-              toggleExpandFunc: props.toggleExpandFunc,
-              CustomResourceCell: props.CustomResourceCell,
-              isSelecting: selectionState.isSelecting,
-              selectedResourceIds: selectionState.selectedResourceIds
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx("td", {
-        style: schedulerViewColumnStyle,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "scheduler-view",
-          style: schedulerViewStyle,
-          children: [/*#__PURE__*/_jsx("div", {
-            style: schedulerHeadWrapperStyle,
-            children: /*#__PURE__*/_jsx("section", {
-              style: schedulerHeadScrollStyle,
-              ref: schedulerHeadRef,
-              onMouseOver: onSchedulerHeadMouseOver,
-              onFocus: onSchedulerHeadMouseOver,
-              onMouseOut: onSchedulerHeadMouseOut,
-              onBlur: onSchedulerHeadMouseOut,
-              onScroll: onSchedulerHeadScroll,
-              "aria-label": "Scheduler Header",
-              children: /*#__PURE__*/_jsx("div", {
-                style: schedulerHeadInnerStyle,
-                children: /*#__PURE__*/_jsx("table", {
-                  className: "scheduler-bg-table",
-                  style: schedulerInnerStyle,
-                  children: /*#__PURE__*/_jsx(HeaderView, {
-                    schedulerData: schedulerData,
-                    schedulerDataVersion: schedulerDataVersion,
-                    nonAgendaCellHeaderTemplateResolver: props.nonAgendaCellHeaderTemplateResolver
-                  })
-                })
-              })
-            })
-          }), /*#__PURE__*/_jsx("section", {
-            style: schedulerContentStyle,
-            ref: schedulerContentRef,
-            onMouseOver: onSchedulerContentMouseOver,
-            onFocus: onSchedulerContentMouseOver,
-            onMouseOut: onSchedulerContentMouseOut,
-            onBlur: onSchedulerContentMouseOut,
-            onScroll: onSchedulerContentScroll,
-            "aria-label": "Scheduler content",
-            children: /*#__PURE__*/_jsxs("div", {
-              style: schedulerInnerStyle,
-              children: [/*#__PURE__*/_jsx("div", {
-                className: "scheduler-content",
-                children: /*#__PURE__*/_jsx("table", {
-                  className: "scheduler-content-table",
-                  children: /*#__PURE__*/_jsx("tbody", {
-                    children: resourceEventsList
-                  })
-                })
-              }), /*#__PURE__*/_jsx("div", {
-                className: "scheduler-bg",
-                children: /*#__PURE__*/_jsx("table", {
-                  className: "scheduler-bg-table",
-                  style: schedulerInnerStyle,
-                  ref: schedulerContentBgTableRef,
-                  children: /*#__PURE__*/_jsx(BodyView, {
-                    schedulerData: schedulerData,
-                    schedulerDataVersion: schedulerDataVersion
-                  })
-                })
-              })]
-            })
-          })]
-        })
-      })]
-    });
-  }
-  const schedulerHeaderStyle = useMemo(() => ({
-    display: config.headerEnabled ? undefined : 'none',
-    marginBottom: config.headerEnabled ? '24px' : undefined
-  }), [config.headerEnabled]);
-  const schedulerHeader = useMemo(() => /*#__PURE__*/_jsx(SchedulerHeader, {
-    ref: setSchedulerHeaderRef,
-    style: schedulerHeaderStyle,
-    onViewChange: handleViewChange,
-    schedulerData: schedulerData,
-    onSelectDate: onSelect,
-    goNext: goNext,
-    goBack: goBack,
-    rightCustomHeader: rightCustomHeader,
-    leftCustomHeader: leftCustomHeader
-  }), [schedulerHeaderStyle, handleViewChange, schedulerData, onSelect, goNext, goBack, rightCustomHeader, leftCustomHeader, setSchedulerHeaderRef]);
-
-  // table-layout: fixed sizes columns from the first row (the toolbar, colSpan=2), so pin the resource column here
-  const resourceColumnWidth = schedulerData.showAgenda || !config.resourceViewEnabled ? undefined : schedulerData.getResourceTableWidth();
-  const rootTableStyle = useMemo(() => ({
-    width: `${width}px`,
-    tableLayout: 'fixed'
-  }), [width]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: containerRef,
-    className: className ? `rbs-container ${className}` : 'rbs-container',
-    style: style,
-    children: /*#__PURE__*/_jsxs("table", {
-      id: "rbs-root",
-      className: `rbs ${schedulerData.isVerticalResourceView() ? 'vertical-view' : ''}`,
-      style: rootTableStyle,
-      ref: schedulerRootRef,
-      children: [resourceColumnWidth !== undefined && /*#__PURE__*/_jsxs("colgroup", {
-        children: [/*#__PURE__*/_jsx("col", {
-          style: {
-            width: resourceColumnWidth
-          }
-        }), /*#__PURE__*/_jsx("col", {})]
-      }), /*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsx("tr", {
-          children: /*#__PURE__*/_jsx("td", {
-            colSpan: "2",
-            children: schedulerHeader
-          })
-        })
-      }), /*#__PURE__*/_jsx("tbody", {
-        children: tbodyContent
-      })]
-    })
-  });
+    const schedulerHeaderStyle = useMemo(() => ({
+        display: config.headerEnabled ? undefined : 'none',
+        marginBottom: config.headerEnabled ? '24px' : undefined,
+    }), [config.headerEnabled]);
+    const schedulerHeader = useMemo(() => (_jsx(SchedulerHeader, { ref: setSchedulerHeaderRef, style: schedulerHeaderStyle, onViewChange: handleViewChange, schedulerData: schedulerData, onSelectDate: onSelect, goNext: goNext, goBack: goBack, rightCustomHeader: rightCustomHeader, leftCustomHeader: leftCustomHeader })), [
+        schedulerHeaderStyle,
+        handleViewChange,
+        schedulerData,
+        onSelect,
+        goNext,
+        goBack,
+        rightCustomHeader,
+        leftCustomHeader,
+        setSchedulerHeaderRef,
+    ]);
+    // table-layout: fixed sizes columns from the first row (the toolbar, colSpan=2), so pin the resource column here
+    const resourceColumnWidth = schedulerData.showAgenda || !config.resourceViewEnabled ? undefined : schedulerData.getResourceTableWidth();
+    const rootTableStyle = useMemo(() => ({ width: `${width}px`, tableLayout: 'fixed' }), [width]);
+    return (_jsx("div", { ref: containerRef, className: className ? `rbs-container ${className}` : 'rbs-container', style: style, "data-rbs-theme": config.theme, "data-rbs-look": config.look, "data-rbs-palette": config.palette, children: _jsxs("table", { id: "rbs-root", className: `rbs ${schedulerData.isVerticalResourceView() ? 'vertical-view' : ''}`, style: rootTableStyle, ref: schedulerRootRef, children: [resourceColumnWidth !== undefined && (_jsxs("colgroup", { children: [_jsx("col", { style: { width: resourceColumnWidth } }), _jsx("col", {})] })), _jsx("thead", { children: _jsx("tr", { children: _jsx("td", { colSpan: 2, children: schedulerHeader }) }) }), _jsx("tbody", { children: tbodyContent })] }) }));
 }
-Scheduler.propTypes = {
-  parentRef: PropTypes.object,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  schedulerData: PropTypes.object.isRequired,
-  prevClick: PropTypes.func.isRequired,
-  nextClick: PropTypes.func.isRequired,
-  onViewChange: PropTypes.func.isRequired,
-  onSelectDate: PropTypes.func.isRequired,
-  onSetAddMoreState: PropTypes.func,
-  updateEventStart: PropTypes.func,
-  updateEventEnd: PropTypes.func,
-  moveEvent: PropTypes.func,
-  movingEvent: PropTypes.func,
-  leftCustomHeader: PropTypes.object,
-  rightCustomHeader: PropTypes.object,
-  newEvent: PropTypes.func,
-  subtitleGetter: PropTypes.func,
-  eventItemClick: PropTypes.func,
-  viewEventClick: PropTypes.func,
-  viewEventText: PropTypes.string,
-  viewEvent2Click: PropTypes.func,
-  viewEvent2Text: PropTypes.string,
-  conflictOccurred: PropTypes.func,
-  eventItemTemplateResolver: PropTypes.func,
-  eventItemPopoverTemplateResolver: PropTypes.func,
-  dndSources: PropTypes.array,
-  slotClickedFunc: PropTypes.func,
-  toggleExpandFunc: PropTypes.func,
-  slotItemTemplateResolver: PropTypes.func,
-  nonAgendaCellHeaderTemplateResolver: PropTypes.func,
-  onScrollLeft: PropTypes.func,
-  onScrollRight: PropTypes.func,
-  onScrollTop: PropTypes.func,
-  onScrollBottom: PropTypes.func,
-  CustomResourceHeader: PropTypes.func,
-  CustomResourceCell: PropTypes.func,
-  configTableHeaderStyle: PropTypes.object
-};
-export { AddMorePopover, CellUnit, DATE_FORMAT, DATETIME_FORMAT, DemoData, DnDContext, DnDSource, Scheduler, SchedulerData, SummaryPos, ViewType, wrapperFun };
+export { AddMorePopover, CellUnit, DATE_FORMAT, DATETIME_FORMAT, DemoData, DnDContext, DnDSource, Scheduler, SchedulerData, SummaryPos, ViewType, wrapperFun, };