react-big-schedule 8.1.0 → 9.0.0

package/README.md

@@ -1,1155 +1,46 @@
-# React Big Schedule (react-big-schedule)
+# React Big Schedule
 
-[![NPM version][npm-image]][npm-url] [![MIT License][mit-image]][mit-url] [![CodeFactor][codeFactor-badge]][codeFactor-link]
+[![NPM version][npm-image]][npm-url] [![MIT License][mit-image]][mit-url]
 
 [npm-image]: http://img.shields.io/npm/v/react-big-schedule.svg
 [npm-url]: http://npmjs.org/package/react-big-schedule
 [mit-image]: https://img.shields.io/badge/License-MIT-green.svg
 [mit-url]: https://github.com/ansulagrawal/react-big-schedule/blob/master/LICENSE
-[codeFactor-badge]: https://www.codefactor.io/repository/github/ansulagrawal/react-big-schedule/badge
-[codeFactor-link]: https://www.codefactor.io/repository/github/ansulagrawal/react-big-schedule
 
-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.
+A free, MIT-licensed React calendar and resource scheduler: month, week, day, list and year views, a resource timeline, drag and drop, event sources, recurring events, time zones, five design styles with palettes, light and dark. TypeScript, no UI library.
 
-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.
+**Documentation, live demos and the full API: https://react-big-schedule.vercel.app**
 
-Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning.
-
-### This project code is forked from:
-
-- [react-big-scheduler](https://github.com/StephenChou1017/react-big-scheduler).
-- [react-big-scheduler-stch](https://github.com/hbatalhaStch/react-big-scheduler).
-
-## Installation
-
-To install react-big-schedule, use your preferred package manager:
+## Install
 
 ```bash
-# npm
 npm install react-big-schedule
-
-# yarn
-yarn add react-big-schedule
-
-# pnpm
-pnpm add react-big-schedule
-
-# bun
-bun add react-big-schedule
-```
-
-## Tech Stack
-
-- React
-- Ant Design
-- react-dnd
-- react-dnd-html5-backend
-- webpack
-- dayjs
-- Biome (Linting & Formatting)
-
-## Features
-
-- Modern and intuitive scheduler component for React applications.
-- Seamless integration with React projects.
-- Drag-and-drop functionality for effortless scheduling.
-- Interactive user interface for a smooth user experience
-- Granular views to manage time, appointments, and resources effectively.
-- Optimized for time management and calendar-based operations.
-- Perfect for applications requiring advanced scheduling capabilities.
-
-## Contributions
-
-Contributions to react-big-schedule are welcome! If you find a bug or want to contribute to the project, please follow these steps:
-
-1. Fork the repository on GitHub.
-2. Create a new branch with a descriptive name.
-3. Make your changes and commit them with clear messages.
-4. Push your changes to your forked repository.
-5. Submit a pull request to the master repository.
-
-Please ensure that your code adheres to the project's coding conventions and includes appropriate tests.
-
-## License
-
-React Big Schedule is released under the MIT License. See the [LICENSE](https://github.com/ansulagrawal/react-big-schedule/blob/master/LICENSE) file for more details.
-
-## Support
-
-If you have any questions or need support, please create an issue in the [GitHub repository](https://github.com/ansulagrawal/react-big-schedule/issues).
-
-## Credits
-
-React Big Schedule is developed and maintained by the React Big Schedule team. We would like to thank the open-source community for their valuable contributions and feedback.
-
-Special thanks to the following contributors:
-
-- Ansul Agrawal ([@ansulagrawal](https://github.com/ansulagrawal))
-- Jitendra Soni ([@JitendraSoni1234](https://github.com/JitendraSoni1234))
-- hbatalhaStch [[@hbatalhaStch](https://github.com/hbatalhaStch))
-- DamyanBG ([@DamyanBG](https://github.com/DamyanBG))
-
-## Acknowledgments
-
-We would like to acknowledge the following projects for their inspiration and contributions:
-
-- [react-big-scheduler](https://github.com/StephenChou1017/react-big-scheduler).
-- [react-big-scheduler-stch](https://github.com/hbatalhaStch/react-big-scheduler).
-
-## Roadmap
-
-- Additional view options for different scheduling needs.
-- Support for recurring appointments.
-- Integration with popular calendar services.
-- Improved accessibility and localization support.
-- Performance optimizations for handling large data sets.
-
-We are continuously working on enhancing react-big-schedule and welcome your feedback and suggestions for future improvements.
-
-
-## Supported versions
-
-Only **8.0.0 or later** is supported. Issues and security reports for older versions are not handled; please upgrade to the latest release first.
-
-### Upgrading to 8.0
-
-- `besidesWidth` and `SchedulerData.setBesidesWidth()` are removed. The scheduler measures its own container, so just delete the option.
-- The locale is kept per `SchedulerData` instance (`setSchedulerLocale` / `localeDayjs.locale`) and no longer changes the global dayjs. Call `dayjs.locale(...)` yourself if your app needs the global locale to change.
-- Events in the vertical resource view can now be moved and resized like in the horizontal views. Set `movable`, `startResizable` and `endResizable` to `false` in the config to keep that view read-only.
-
-## Use and Setup
-
-1.) To install react-big-schedule, use your preferred package manager:
- 
- ```bash
- # npm
- npm install react-big-schedule
- 
- # yarn
- yarn add react-big-schedule
- 
- # pnpm
- pnpm add react-big-schedule
- 
- # bun
- bun add react-big-schedule
- ```
-
-2.) Import dependencies
-
-```
-import { Scheduler, SchedulerData, ViewType, DATE_FORMAT } from "react-big-schedule";
-import dayjs from "dayjs";
-import "react-big-schedule/dist/css/style.css";
-```
-
-3.) Basic Usage
-
-```js
-const schedulerData = new SchedulerData(new dayjs().format(DATE_FORMAT), ViewType.Week);
-
-//set locale dayjs to the schedulerData, if your locale isn't English. By default, Scheduler comes with English(en, United States).
-schedulerData.setSchedulerLocale('pt-br'); // this uses dayjs, but it doesn't require dayjs to be installed as its called dynamically
-schedulerData.setCalendarPopoverLocale('pt_BR'); // this uses antd [List of supported locales](https://ant.design/docs/react/i18n#supported-languages)
-
-schedulerData.setResources([
-  { id: 'r0', name: 'Resource0', groupOnly: true },
-  { id: 'r1', name: 'Resource1' },
-  { id: 'r2', name: 'Resource2', parentId: 'r0' },
-  { id: 'r3', name: 'Resource3', parentId: 'r4' },
-  { id: 'r4', name: 'Resource4', parentId: 'r2' },
-]);
-
-// the event array should be sorted in ascending order by event.start property
-// otherwise there will be some rendering errors
-schedulerData.setEvents([
-  {
-    id: 1,
-    start: '2022-12-18 09:30:00',
-    end: '2022-12-19 23:30:00',
-    resourceId: 'r1',
-    title: 'I am finished',
-    bgColor: '#D9D9D9',
-  },
-  {
-    id: 2,
-    start: '2022-12-18 12:30:00',
-    end: '2022-12-26 23:30:00',
-    resourceId: 'r2',
-    title: 'I am not resizable',
-    resizable: false,
-  },
-  {
-    id: 3,
-    start: '2022-12-19 12:30:00',
-    end: '2022-12-20 23:30:00',
-    resourceId: 'r3',
-    title: 'I am not movable',
-    movable: false,
-  },
-  {
-    id: 4,
-    start: '2022-12-19 14:30:00',
-    end: '2022-12-20 23:30:00',
-    resourceId: 'r1',
-    title: 'I am not start-resizable',
-    startResizable: false,
-  },
-  {
-    id: 5,
-    start: '2022-12-19 15:30:00',
-    end: '2022-12-20 23:30:00',
-    resourceId: 'r2',
-    title: 'R2 has recurring tasks every week on Tuesday, Friday',
-    rrule: 'FREQ=WEEKLY;DTSTART=20221219T013000Z;BYDAY=TU,FR',
-    bgColor: '#f759ab',
-  },
-]);
-
-// ...
-
-//3. render the scheduler component, mind that the Scheduler component should be placed in a DragDropContext(father or ancestor).
-
-<Scheduler
-  schedulerData={schedulerData}
-  prevClick={this.prevClick}
-  nextClick={this.nextClick}
-  onSelectDate={this.onSelectDate}
-  onViewChange={this.onViewChange}
-  eventItemClick={this.eventClicked}
-/>;
-```
-
-### Run examples locally
-
-- Clone this repository
-- Retrieve dependencies: `npm install` (or `yarn`, `pnpm`, `bun install`)
-- Check & Fix: `npm run fix`
-- Start: `npm run dev`
-- Open [http://localhost:8080](http://localhost:8080).
-
-If you fail to execute the installation command, remove the lock file (e.g., `package-lock.json`, `bun.lockb`) and try again.
-
-# API
-
-### SchedulerData
-
-SchedulerData is the view model of Scheduler, we can modify it to control the view of the Scheduler.
-
-#### constructor
-
-```js
-constructor(date=dayjs().format(DATE_FORMAT), viewType = ViewType.Week,
-                showAgenda = false, isEventPerspective = false,
-                newConfig = undefined, newBehaviors=undefined
-                localeDayjs = undefined)
-```
-
-- `date` is a string in `YYYY-MM-DD` format, and is the initial date Scheduler will render. Take the date `2022-12-20`
-  for example, Scheduler will render the time window of the week from `2022-12-18` to `2022-12-24` in `ViewType.Week`
-  view type, and will render the time window of the `2022-12` month in `ViewType.Month` view type.
-- `viewType` is the initial view type, now Scheduler supports `Day`, `Week`, `Month`, `Quarter`, `Year` 5 built-in view types,
-  in addition Scheduler now supports `Custom`, `Custom1`, `Custom2` 3 custom view types at the same time, in which you can control
-  the time window yourself, refer to [this example](https://react-big-schedule.vercel.app/custom-time). `viewType`,
-  `showAgenda` and `isEventPerspective` are a group which should be contained in the SchedulerData.config.views array,
-  and they together decide which view should be rendered. When `showAgenda` and `isEventPerspective` are both `false`,
-  Scheduler will render the resource view, refer to [this example](https://react-big-schedule.vercel.app/basic).
-- `showAgenda` is a bool value, if true, Scheduler will display the agenda view of current view type. Agenda view is
-  read only.
-- `isEventPerspective` is a bool value, if true, Scheduler will display the task view of current view type. In
-  resource view, every slot(row) describes how many events a resource does in the time window, while in task view,
-  every slot describes how many events a big task is divided into and who will make it done. Add a `groupId` and
-  `groupName` property to every event object, so that the events having the same `groupId` will belong to the same big task and
-  be rendered in the same slot in task view. If `groupId` and `groupName` are not provided, SchedulerData will take
-  the `id` as the `groupId`, and take the `title` as the `groupName`. See the `eventsForTaskView` in the
-  [sample1.js](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/sample-data/sample1.js) for details.
-- `newConfig` is a config object, used to override the [default config](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/config/scheduler.js)
-  fully or partly.
-- `newBehaviors` is a config object, used to override the [default behaviors](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/helper/behaviors.js)
-  fully or partly.
-- `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. Drag an event to another resource column and/or time row to move it (`moveEvent` receives the resource as `slotId`), and drag its top or bottom edge to change its start or end (`updateEventStart` / `updateEventEnd`). 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).
-
-#### Drop preview
-
-While an event, task or resource is dragged over a row, the cells where it would be placed are highlighted. Configure it in the `SchedulerData` config: `dropPreviewEnabled` (default `true`), `dropPreviewClassName` and `dropPreviewStyle` (an inline style object, e.g. `{ border: '2px dashed #52c41a', background: 'rgba(82, 196, 26, 0.16)' }`). Refer to [this example](https://react-big-schedule.vercel.app/drag-and-drop).
-
-#### 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
-setSchedulerLocale(preset);
-```
-
-Used to set locale to the scheduler, it uses dayjs locales ([List of supported locales](https://github.com/iamkun/dayjs/tree/dev/src/locale)) and it is loaded on demand.
-
-`preset` will be locale imported from dayjs.
-
-#### example:
-
-```js
-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
-
-```js
-setCalendarPopoverLocale(lang);
-```
-
-Used to set locale to the calendar popover. it uses antd locales ([List of supported locales](https://ant.design/docs/react/i18n#supported-languages)). By default, it comes with English(en, United States)
-
-#### example:
-
-```js
-import * as antdLocale from 'antd/locale/pt_BR';
-
-setCalendarPopoverLocale(antdLocale);
-```
-
-refer this for the demo of the locale.
-
-#### setResources
-
-```js
-setResources(resources);
-```
-
-Used to set the resources(the slots in resource view), make sure that there are no duplicated `resource.id` in the `resources`.
-See the demo `resources` in the [sample1.js](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/sample-data/sample1.js).
-
-#### setEvents
-
-```js
-setEvents(events);
-```
-
-Used to set the events. the event array should be sorted in ascending order by event.start property.
-See the demo `events` in the [sample1.js](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/sample-data/sample1.js).
-If we use the task view, we'd better add the `groupId` and the `groupName` property to each event object, see the
-`eventsForTaskView` in the [sample1.js](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/sample-data/sample1.js) for details.
-
-## Event Date Formats
-
-Events support both `YYYY-MM-DD HH:mm:ss` datetime strings and `YYYY-MM-DD` date-only strings for `start` and `end`.
-Date-only events are treated as spanning the full calendar day. Month view and the other scheduler views handle both
-formats consistently.
-
-#### prev
-
-```js
-prev();
-```
-
-Let the time window scroll to the left once. When `SchedulerData,viewType` is `ViewType.Month`, the time window will
-scroll a month, when `SchedulerData,viewType` is `ViewType.Week`, the time window will scroll a week. `SchedulerData.events`
-will be clear after calling this method.
-
-#### next
-
-```js
-next();
-```
-
-Let the time window scroll to the right once. `SchedulerData.events` will be clear after calling this method.
-
-#### setDate
-
-```js
-setDate((date = dayjs().format(DATE_FORMAT)));
-```
-
-Let the time window jump to the provided `date` directly. `SchedulerData.events` will be clear after calling this method.
-
-#### setViewType
-
-```js
-setViewType((viewType = ViewType.Week), (showAgenda = false), (isEventPerspective = false));
-```
-
-Tell SchedulerData to change current view, the `viewType`, `showAgenda` and `isEventPerspective` group should be
-provided, and should be contained in the `SchedulerData.config.views` array. `SchedulerData.events` will be clear
-after calling this method.
-
-#### setEventGroups
-
-```js
-setEventGroups(eventGroups);
-```
-
-Used to set the event groups(the slots in task view), make sure that there are no duplicated `eventGroup.id` in the `eventGroups`.
-This method is optional, and is needed only when `SchedulerData.eventGroupsAutoGenerated` is `false`.
-
-#### setEventGroupsAutoGenerated
-
-```js
-setEventGroupsAutoGenerated(autoGenerated);
-```
-
-Tell SchedulerData to generate `SchedulerData.eventGroups` automatically or not. If `true`, SchedulerData will generate the event
-groups(slots) automatically according to the `event.groupId` and 'event.groupName' automatically. If `groupId` and 'groupName' are
-not provided, SchedulerData will take `event.id` and `event.title` instead.
-
-#### setMinuteStep
-
-```js
-setMinuteStep(minuteStep);
-```
-
-Used to set minute step for daily view and refresh the render data.
-
-#### toggleExpandStatus
-
-```js
-toggleExpandStatus(slotId);
-```
-
-Used to toggle slot's(and its children's) expand status.
-
-#### getMinuteStepsInHour
-
-```js
-getMinuteStepsInHour();
-```
-
-Used to get minute steps in an hour, it equals 60 / SchedulerData.config.minuteStep.
-
-#### addResource
-
-```js
-addResource(resource);
-```
-
-Add the `resource` to the `SchedulerData.resources`, make sure that `resource.id` is not duplicated. Refer
-to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### addEventGroup
-
-```js
-addEventGroup(eventGroup);
-```
-
-Add the `eventGroup` to the `SchedulerData.eventGroups`, make sure that `eventGroup.id` is not duplicated. Please note
-that the `eventGroup` added may be override when `SchedulerData.eventGroupsAutoGenerated` is `true` and
-`SchedulerData.eventGroups` is auto-generated.
-
-#### addEvent
-
-```js
-addEvent(newEvent);
-```
-
-Add the `newEvent` to the `SchedulerData.events`, make sure that `newEvent.id` is not duplicated. SchedulerData will
-place the `newEvent` in the right index according to the `newEvent.start` property.
-
-#### updateEventStart
-
-```js
-updateEventStart(event, newStart);
-```
-
-Update the `newStart` to the `event.start`, `newStart` is a string in `YYYY-MM-DD HH:mm:ss` format(similarly hereinafter).
-SchedulerData will replace the `event` in the right index according to the `newStart` value.
-
-#### updateEventEnd
-
-```js
-updateEventEnd(event, newEnd);
-```
-
-Update the `newEnd` to the `event.end`.
-
-#### moveEvent
-
-```js
-moveEvent(event, newSlotId, newSlotName, newStart, newEnd);
-```
-
-Update the `newSlotId`, `newSlotName`, `newStart`, `newEnd` of the `event`. In resource view, new slot is a resource,
-while in task view, new slot is a event group. SchedulerData will replace the `event` in the right index according
-to the `newStart` value.
-
-#### removeEvent
-
-```js
-removeEvent(event);
-```
-
-Remove the given event from `SchedeulerData.events`.
-
-#### removeEventById
-
-```js
-removeEventById(eventId);
-```
-
-Remove event from `SchedeulerData.events` by the given event id.
-
-#### getSlots
-
-```js
-getSlots();
-```
-
-Returns the slot array, `SchedulerData.resources` in resource view, `SchedulerData.eventGroups` in task view.
-
-#### getSlotById
-
-```js
-getSlotById(slotId);
-```
-
-Returns the slot by `slotId`, returns `undefined` if not found.
-
-#### getResourceById
-
-```js
-getResourceById(resourceId);
-```
-
-#### isEventInTimeWindow
-
-```js
-isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd);
-```
-
-Returns whether an event is in the time window or not, remind that `eventStart`, `eventEnd`, `windowStart`, `windowEnd`
-are all dayjs | Date objects.
-
-#### getViewDates
-
-```js
-getViewDates();
-```
-
-Returns an object with the startDate and endDate of the currently selected view ({ startDate: Dayjs, endDate: Dayjs }).
-
-#### getViewStartDate
-
-```js
-getViewStartDate();
-```
-
-Returns a dayjs object with the startDate of the currently selected view.
-
-#### getViewEndDate
-
-```js
-getViewEndDate();
-```
-
-Returns a dayjs object with the endDate of the currently selected view.
-
-### Locale support(Refer to [this example](https://react-big-schedule.vercel.app/custom-time) for details.)
-
-#### SchedulerData.config.resourceName
-
-The locale string of resource name.
-
-#### SchedulerData.config.taskName
-
-The locale string of task name.
-
-#### SchedulerData.config.agendaViewHeader
-
-The locale string of agenda view header.
-
-#### SchedulerData.config.addMorePopoverHeaderFormat
-
-The locale string of add more popover header format.
-
-#### SchedulerData.config.eventItemPopoverDateFormat
-
-The locale string of event item popover date format.
-
-#### SchedulerData.config.nonAgendaDayCellHeaderFormat
-
-The locale string of non-agenda view cell header format of day view type.
-
-#### SchedulerData.config.nonAgendaOtherCellHeaderFormat
-
-The locale string of non-agenda view cell header format of other view types.
-
-#### SchedulerData.behaviors.getDateLabelFunc
-
-Used to resolve the locale string of date label of Scheduler component.(Refer to the [getDateLabel](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/helper/behaviors.js) func for example)
-
-### SchedulerData.config(See the [config file](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/config/scheduler.js) for details.)
-
-#### schedulerWidth
-
-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`).
-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
-`<Scheduler className="w-1/2 max-h-[600px]" ... />`. Those win over the defaults, which have zero CSS specificity.
-When the parent has a fixed height the Scheduler scrolls inside it, otherwise it grows to fit its rows.
-
-#### responsiveByParent
-
-Only needed to make the Scheduler's *height* follow a parent element: pass that element through the `parentRef` prop of the
-Scheduler component. Without `parentRef` the window height is used.
-
-#### schedulerMaxHeight
-
-The max height of Scheduler. If the desired height is bigger than the max height, the header row of Scheduler will be
-frozen and vertical scroll bar will appear, but this won't happen when the max height is set to `0`. Refer
-to [this example](https://react-big-schedule.vercel.app/customization).
-
-**If you are using `responsiveByParent`, you can omit this setting or set it to `0` to ensure the Scheduler height conforms to the parent container.**
-When conforming to the parent container, the Scheduler will fill the available space and scroll bars will appear as needed.
-
-#### underneathHeight
-
-When using `responsiveByParent`, this property allows you to reserve space beneath the Scheduler (for example, for a footer or other fixed elements). The Scheduler's height will be reduced by this amount, ensuring it does not overlap with content below. Set this to the pixel height you want to reserve at the bottom of the parent container.
-
-**Example:** If your parent container is 600px tall and `underneathHeight` is 50, the Scheduler will use up to 550px of height.
-
-#### tableHeaderHeight
-
-Height of Scheduler table header.
-
-#### agendaResourceTableWidth
-
-Width of the left Scheduler resource column in agenda view.
-
-#### agendaMaxEventWidth
-
-Max width of an event item in agenda view.
-
-#### dayResourceTableWidth, weekResourceTableWidth, monthResourceTableWidth, yearResourceTableWidth, quarterResourceTableWidth
-
-Width of the left Scheduler resource column in resource view and task view of different view types.
-
-#### dayCellWidth, weekCellWidth, monthCellWidth, yearCellWidth, quarterCellWidth
-
-Width of Scheduler table cells in resource view and task view of different view types.
-
-#### dayMaxEvents, weekMaxEvents, monthMaxEvents, yearMaxEvents, quarterMaxEvents
-
-Max events count of a cell in resource view and task view of different view types. A '+N more' will appear when exceeded.
-Refer to [this example](https://react-big-schedule.vercel.app/add-more).
-
-#### eventItemHeight
-
-Height of an event item in 3 views.
-
-#### eventItemLineHeight
-
-Line height of an event item in 3 views.
-
-#### nonAgendaSlotMinHeight
-
-Min height of a slot in non-agenda views, default 0, means there is no min height.
-
-#### dayStartFrom
-
-Start hour rendered from in `ViewType.Day` in resource view and task view, default 0.
-
-#### dayStopTo
-
-End hour rendered to in `ViewType.Day` in resource view and task view, default 23.
-
-#### defaultEventBgColor
-
-Default event item background color in 3 views, will be override if there is a `bgColor` property in event object.
-
-#### selectedAreaColor
-
-Selected cells color in resource view and task view, cells are selectable only when `creatable` is `true`.
-
-#### nonWorkingTimeHeadColor
-
-Color of non-working time head cells. Modify `SchedulerData.behaviors.isNonWorkingTimeFunc` to re-define non-working time.
-Refer the `isNonWorkingTime` func in the [behaviors.js](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/helper/behaviors.js).
-
-#### nonWorkingTimeHeadBgColor
-
-Background color of non-working time head cells.
-
-#### nonWorkingTimeBodyBgColor
-
-Background color of non-working time body cells.
-
-#### summaryColor
-
-Color of cell summary. Modify `SchedulerData.behaviors.getSummaryFunc` to display summary in a cell.
-Refer the `getSummary` func in the [behaviors.js](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/helper/behaviors.js).
-
-#### summaryPos
-
-Position of cell summary, supports `SummaryPos.Top`, `SummaryPos.TopRight`, `SummaryPos.TopLeft`, `SummaryPos.Bottom`,
-`SummaryPos.BottomRight` and `SummaryPos.BottomLeft`.
-
-#### startResizable
-
-Controls whether to resize the start of every event item in resource view and task view. If `false`, all item starts are
-non-resizable, if `true`, all item starts are resizable except those who have a `resizable` or `startResizable`
-property and its value is `false`.
-
-#### endResizable
-
-Controls whether to resize the end of every event item in resource view and task view. If `false`, all item ends are
-non-resizable, if `true`, all item ends are resizable except those who have a `resizable` or `endResizable`
-property and its value is `false`.
-
-#### movable
-
-Controls whether to move every event item in resource view and task view. If `false`, all items are
-non-movable, if `true`, all items are movable except those who have a `movable` property and its value is `false`.
-
-#### creatable
-
-Controls whether to create new event item in resource view and task view.
-
-#### crossResourceMove
-
-Controls whether to cross-slot move an event item in resource view and task view. If `false`, the `slotId` and `slotName`
-won't change in the `moveEvent` method. Refer to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### checkConflict
-
-Controls whether to check conflicts when creating, resizing or moving an event item in resource view and task view. If
-`true`, Scheduler will call the `conflictOccurred` function if given. Refer to
-[this example](https://react-big-schedule.vercel.app/customization).
-
-#### scrollToSpecialDayjsEnabled
-
-Controls Scheduler whether to scroll to special dayjs automatically when the time window contains special dayjs. If `true`, Scheduler
-horizontal bar will scroll to special dayjs after calling `setScrollToSpecialDayjs(true)` to SchedulerData. Use `SchedulerData.behaviors.getScrollSpecialDayjsFunc`
-to tell Scheduler what time the special dayjs is.
-
-#### eventItemPopoverEnabled
-
-Controls Scheduler whether to display event item popover when moving mouse on an event item, default `true`.
-
-#### eventItemPopoverTrigger
-
-Controls Scheduler event item popover trigger, default `hover`.
-Controls Scheduler whether to display event item popover when moving mouse on an event item, default `true`.
-
-#### eventItemPopoverPlacement
-
-Controls Scheduler event item popover placement (`'topLeftMousePosition' | 'bottomLeftMousePosition' | 'topRightMousePosition' | 'bottomRightMousePosition' | 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'`), default `bottomLeft`.
-
-#### eventItemPopoverWidth
-
-Controls Scheduler event item popover width. Should be taken into account when you set `eventItemPopoverPlacement` to one of the `...MousePosition` options and you set your own event item popover by setting `eventItemPopoverTemplateResolver` as `eventItemPopoverWidth` is used to determine when the event item popover content goes off the screen so the popover can be adjusted accordingly. Defaults to 300.
-
-#### calendarPopoverEnabled
-
-Controls Scheduler whether to display calendar popover when clicking on a date label in header, default `true`.
-
-#### recurringEventsEnabled
-
-Controls Scheduler whether to support recurring event, refer to [this feature request](https://github.com/StephenChou1017/react-big-scheduler/issues/8), default `true`.
-If `true`, SchedulerData will filter out those template events who has a `rrule` string property in `setEvents` method,
-generate the recurring events in the time window, and insert them into the event array in the right orders. The recurring events
-generated from the same template event, all have a new id like `${templateEvent.id}-${number}`, and have a `recurringEventId`
-property with the value `templateEvent.id`.
-
-#### headerEnabled
-
-Controls Scheduler whether to display header, default `true`.
-
-#### resourceViewEnabled
-
-Controls Scheduler whether to display resource view, default `true`.
-
-#### displayWeekend
-
-Controls Scheduler whether to display weekends in non-agenda view, default `true`.
-
-#### relativeMove
-
-Controls Scheduler whether to move events(only DnDTypes.EVENT type) relatively or absolutely, default `true`, means relatively.
-
-#### minuteStep
-
-Minute step for day view type in non-agenda view, can be 10, 12, 15, 20, 30, 60, etc, default 30.
-
-#### views
-
-Array of view that Scheduler will support.
-
-#### dragAndDropEnabled
-
-Controls whether the dragAndDrop funcionality is enabled. If false there's no need for the [withDnDContext wrapper function](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/components/WrapperFun.jsx).
-
-### SchedulerData.behaviors(See the [behaviors.js](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/helper/behaviors.js) for details.)
-
-#### getEventTextFunc
-
-```js
-getEventTextFunc(schedulerData, event);
-```
-
-Method that defines the text displayed in the `event`.
-
-#### isNonWorkingTimeFunc
-
-```js
-isNonWorkingTimeFunc(schedulerData, time);
-```
-
-Method that defines non-working time.
-
-#### getSummaryFunc
-
-```js
-getSummary(schedulerData, headerEvents, slotId, slotName, headerStart, headerEnd);
-```
-
-Method that defines the summary text displayed in the Scheduler cells.Refer
-to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### getCustomDateFunc
-
-```js
-getCustomDate(schedulerData, num, (date = undefined));
-```
-
-Method that controls the start and end of time window when current view type is Custom, Custom1 or Custom2.Refer
-to [this example](https://react-big-schedule.vercel.app/custom-time).
-
-#### getNonAgendaViewBodyCellBgColorFunc
-
-```js
-getNonAgendaViewBodyCellBgColor(schedulerData, slotId, header);
-```
-
-Method that sets the background color of cells dynamically.
-
-#### getScrollSpecialDayjsFunc
-
-```js
-getScrollSpecialDayjs(schedulerData, startDayjs, endDayjs);
-```
-
-Method that defines the special dayjs Scheduler will scroll to automatically, when the time window contains that dayjs.
-
-### Scheduler.propTypes
-
-#### schedulerData
-
-```js
-schedulerData: PropTypes.object.isRequired;
-```
-
-View model of the Scheduler component, provides data.
-
-#### parentRef
-
-```js
-parentRef: PropTypes.object;
-```
-
-ref of the component that is the parent of the Scheduler component
-
-#### className
-
-```js
-className: PropTypes.string;
-```
-
-Class names for the Scheduler's container (e.g. tailwind classes such as `w-1/2 max-h-[600px]`). They override the default
-`width: 100%` / `max-height: 100%`.
-
-#### style
-
-```js
-style: PropTypes.object;
-```
-
-Inline style for the Scheduler's container.
-
-#### prevClick
-
-```js
-prevClick: PropTypes.func.isRequired;
-prevClick(schedulerData);
+# or: yarn add / pnpm add / bun add
 ```
 
-Callback function fired when the left point bracket '<' is clicked.
+React 18 or 19 is a peer dependency. The package is ESM only and ships its own types.
 
-#### nextClick
-
-```js
-nextClick: PropTypes.func.isRequired;
-nextClick(schedulerData);
-```
+## Quick start
 
-Callback function fired when the right point bracket '>' is clicked.
+```tsx
+import { Calendar } from 'react-big-schedule';
+import 'react-big-schedule/dist/css/style.css';
 
-#### onViewChange
+const events = [{ id: 1, title: 'Standup', start: '2026-10-12T09:00', end: '2026-10-12T09:30' }];
 
-```js
-onViewChange: PropTypes.func.isRequired;
-onViewChange(schedulerData, view);
+export default () => <Calendar events={events} theme="dark" look="material" palette="purple" editable selectable />;
 ```
 
-Callback function fired when the Scheduler view changed. `view` is a json such as { viewType: ViewType.Month,
-showAgenda: true, isEventPerspective: false}.
+For the resource timeline use `Scheduler` with `SchedulerData`; see the website for a complete example.
 
-#### onSelectDate
+## Upgrading
 
-```js
-onSelectDate: PropTypes.func.isRequired;
-onSelectDate(schedulerData, date);
-```
-
-Callback function fired when a new date is selected. `date` is the new selected data, a string in `YYYY-MM-DD` format.
+Only 9.0.0 or later is supported; earlier versions are deprecated on npm. antd is no longer a dependency, the package is ESM only and React is a peer dependency. See the [upgrade guide](https://react-big-schedule.vercel.app/#/docs) and the [release notes](.github/release-notes/v9.0.0.md).
 
-#### eventItemClick
+## Contributing
 
-```js
-eventItemClick: PropTypes.func;
-eventItemClick(schedulerData, event);
-```
+Fork, branch, `bun install`, `bun run check`, open a pull request against `master`. See [CONTRIBUTING.md](CONTRIBUTING.md). Questions and bugs: [GitHub issues](https://github.com/ansulagrawal/react-big-schedule/issues).
 
-Callback function fired when you click an event item.
-
-#### updateEventStart
-
-```js
-updateEventStart: PropTypes.func;
-updateEventStart(schedulerData, event, newStart);
-```
-
-Callback function fired when resizing the start of the `event`, `newStart` is a string in `YYYY-MM-DD HH:mm:ss` format.
-
-#### updateEventEnd
-
-```js
-updateEventEnd: PropTypes.func;
-updateEventEnd(schedulerData, event, newEnd);
-```
-
-Callback function fired when resizing the end of the `event`, `newEnd` is a string in `YYYY-MM-DD HH:mm:ss` format.
-
-#### moveEvent
-
-```js
-moveEvent: PropTypes.func;
-moveEvent((schedulerData, event, slotId, slotName, newStart, newEnd));
-```
-
-Callback function fired when moving the `event`. `slotId`, `slotName` are the new `id` and `name` of the slot moving into,
-but they won't change if the `SchedulerData.config.crossResourceMove` is `false`. `newStart`, `newEnd` are the new beginning
-and ending of the `event`.
-
-#### newEvent
-
-```js
-newEvent: PropTypes.func;
-newEvent(schedulerData, slotId, slotName, start, end, type, item);
-```
-
-Callback function fired when creating a new event, or dragging an external item and dropping it into the resource view or task
-view. `slotId` and `slotName` are the slot creating in or dropping into, `start`, `end` are the beginning and ending of the
-event. If it's a drag&drop operation, the `type` is the DnDType of DnDSource registered to Scheduler, and the `item` is the
-external item.
-
-#### leftCustomHeader, rightCustomHeader
-
-```js
-leftCustomHeader: PropTypes.object;
-rightCustomHeader: PropTypes.object;
-```
-
-Component you need to put in the Scheduler header, it could be a div or a react component. Refer
-to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### conflictOccurred
-
-```js
-conflictOccurred: PropTypes.func;
-conflictOccurred(schedulerData, action, event, type, slotId, slotName, start, end);
-```
-
-Callback function fired when there is a conflict. This could happen when creating, resizing or moving an event, and when  
- `SchedulerData.config.checkConflict` is `true`.
-
-#### eventItemTemplateResolver
-
-```js
-eventItemTemplateResolver: PropTypes.func;
-eventItemTemplateResolver(schedulerData, event, bgColor, isStart, isEnd, mustAddCssClass, mustBeHeight, agendaMaxEventWidth);
-```
-
-Use this function, you can customize the event style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
-
-### eventItemPopoverTemplateResolver
-
-```js
-eventItemPopoverTemplateResolver: PropTypes.func;
-eventItemPopoverTemplateResolver(schedulerData, eventItem, title, start, end, statusColor);
-```
-
-Use this function, you can customize the event's popover style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### slotItemTemplateResolver
-
-```js
-slotItemTemplateResolver: PropTypes.func;
-slotItemTemplateResolver(schedulerData, slot, slotClickedFunc, width, clsName);
-```
-
-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
-
-```js
-nonAgendaCellHeaderTemplateResolver: PropTypes.func;
-nonAgendaCellHeaderTemplateResolver(schedulerData, item, formattedDateItems, style);
-```
-
-Use this function, you can customize the table header cell style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### onScrollLeft, onScrollRight
-
-```js
-onScrollLeft: PropTypes.func;
-onScrollLeft(schedulerData, schedulerContent, maxScrollLeft);
-onScrollRight: PropTypes.func;
-onScrollRight(schedulerData, schedulerContent, maxScrollLeft);
-```
-
-Callback function fired when the scheduler content div scrolls to leftmost or rightmost. Refer to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### onScrollTop, onScrollBottom
-
-```js
-onScrollTop: PropTypes.func;
-onScrollTop(schedulerData, schedulerContent, maxScrollTop);
-onScrollBottom: PropTypes.func;
-onScrollBottom(schedulerData, schedulerContent, maxScrollTop);
-```
-
-Callback function fired when the scheduler content div scrolls to topmost or bottommost. Refer to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### slotClickedFunc
-
-```js
-slotClickedFunc: PropTypes.func;
-```
-
-If it's set, slots will be clickable, and will fire this function when a slot is clicked. Refer
-to [this example](https://react-big-schedule.vercel.app/customization).
-
-#### dndSources
-
-```js
-dndSources: PropTypes.array;
-```
-
-DnDSource array that registered to Scheduler. Use [DnDSource](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/components/DnDSource.js),
-we can simplify the drag and drop coding in React-Big-Scheduler. Refer
-to [this example](https://react-big-schedule.vercel.app/drag-and-drop).
-
-#### onSetAddMoreState
-
-```js
-onSetAddMoreState: PropTypes.func;
-onSetAddMoreState(newState);
-```
-
-Callback function fired when a '+N more' is clicked, is used to control the visibility and the position of the `AddMorePopover`.
-`newState` is a json such as {headerItem: headerItem, left: 20, top: 20, height: 100}. Refer
-to [this example](https://react-big-schedule.vercel.app/add-more).
-
-#### subtitleGetter
-
-```js
-subtitleGetter: PropTypes.func;
-subtitleGetter(schedulerData, event);
-```
-
-Use this function, you can display a subtitle in the `EventItemPopover`.
-
-#### viewEventClick
-
-```js
-viewEventClick: PropTypes.func;
-viewEventClick(schedulerData, event);
-```
-
-Callback function fired when you click one operation link in the `EventItemPopover`. The operation link won't appear if this
-function isn't set.
-
-#### viewEventText
-
-```js
-viewEventText: PropTypes.string;
-```
-
-Text of one operation link in the `EventItemPopover`. The operation link won't appear if this text isn't set.
-
-#### viewEvent2Click
-
-```js
-viewEvent2Click: PropTypes.func;
-viewEvent2Click(schedulerData, event);
-```
-
-Callback function fired when you click the other operation link in the `EventItemPopover`. The other operation link won't
-appear if this function isn't set.
-
-#### viewEvent2Text
-
-```js
-viewEvent2Text: PropTypes.string;
-```
+## License and credits
 
-Text of the other operation link in the `EventItemPopover`. The other operation link won't appear if this text isn't set.
+[MIT](LICENSE). Forked from [react-big-scheduler](https://github.com/StephenChou1017/react-big-scheduler) and [react-big-scheduler-stch](https://github.com/hbatalhaStch/react-big-scheduler); thanks to all [contributors](https://github.com/ansulagrawal/react-big-schedule/graphs/contributors).