react-big-schedule 8.1.0 → 9.0.1

package/dist/types.d.ts

@@ -0,0 +1,267 @@
+import type dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
+import type { CSSProperties, ReactNode } from 'react';
+import type SchedulerData from './components/SchedulerData';
+import type { CellUnit, SummaryPos, ViewType } from './config/default';
+export type Id = string | number;
+export interface SchedulerEvent {
+    id: Id;
+    title: string;
+    start: string;
+    end: string;
+    resourceId: Id;
+    bgColor?: string;
+    rrule?: string;
+    movable?: boolean;
+    resizable?: boolean;
+    startResizable?: boolean;
+    endResizable?: boolean;
+    showPopover?: boolean;
+    clickable1?: boolean;
+    clickable2?: boolean;
+    groupId?: Id;
+    groupName?: string;
+    /** Multi-resource event: shown on every listed resource row. */
+    resourceIds?: Id[];
+    exdates?: (string | Date)[];
+    exrule?: string;
+    recurringEventId?: Id;
+    recurringEventStart?: string;
+    recurringEventEnd?: string;
+    [extra: string]: unknown;
+}
+export interface Resource {
+    id: Id;
+    name: string;
+    title?: string;
+    parentId?: Id;
+    groupOnly?: boolean;
+    expanded?: boolean;
+    hidden?: boolean;
+    [extra: string]: unknown;
+}
+export interface ViewConfig {
+    viewName: string;
+    viewType: ViewType;
+    showAgenda: boolean;
+    isEventPerspective: boolean;
+}
+export type Size = number | string;
+export interface SchedulerConfig {
+    schedulerWidth: Size;
+    underneathHeight: number;
+    schedulerMaxHeight: number;
+    tableHeaderHeight: number;
+    schedulerContentHeight: Size;
+    responsiveByParent: boolean;
+    agendaResourceTableWidth: Size;
+    agendaMaxEventWidth: number;
+    dayResourceTableWidth: Size;
+    weekResourceTableWidth: Size;
+    monthResourceTableWidth: Size;
+    quarterResourceTableWidth: Size;
+    yearResourceTableWidth: Size;
+    customResourceTableWidth: Size;
+    dayCellWidth: Size;
+    weekCellWidth: Size;
+    monthCellWidth: Size;
+    quarterCellWidth: Size;
+    yearCellWidth: Size;
+    customCellWidth: Size;
+    dayMaxEvents: number;
+    weekMaxEvents: number;
+    monthMaxEvents: number;
+    quarterMaxEvents: number;
+    yearMaxEvents: number;
+    customMaxEvents: number;
+    eventItemPopoverTrigger: 'hover' | 'click';
+    /** top|bottom + Left|Right, optionally suffixed with MousePosition. */
+    eventItemPopoverPlacement: string;
+    eventItemPopoverWidth: number;
+    eventItemHeight: number;
+    eventItemLineHeight: number;
+    nonAgendaSlotMinHeight: number;
+    dayStartFrom: number;
+    dayStopTo: number;
+    defaultEventBgColor: string;
+    selectedAreaColor: string;
+    nonWorkingTimeHeadColor: string;
+    nonWorkingTimeHeadBgColor: string;
+    nonWorkingTimeBodyBgColor: string;
+    summaryColor: string;
+    summaryPos: SummaryPos;
+    groupOnlySlotColor: string;
+    headerBorderColor: string;
+    selectedSlotBorderColor?: string;
+    selectedSlotShadowColor?: string;
+    selectedSlotColor?: string;
+    schedulerHeight?: Size;
+    weekNumberRowHeight: number;
+    showWeekNumber: boolean;
+    showMonthRow: boolean;
+    monthRowHeight: number;
+    dropPreviewEnabled: boolean;
+    dropPreviewClassName: string;
+    dropPreviewStyle?: CSSProperties;
+    /** Colour scheme: built-in 'default' (transparent, follows the page) | 'light' | 'dark', or any custom data-rbs-theme value. */
+    theme?: string;
+    /** Design language: 'material' | 'fluent' | 'tailwind' | 'minimal' | 'classic' (see css/style.css). Unset keeps the default look. */
+    look?: string;
+    /** Colour palette: blue, green, purple, red, amber, emerald, indigo or rose. */
+    palette?: string;
+    startResizable: boolean;
+    endResizable: boolean;
+    movable: boolean;
+    creatable: boolean;
+    crossResourceMove: boolean;
+    checkConflict: boolean;
+    scrollToSpecialDayjsEnabled: boolean;
+    eventItemPopoverEnabled: boolean;
+    eventItemPopoverShowColor: boolean;
+    calendarPopoverEnabled: boolean;
+    recurringEventsEnabled: boolean;
+    viewChangeSpinEnabled: boolean;
+    dateChangeSpinEnabled: boolean;
+    headerEnabled: boolean;
+    resourceViewEnabled: boolean;
+    displayWeekend: boolean;
+    relativeMove: boolean;
+    defaultExpanded: boolean;
+    dragAndDropEnabled: boolean;
+    schedulerHeaderEventsFuncsTimeoutMs: number;
+    resourceName: string;
+    taskName: string;
+    agendaViewHeader: string;
+    weekNumberLabel: string;
+    addMorePopoverHeaderFormat: string;
+    eventItemPopoverDateFormat: string;
+    nonAgendaDayCellHeaderFormat: string;
+    nonAgendaWeekCellHeaderFormat: string;
+    nonAgendaMonthCellHeaderFormat: string;
+    nonAgendaYearCellHeaderFormat: string;
+    nonAgendaQuarterCellHeaderFormat: string;
+    nonAgendaOtherCellHeaderFormat: string;
+    minuteStep: number;
+    views: ViewConfig[];
+    [extra: string]: unknown;
+}
+export interface SummaryResult {
+    text: ReactNode;
+    color: string;
+    fontSize: string;
+}
+export interface CustomDate {
+    startDate: DateInput;
+    endDate: DateInput;
+    cellUnit: CellUnit;
+}
+export interface HeaderCell {
+    time: string;
+    nonWorkingTime?: boolean;
+    [extra: string]: unknown;
+}
+export interface HeaderEvent {
+    render: boolean;
+    span: number;
+    eventItem: SchedulerEvent;
+    [extra: string]: unknown;
+}
+/** One timeline cell of a slot row (events falling in that cell). */
+export interface HeaderItem {
+    time: string;
+    start: string;
+    end: string;
+    nonWorkingTime?: boolean;
+    id: Id;
+    style: CSSProperties;
+    count: number;
+    addMore: number;
+    addMoreIndex: number;
+    summary?: SummaryResult;
+    events: (HeaderEvent | undefined)[];
+    [extra: string]: unknown;
+}
+/** One rendered slot row (resource or event group). */
+export interface RenderItem {
+    slotId: Id;
+    slotName: string;
+    slotTitle?: string;
+    parentId?: Id;
+    groupOnly?: boolean;
+    hasSummary: boolean;
+    rowMaxCount: number;
+    rowHeight: number;
+    headerItems: HeaderItem[];
+    indent: number;
+    hasChildren: boolean;
+    expanded: boolean;
+    render: boolean;
+    nonWorkingTime?: boolean;
+    [extra: string]: unknown;
+}
+/** Props shared by the event popover and the components that forward them to it. */
+export interface EventPopoverCallbacks {
+    subtitleGetter?: (schedulerData: SchedulerData, eventItem: SchedulerEvent) => ReactNode;
+    eventItemClick?: (schedulerData: SchedulerData, eventItem: SchedulerEvent) => void;
+    viewEventClick?: (schedulerData: SchedulerData, eventItem: SchedulerEvent) => void;
+    viewEventText?: string;
+    viewEvent2Click?: (schedulerData: SchedulerData, eventItem: SchedulerEvent) => void;
+    viewEvent2Text?: string;
+    eventItemTemplateResolver?: (schedulerData: SchedulerData, eventItem: SchedulerEvent, bgColor: string, isStart: boolean, isEnd: boolean, mustAddCssClass: string, mustBeHeight: number, agendaMaxEventWidth?: number) => ReactNode;
+    eventItemPopoverTemplateResolver?: (schedulerData: SchedulerData, eventItem: SchedulerEvent, title: string, start: Dayjs, end: Dayjs, statusColor: string) => ReactNode;
+}
+export type SlotClickedFunc = (schedulerData: SchedulerData, slot: RenderItem) => void;
+export type SlotItemTemplateResolver = (schedulerData: SchedulerData, slot: RenderItem, slotClickedFunc: SlotClickedFunc | undefined, width: number, className: string) => ReactNode;
+/** Payload passed to conflictOccurred when a brand-new event (drag-select) conflicts. */
+export interface NewEventDraft {
+    id: undefined;
+    start: string;
+    end: string;
+    resourceId: Id;
+    resourceIds: Id[];
+    slotId: Id;
+    slotName: string;
+    title: undefined;
+}
+/** Anything dayjs (and so localeDayjs) accepts as a date. */
+export type DateInput = string | number | Date | Dayjs;
+/** A dayjs locale name or locale object. */
+export type LocalePreset = NonNullable<Parameters<typeof dayjs.locale>[0]>;
+/** Per-instance dayjs factory (locale applied per created date, see SchedulerData). */
+export interface LocaleDayjs {
+    (date?: DateInput, format?: string, strict?: boolean): Dayjs;
+    locale(): string;
+    locale(preset: LocalePreset): LocaleDayjs;
+    utc: (date?: DateInput) => Dayjs;
+    /** Interpret a wall-clock string in an IANA zone (or convert a Date / timestamp / Dayjs into it). */
+    tz: (date: DateInput, zone: string) => Dayjs;
+}
+/** Event group used by the event-perspective views. */
+export interface EventGroup {
+    id: Id;
+    name: string;
+    title?: string;
+    parentId?: Id;
+    groupOnly?: boolean;
+    state?: SchedulerEvent;
+    [extra: string]: unknown;
+}
+export type Slot = Resource | EventGroup;
+/** A column header of the timeline (or a resource in the vertical resource view). */
+export interface Header {
+    time: string;
+    name?: string;
+    nonWorkingTime?: boolean;
+    style?: CSSProperties;
+    id?: Id;
+    [extra: string]: unknown;
+}
+export interface Behaviors {
+    getSummaryFunc?: (schedulerData: SchedulerData, headerEvents: SchedulerEvent[], slotId: Id, slotName: string, headerStart: string, headerEnd: string) => SummaryResult;
+    getCustomDateFunc?: (schedulerData: SchedulerData, num: number, date?: DateInput) => CustomDate;
+    getNonAgendaViewBodyCellBgColorFunc?: (schedulerData: SchedulerData, slotId: Id, header: HeaderCell) => string | undefined;
+    getScrollSpecialDayjsFunc: (schedulerData: SchedulerData, start?: Dayjs, end?: Dayjs) => Dayjs;
+    getDateLabelFunc: (schedulerData: SchedulerData, viewType: ViewType, startDate: DateInput, endDate: DateInput) => string;
+    getEventTextFunc: (schedulerData: SchedulerData, event: SchedulerEvent) => string;
+    isNonWorkingTimeFunc: (schedulerData: SchedulerData, time: string) => boolean;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "8.1.0",
+  "version": "9.0.1",
   "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",
@@ -13,7 +13,6 @@
     "react",
     "react-big-schedulers",
     "react-component",
-    "antd",
     "resource planning",
     "scheduler",
     "Resource planning",
@@ -29,8 +28,7 @@
     "Modern browser compatibility",
     "React-based solution",
     "Granular views",
-    "Productivity enhancement",
-    "antd"
+    "Productivity enhancement"
   ],
   "license": "MIT",
   "author": "Ansul Agrawal (https://github.com/ansulagrawal)",
