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

package/README.md

@@ -260,6 +260,38 @@ constructor(date=dayjs().format(DATE_FORMAT), viewType = ViewType.Week,
 - `localeDayjs` is a locale dayjs object, which is unified used in react-big-scheduler. If not provided, Scheduler will come
   with English(en, United States) locale strings.
 
+#### Using SchedulerData with React state
+
+`SchedulerData` is mutable; its methods (`prev`, `next`, `setDate`, `setViewType`, `setEvents`, ...) notify the `Scheduler`, which re-renders itself. With a functional component, keep the same instance in state and call the methods in your handlers, then call `setState` with a new object only if you need the parent to re-render too:
+
+```jsx
+const [schedulerData, setSchedulerData] = useState(() => new SchedulerData(dayjs(), ViewType.Week));
+
+const prevClick = data => {
+  data.prev();
+  data.setEvents(events);
+  setSchedulerData(Object.assign(Object.create(Object.getPrototypeOf(data)), data)); // optional
+};
+```
+
+#### Vertical resource view
+
+`ViewType.VerticalResource` shows resources as columns and time as rows. Events render and drag-to-create works across resources and time slots. Moving and resizing existing events by drag is not supported in this view yet (they are read-only there); use the horizontal views for that. Row height grows with the number of overlapping events, like the horizontal views. Refer to [this example](https://react-big-schedule.vercel.app/vertical-view).
+
+#### 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.
+
+```jsx
+<ConfigProvider theme={{ token: { colorPrimary: '#722ed1' } }}>
+  <Scheduler schedulerData={schedulerData} /* ... */ />
+</ConfigProvider>
+```
+
 #### setSchedulerLocale
 
 ```js
@@ -278,6 +310,8 @@ import * as dayjsLocale from 'dayjs/locale/pt-br';
 setSchedulerLocale(dayjsLocale);
 ```
 
+The locale is kept per `SchedulerData` instance, so several schedulers (and your own dayjs usage) can use different locales without affecting each other.
+
 By default, Scheduler comes with English(en, United States)
 
 #### setCalendarPopoverLocale
@@ -570,7 +604,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
@@ -987,7 +1021,18 @@ slotItemTemplateResolver: PropTypes.func;
 slotItemTemplateResolver(schedulerData, slot, slotClickedFunc, width, clsName);
 ```
 
-Use this function, you can customize the left slot style.
+Use this function, you can customize the left slot style. The returned element is rendered inside the resource cell, so a resource name can be any React node:
+
+```jsx
+<Scheduler
+  schedulerData={schedulerData}
+  slotItemTemplateResolver={(schedulerData, slot, slotClickedFunc, width, clsName) => (
+    <div className={clsName} style={{ width }} onClick={() => slotClickedFunc?.(schedulerData, slot)}>
+      <Avatar size="small" src={slot.avatar} /> <b>{slot.slotName}</b>
+    </div>
+  )}
+/>
+```
 
 #### nonAgendaCellHeaderTemplateResolver
 

package/dist/components/HeaderView.js

@@ -11,7 +11,7 @@ import { CellUnit } from '../config/default';
  * @returns {JSX.Element} A <thead> element containing the optional week-number row and the
  * main header row for the scheduler table.
  */
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function HeaderView({
   schedulerData,
   nonAgendaCellHeaderTemplateResolver
@@ -24,49 +24,27 @@ function HeaderView({
   } = schedulerData;
   const {
     showWeekNumber,
-    weekNumberRowHeight = 24
+    weekNumberRowHeight = 24,
+    showMonthRow,
+    monthRowHeight = 24
   } = config;
   const headerHeight = schedulerData.getTableHeaderHeight();
   const cellWidth = schedulerData.getContentCellWidth();
   const minuteStepsInHour = schedulerData.getMinuteStepsInHour();
 
-  // Week number row generation
-  const weekNumberRow = useMemo(() => {
-    if (!showWeekNumber || schedulerData.isVerticalResourceView()) return null;
-    const weekGroups = [];
-    let currentWeekKey = null;
-    let currentWeek = null;
-    let currentYear = null;
-    let colspan = 0;
+  // Group consecutive headers sharing a key into spanning <th>s (week number row, month row)
+  const buildGroupRow = useCallback((keyOf, labelOf, stickyLabel = false) => {
+    const groups = [];
     headers.forEach(item => {
-      const year = localeDayjs(new Date(item.time)).year();
-      const weekNum = localeDayjs(new Date(item.time)).isoWeek();
-      const weekKey = `${year}-${weekNum}`;
-      if (currentWeekKey === weekKey) {
-        colspan += 1;
-      } else {
-        if (currentWeekKey !== null) {
-          weekGroups.push({
-            week: currentWeek,
-            year: currentYear,
-            colspan
-          });
-        }
-        currentWeekKey = weekKey;
-        currentWeek = weekNum;
-        currentYear = year;
-        colspan = 1;
-      }
-    });
-
-    // Push the last week group
-    if (currentWeekKey !== null) {
-      weekGroups.push({
-        week: currentWeek,
-        year: currentYear,
-        colspan
+      const d = localeDayjs(new Date(item.time));
+      const key = keyOf(d);
+      const last = groups[groups.length - 1];
+      if (last && last.key === key) last.colspan += 1;else groups.push({
+        key,
+        label: labelOf(d),
+        colspan: 1
       });
-    }
+    });
     const cellStyle = {
       fontSize: '0.85em',
       opacity: 0.7,
@@ -74,19 +52,28 @@ function HeaderView({
       padding: '4px 8px',
       textAlign: 'center'
     };
-    return weekGroups.map(group => {
-      if (group.week == null || group.year == null) return null;
-      return /*#__PURE__*/_jsxs("th", {
-        colSpan: group.colspan,
+    return groups.map(group => /*#__PURE__*/_jsx("th", {
+      colSpan: group.colspan,
+      style: {
+        ...cellStyle,
+        ...(stickyLabel && {
+          textAlign: 'left'
+        }),
+        width: group.colspan * cellWidth,
+        minWidth: group.colspan * cellWidth
+      },
+      children: stickyLabel ? /*#__PURE__*/_jsx("span", {
         style: {
-          ...cellStyle,
-          width: group.colspan * cellWidth,
-          minWidth: group.colspan * cellWidth
+          position: 'sticky',
+          left: 8
         },
-        children: ["W", group.week]
-      }, `week-${group.year}-${group.week}`);
-    });
-  }, [showWeekNumber, headers, localeDayjs, config.headerBorderColor, cellWidth, schedulerData]);
+        children: group.label
+      }) : group.label
+    }, group.key));
+  }, [headers, localeDayjs, config.headerBorderColor, cellWidth]);
+  const isGrouped = !schedulerData.isVerticalResourceView();
+  const weekNumberRow = useMemo(() => showWeekNumber && isGrouped ? buildGroupRow(d => `w-${d.year()}-${d.isoWeek()}`, d => `W${d.isoWeek()}`) : null, [showWeekNumber, isGrouped, buildGroupRow]);
+  const monthRow = useMemo(() => showMonthRow && isGrouped ? buildGroupRow(d => `m-${d.year()}-${d.month()}`, d => d.format('MMMM YYYY'), true) : null, [showMonthRow, isGrouped, buildGroupRow]);
 
   // Extract common style creation logic
   const createCellStyle = useCallback((item, width, isLastCell) => {
@@ -110,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]);
@@ -176,7 +164,12 @@ function HeaderView({
     });
   }, [cellUnit, headers, minuteStepsInHour, cellWidth, config, localeDayjs, createCellStyle, getCellFormat, renderCellContent, schedulerData.isVerticalResourceView]);
   return /*#__PURE__*/_jsxs("thead", {
-    children: [weekNumberRow && /*#__PURE__*/_jsx("tr", {
+    children: [monthRow && /*#__PURE__*/_jsx("tr", {
+      style: {
+        height: monthRowHeight
+      },
+      children: monthRow
+    }), weekNumberRow && /*#__PURE__*/_jsx("tr", {
       style: {
         height: weekNumberRowHeight
       },

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;
@@ -35,7 +33,7 @@ export default class SchedulerData {
     dayjs.extend(weekday);
     dayjs.extend(utc);
     dayjs.extend(isoWeek);
-    this.localeDayjs = dayjs;
+    this.localeDayjs = this._createLocaleDayjs();
     this.config = newConfig === undefined ? config : {
       ...config,
       ...newConfig
@@ -51,6 +49,23 @@ export default class SchedulerData {
     this._createRenderData();
   }
 
+  // Per-instance dayjs: the locale is applied to each created date instead of the global dayjs
+  // singleton, so schedulers (and the host app) don't overwrite each other's locale (#146).
+  _createLocaleDayjs() {
+    let locale;
+    const localeDayjs = (...args) => {
+      const d = dayjs(...args);
+      return locale ? d.locale(locale) : d;
+    };
+    localeDayjs.locale = preset => {
+      if (preset === undefined) return locale || dayjs.locale();
+      // dayjs accepts a locale name or a locale object; resolve (and register) it once to a name
+      locale = dayjs().locale(preset).locale();
+      return localeDayjs;
+    };
+    return localeDayjs;
+  }
+
   /**
    * Update user-facing labels from the i18n provider
    * This allows apps to provide localized labels via setLabelsProvider()
@@ -152,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;
@@ -372,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() {
@@ -439,6 +447,17 @@ export default class SchedulerData {
     });
     return resource;
   }
+
+  // height of the optional group rows (month / week number) rendered above the main header row
+  getHeaderGroupRowsHeight() {
+    const {
+      showMonthRow,
+      monthRowHeight = 24,
+      showWeekNumber,
+      weekNumberRowHeight = 24
+    } = this.config;
+    return (showMonthRow ? monthRowHeight : 0) + (showWeekNumber ? weekNumberRowHeight : 0);
+  }
   getTableHeaderHeight() {
     return this.config.tableHeaderHeight;
   }
@@ -613,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;
@@ -829,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);
@@ -1029,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);
@@ -160,7 +159,7 @@ function Scheduler(props) {
       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.config.showWeekNumber ? schedulerData.config.weekNumberRowHeight || 0 : 0);
+        const totalHeight = rect.height + (parseFloat(style.marginTop) || 0) + (parseFloat(style.marginBottom) || 0) + schedulerData.getHeaderGroupRowsHeight();
         schedulerData._setSchedulerHeaderHeight(totalHeight);
       };
       updateHeaderHeight(schedulerHeaderEl);
@@ -176,7 +175,7 @@ function Scheduler(props) {
         }
       };
     }
-  }, [schedulerHeaderEl, schedulerData, schedulerData.config.showWeekNumber, schedulerData.config.weekNumberRowHeight]);
+  }, [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;
@@ -302,7 +301,9 @@ function Scheduler(props) {
   const width = schedulerData.getSchedulerWidth();
   const {
     showWeekNumber,
-    weekNumberRowHeight
+    weekNumberRowHeight,
+    showMonthRow,
+    monthRowHeight
   } = config;
   const schedulerDataVersion = schedulerData.getVersion ? schedulerData.getVersion() : 0;
   const schedulerWidth = schedulerData.getContentTableWidth();
@@ -407,7 +408,7 @@ function Scheduler(props) {
       margin: `0px -${contentScrollbarWidth}px 0px 0px`
     };
     if (config.schedulerMaxHeight > 0) {
-      const totalHeaderHeight = config.tableHeaderHeight + (showWeekNumber ? weekNumberRowHeight : 0);
+      const totalHeaderHeight = config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight();
       schedulerContentStyle = {
         ...schedulerContentStyle,
         maxHeight: config.schedulerMaxHeight - totalHeaderHeight
@@ -435,7 +436,7 @@ function Scheduler(props) {
     };
     const resourceHeaderStyle = {
       borderBottom: `1px solid ${config.headerBorderColor ?? '#e9e9e9'}`,
-      height: config.tableHeaderHeight + (showWeekNumber ? weekNumberRowHeight : 0),
+      height: config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight(),
       ...configTableHeaderStyle
     };
     const resourceHeaderScrollStyle = {
@@ -452,7 +453,7 @@ function Scheduler(props) {
     const schedulerHeadWrapperStyle = {
       overflow: 'hidden',
       borderBottom: `1px solid ${config.headerBorderColor ?? '#e9e9e9'}`,
-      height: config.tableHeaderHeight + (showWeekNumber ? weekNumberRowHeight : 0)
+      height: config.tableHeaderHeight + schedulerData.getHeaderGroupRowsHeight()
     };
     const schedulerHeadScrollStyle = {
       overflowX: 'scroll',
@@ -475,7 +476,14 @@ function Scheduler(props) {
               children: /*#__PURE__*/_jsx("table", {
                 className: "resource-table",
                 children: /*#__PURE__*/_jsxs("thead", {
-                  children: [showWeekNumber && /*#__PURE__*/_jsx("tr", {
+                  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,

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,
@@ -56,6 +55,9 @@ export default {
   headerBorderColor: '#e9e9e9',
   weekNumberRowHeight: 24,
   showWeekNumber: false,
+  // month row above the day cells (month names spanning their days), like the week number row
+  showMonthRow: false,
+  monthRowHeight: 24,
   startResizable: true,
   endResizable: true,
   movable: true,
@@ -86,6 +88,7 @@ export default {
   nonAgendaWeekCellHeaderFormat: 'ww/YYYY',
   nonAgendaMonthCellHeaderFormat: 'MMM YYYY',
   nonAgendaYearCellHeaderFormat: 'YYYY',
+  nonAgendaQuarterCellHeaderFormat: '[Q]Q YYYY',
   nonAgendaOtherCellHeaderFormat: 'ddd M/D',
   minuteStep: 30,
   views: [{

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;
@@ -419,6 +421,8 @@ export interface SchedulerDataConfig {
   responsiveByParent?: boolean;
   showWeekNumber?: boolean;
   weekNumberRowHeight?: number;
+  showMonthRow?: boolean;
+  monthRowHeight?: number;
   weekNumberLabel?: string;
   headerBorderColor?: string;
 }

package/package.json

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