react-big-schedule 7.1.1-beta.0 → 7.1.1-beta.2

package/README.md

@@ -260,6 +260,30 @@ 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
+};
+```
+
+#### 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 +302,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
@@ -987,7 +1013,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) => {
@@ -176,7 +163,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

@@ -35,7 +35,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 +51,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()
@@ -439,6 +456,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;
   }

package/dist/components/index.js

@@ -160,7 +160,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 +176,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 +302,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 +409,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 +437,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 +454,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 +477,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/scheduler.js

@@ -56,6 +56,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,

package/dist/index.d.ts

@@ -419,6 +419,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.0",
+  "version": "7.1.1-beta.2",
   "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",