@@ -40,7 +38,7 @@
     "LICENSE"
   ],
   "main": "dist/index.js",
-  "homepage": "https://react-big-schedule.vercel.app",
+  "homepage": "https://react-big-schedule.ansulagrawal.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/ansulagrawal/react-big-schedule"
@@ -53,39 +51,44 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "webpack serve --open",
-    "build": "webpack --mode production",
-    "build:lib": "node scripts/build.js",
+    "build:lib": "node scripts/build.cjs",
     "clean": "npx rimraf dist",
     "check": "biome check .",
-    "fix": "biome check --write ."
+    "fix": "biome check --write .",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@ant-design/icons": "^6.3.4",
-    "antd": "^6.6.5",
     "dayjs": "^1.11.23",
-    "prop-types": "^15.8.1",
-    "react": "^19.3.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^19.3.0",
-    "react-router-dom": "^7.18.4",
     "rrule": "^2.8.1"
   },
   "devDependencies": {
-    "@babel/cli": "^8.0.6",
-    "@babel/core": "^8.0.7",
-    "@babel/preset-env": "^8.0.7",
-    "@babel/preset-react": "^8.0.1",
     "@biomejs/biome": "^2.5.15",
-    "babel-loader": "^10.1.1",
-    "copy-webpack-plugin": "^14.0.0",
-    "css-loader": "^7.1.5",
+    "@tailwindcss/cli": "^4.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "fs-extra": "^11.4.1",
-    "html-webpack-plugin": "^5.6.8",
-    "style-loader": "^4.0.0",
-    "webpack": "^5.111.1",
-    "webpack-cli": "^7.2.3",
-    "webpack-dev-server": "^6.0.0"
+    "react": "latest",
+    "react-dom": "latest",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/css/style.css": "./dist/css/style.css",
+    "./css": "./dist/css/style.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   }
 }