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

package/README.md

@@ -274,6 +274,14 @@ const prevClick = data => {
 };
 ```
 
+#### Vertical resource view
+
+`ViewType.VerticalResource` shows resources as columns and time as rows. Events render and drag-to-create works across resources and time slots. 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.
@@ -596,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

package/dist/components/HeaderView.js

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

package/dist/components/SchedulerData.js

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

package/dist/components/index.js

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

package/dist/config/default.js

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

package/dist/config/scheduler.js

@@ -11,7 +11,6 @@ import { SummaryPos, ViewType } from './default';
  */
 export default {
   schedulerWidth: '100%',
-  besidesWidth: 20,
   underneathHeight: 20,
   schedulerMaxHeight: 0,
   tableHeaderHeight: 40,
@@ -89,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;

package/package.json

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