@daypilot/daypilot-lite-react 3.34.0 → 4.0.0

package/README.md

@@ -1,10 +1,9 @@
 # DayPilot Lite for React
 
 [DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 scheduling components that can display calendar/scheduler UI:
-* day
-* week
-* month
+* day, week, month
 * resource calendar (resources as columns)
+* horizontal timeline (resources as rows)
 * custom number of days as columns
 
 This is the DayPilot Lite for React package.
@@ -19,13 +18,16 @@ Customize the scheduling components using an online [UI Builder](https://builder
 
 ## Online Demo
 
-[![JavaScript Event Calendar Demo](https://static.daypilot.org/npm/202207/javascript-html5-event-calendar-scheduler-drag-drop.png)](https://javascript.daypilot.org/demo/lite/)
+[![JavaScript Scheduler Demo](https://static.daypilot.org/npm/202505/react-scheduler-with-horizontal-timeline-open-source.png)](https://javascript.daypilot.org/demo/lite/scheduler/)
+
+[![JavaScript Event Calendar Demo](https://static.daypilot.org/npm/202207/javascript-html5-event-calendar-scheduler-drag-drop.png)](https://javascript.daypilot.org/demo/lite/calendar/)
 
 [Online Demo](https://javascript.daypilot.org/demo/lite/)
 
 ## Features
 
 * Calendar/scheduler views: day, week, work week, month, resource calendar
+* Horizontal timeline view
 * Event creation using drag and drop
 * Drag and drop event moving and resizing
 * Integrated delete icon

package/daypilot-react.min.d.ts

@@ -23,6 +23,476 @@ type GlobalDate = Date;
 
 export module DayPilot {
 
+    export class SchedulerPropsAndEvents {
+        backendUrl?: string;
+        businessBeginsHour?: number;
+        businessEndsHour?: number;
+        businessWeekends?: boolean;
+        cellDuration?: number;
+        cellGroupBy?: GroupBy;
+        cellSweeping?: boolean;
+        cellSweepingCacheSize?: number;
+        cellWidth?: number;
+        cellsMarkBusiness?: boolean;
+        contextMenu?: DayPilot.Menu;
+        days?: number;
+        durationBarHeight?: number;
+        durationBarVisible?: boolean;
+        dynamicEventRendering?: "Progressive" | "Disabled";
+        dynamicEventRenderingCacheSize?: number;
+        dynamicEventRenderingCacheSweeping?: boolean;
+        dynamicEventRenderingMargin?: number;
+        dynamicEventRenderingMarginX?: number;
+        dynamicEventRenderingMarginY?: number;
+        // eventBorderRadius?: string | number;eventBubbleShowForMargins?: boolean;
+        eventClickHandling?: "Enabled" | "Disabled";
+        eventDeleteHandling?: "Update" | "Disabled";
+        eventEndSpec?: "DateTime" | "Date";
+        eventHeight?: number;
+        eventMinWidth?: number;
+        eventMoveHandling?: "Update" | "Disabled";
+        eventResizeHandling?: "Update" | "Disabled";
+        eventResizeMargin?: number;
+        eventRightClickHandling?: "Enabled" | "Disabled" | "ContextMenu";
+        eventTapAndHoldHandling?: "Move" | "ContextMenu";
+        eventTextWrappingEnabled?: boolean;
+        eventsLoadMethod?: "GET" | "POST";
+        floatingEvents?: boolean;
+        floatingTimeHeaders?: boolean;
+        headerHeight?: number;
+        height?: number;
+        heightSpec?: "Auto" | "Max" | "Fixed";
+        locale?: string | DayPilot.Locale;
+        progressiveRowRendering?: boolean;
+        progressiveRowRenderingPreload?: number;
+        resources?: ResourceData[];
+        // rowClickHandling?: "Enabled" | "Disabled" | "CallBack" | "Edit" | "Select";
+        rowHeaderWidth?: number;
+        rowsLoadMethod?: "GET" | "POST";
+        scale?: "CellDuration" | "Minute" | "Hour" | "Day" | "Week";
+        scrollDelayCells?: number;
+        scrollDelayEvents?: number;
+        scrollDelayFloats?: number;
+        scrollDelayRows?: number;
+        showToolTip?: boolean;
+        snapToGrid?: boolean;
+        startDate?: DayPilot.Date | string;
+        tapAndHoldTimeout?: number;
+        theme?: string;
+        timeFormat?: "Auto" | "Clock12Hours" | "Clock24Hours";
+        timeHeaderClickHandling?: "Enabled" | "Disabled";
+        timeHeaderTextWrappingEnabled?: boolean;
+        timeHeaders?: TimeHeaderData[];
+        timeRangeClickHandling?: "Enabled" | "Disabled";
+        timeRangeSelectedHandling?: "Enabled" | "Disabled";
+        useEventBoxes?: "Always" | "Never";
+        visible?: boolean;
+        weekStarts?: "Auto" | number;
+        width?: string;
+        xssProtection?: "Enabled" | "Disabled";
+
+        onAfterUpdate?: EventHandler<SchedulerAfterUpdateArgs>;
+        onBeforeEventRender?: EventHandler<SchedulerBeforeEventRenderArgs>;
+        onBeforeRowHeaderRender?: EventHandler<SchedulerBeforeRowHeaderRenderArgs>;
+        onBeforeTimeHeaderRender?: EventHandler<SchedulerBeforeTimeHeaderRenderArgs>;
+
+        onEventClick?: EventHandler<SchedulerEventClickArgs>;
+        onEventClicked?: EventHandler<SchedulerEventClickedArgs>;
+        onEventDelete?: EventHandler<SchedulerEventDeleteArgs>;
+        onEventDeleted?: EventHandler<SchedulerEventDeletedArgs>;
+        onEventMove?: EventHandler<SchedulerEventMoveArgs>;
+        onEventMoved?: EventHandler<SchedulerEventMovedArgs>;
+        onEventResize?: EventHandler<SchedulerEventResizeArgs>;
+        onEventResized?: EventHandler<SchedulerEventResizedArgs>;
+        onEventRightClick?: EventHandler<SchedulerEventRightClickArgs>;
+        onEventRightClicked?: EventHandler<SchedulerEventRightClickedArgs>;
+        onRowClick?: EventHandler<SchedulerRowClickArgs>;
+        onRowClicked?: EventHandler<SchedulerRowClickedArgs>;
+        onTimeHeaderClick?: EventHandler<SchedulerTimeHeaderClickArgs>;
+        onTimeHeaderClicked?: EventHandler<SchedulerTimeHeaderClickedArgs>;
+        onTimeHeaderRightClick?: EventHandler<SchedulerTimeHeaderRightClickArgs>;
+        onTimeHeaderRightClicked?: EventHandler<SchedulerTimeHeaderRightClickedArgs>;
+        onTimeRangeClick?: EventHandler<SchedulerTimeRangeClickArgs>;
+        onTimeRangeClicked?: EventHandler<SchedulerTimeRangeClickedArgs>;
+        onTimeRangeSelect?: EventHandler<SchedulerTimeRangeSelectArgs>;
+        onTimeRangeSelected?: EventHandler<SchedulerTimeRangeSelectedArgs>;
+    }
+
+    export class SchedulerConfig extends SchedulerPropsAndEvents {
+        events?: EventData[];
+    }
+
+    export class Scheduler extends SchedulerPropsAndEvents {
+        v: string;
+        events: {
+            list: EventData[];
+
+            add(e: DayPilot.Event): void;
+            add(data: EventData): void;
+            all(): DayPilot.Event[];
+            find(id: EventId): DayPilot.Event;
+            find(filter: (e: DayPilot.Event) => boolean): DayPilot.Event;
+            findAll(filter: (e: DayPilot.Event) => boolean): DayPilot.Event[];
+            findAll(example: any): DayPilot.Event[];
+            forRange(start?: DayPilot.Date | string, end?: DayPilot.Date | string): DayPilot.Event[];
+            load(url: string,
+                 success: (args: { data: any; preventDefault(): void; }) => void,
+                 error: (args: { request: XMLHttpRequest, exception: any; }) => void
+            ): void;
+            remove(e: DayPilot.Event): void;
+            remove(data: EventData): void;
+            remove(id: EventId): void;
+            scrollIntoView(e: DayPilot.Event): void;
+            update(e: DayPilot.Event): void;
+            update(data: EventData): void;
+        };
+        rows: {
+            add(data: ResourceData): void;
+            all(): DayPilot.Row[];
+            each(f: () => DayPilot.Row): void;
+            find(filter: (row: DayPilot.Row) => boolean, startIndex?: number): DayPilot.Row;
+            find(id: ResourceId, start?: DayPilot.Date | string): DayPilot.Row;
+            load(url: string,
+                 success: (args: { data: any; preventDefault(): void; }) => void,
+                 error: (args: { request: XMLHttpRequest, exception: any; }) => void
+            ): void;
+            remove(row: DayPilot.Row): void;
+            remove(id: ResourceId): void;
+            sort(spec?: string | { field: string, order?: "asc" | "desc" }): void;
+            update(row: DayPilot.Row | ResourceData): void;
+        };
+
+        constructor(id: string | HTMLElement, options?: SchedulerConfig);
+
+        clearSelection(): void;
+
+        dispose(): void;
+
+        disposed(): boolean;
+
+        dragInProgress(): boolean;
+
+        getDate(pixels: number, precise?: boolean, isEnd?: boolean): DayPilot.Date;
+
+        getScrollX(): number;
+
+        getScrollY(): number;
+
+        getViewport(): SchedulerViewport;
+
+        hide(): void;
+
+        init(): void;
+
+        scrollTo(date: string | DayPilot.Date): void;
+
+        scrollToResource(id: ResourceId | DayPilot.Row): void;
+
+        selectTimeRange(start: DayPilot.Date | string, end: DayPilot.Date | string, resource: ResourceId, dontFireEvent?: boolean): void;
+
+        setHeight(pixels: number): void;
+
+        setScroll(scrollX: number, scrollY: number): void;
+
+        setScrollX(scrollX: number): void;
+
+        setScrollY(scrollY: number): void;
+
+        show(): void;
+
+        update(options?: SchedulerConfig): void;
+
+        visibleStart(): DayPilot.Date;
+
+        visibleEnd(): DayPilot.Date;
+
+    }
+
+    export interface SchedulerAfterUpdateArgs {
+    }
+
+    export interface SchedulerBeforeEventRenderArgs {
+        readonly control: DayPilot.Scheduler;
+        readonly data: EventData;
+    }
+
+    export interface SchedulerBeforeRowHeaderRenderArgs {
+        readonly row: RenderRow;
+    }
+
+    export interface SchedulerBeforeTimeHeaderRenderArgs {
+        readonly control: Scheduler;
+        readonly header: {
+            readonly start: DayPilot.Date;
+            readonly end: DayPilot.Date;
+            readonly level: number;
+            areas: AreaData[];
+            text: string;
+            html: string;
+            toolTip: string;
+            backColor: string;
+            fontColor: string;
+            cssClass: string;
+        };
+    }
+
+    export interface SchedulerEventClickArgs {
+        readonly e: DayPilot.Event;
+        readonly div: HTMLElement;
+        readonly ctrl: boolean;
+        readonly meta: boolean;
+        readonly shift: boolean;
+        readonly control: DayPilot.Scheduler;
+        readonly originalEvent: MouseEvent;
+        preventDefault(): void;
+    }
+
+    export interface SchedulerEventClickedArgs {
+        readonly e: DayPilot.Event;
+        readonly div: HTMLElement;
+        readonly ctrl: boolean;
+        readonly meta: boolean;
+        readonly shift: boolean;
+        readonly control: DayPilot.Scheduler;
+        readonly originalEvent: MouseEvent;
+    }
+
+    export interface SchedulerEventDeleteArgs {
+        readonly e: DayPilot.Event;
+        readonly control: DayPilot.Scheduler;
+        preventDefault(): void;
+    }
+
+    export interface SchedulerEventDeletedArgs {
+        readonly e: DayPilot.Event;
+        readonly control: DayPilot.Scheduler;
+    }
+
+    export interface SchedulerEventMoveArgs {
+        async: boolean;
+        readonly areaData: any;
+        readonly control: DayPilot.Scheduler;
+        readonly e: DayPilot.Event;
+        newStart: DayPilot.Date;
+        newEnd: DayPilot.Date;
+        newResource: ResourceId;
+        readonly ctrl: boolean;
+        readonly shift: boolean;
+        readonly meta: boolean;
+
+        loaded(): void;
+        preventDefault(): void;
+    }
+
+    export interface SchedulerEventMovedArgs {
+        readonly async: boolean;
+        readonly areaData: any;
+        readonly control: DayPilot.Scheduler;
+        readonly e: DayPilot.Event;
+        readonly newStart: DayPilot.Date;
+        readonly newEnd: DayPilot.Date;
+        readonly newResource: ResourceId;
+        readonly ctrl: boolean;
+        readonly shift: boolean;
+        readonly meta: boolean;
+    }
+
+    export interface SchedulerEventResizeArgs {
+        readonly areaData: any;
+        async: boolean;
+        readonly control: DayPilot.Scheduler;
+        readonly e: DayPilot.Event;
+        newStart: DayPilot.Date;
+        newEnd: DayPilot.Date;
+        readonly what: "start" | "end";  // TODO check
+
+        loaded(): void;
+        preventDefault(): void;
+    }
+
+    export interface SchedulerEventResizedArgs {
+        readonly areaData: any;
+        readonly async: boolean;
+        readonly control: DayPilot.Scheduler;
+        readonly e: DayPilot.Event;
+        readonly newStart: DayPilot.Date;
+        readonly newEnd: DayPilot.Date;
+        readonly what: "start" | "end";
+    }
+
+    export interface SchedulerEventRightClickArgs {
+        readonly e: DayPilot.Event;
+        readonly div: HTMLElement;
+        readonly originalEvent: MouseEvent;
+
+        preventDefault(): void;
+    }
+
+    export interface SchedulerEventRightClickedArgs {
+        readonly e: DayPilot.Event;
+        readonly div: HTMLElement;
+        readonly originalEvent: MouseEvent;
+    }
+
+    export interface SchedulerRowClickArgs {
+        readonly row: DayPilot.Row;
+        readonly ctrl: boolean;
+        readonly shift: boolean;
+        readonly meta: boolean;
+        readonly originalEvent: MouseEvent;
+        preventDefault(): void;
+    }
+
+    export interface SchedulerRowClickedArgs {
+        readonly row: DayPilot.Row;
+        readonly ctrl: boolean;
+        readonly shift: boolean;
+        readonly meta: boolean;
+        readonly originalEvent: MouseEvent;
+    }
+
+    export interface SchedulerTimeHeaderClickArgs {
+        readonly control: Scheduler;
+        readonly header: {
+            readonly start: DayPilot.Date;
+            readonly end: DayPilot.Date;
+            readonly level: number;
+        };
+        readonly originalEvent: MouseEvent;
+        readonly ctrl: boolean;
+        readonly shift: boolean;
+        readonly meta: boolean;
+
+        preventDefault(): void;
+    }
+
+    export interface SchedulerTimeHeaderClickedArgs {
+        readonly control: Scheduler;
+        readonly header: {
+            readonly start: DayPilot.Date;
+            readonly end: DayPilot.Date;
+            readonly level: number;
+        };
+        readonly originalEvent: MouseEvent;
+        readonly ctrl: boolean;
+        readonly shift: boolean;
+        readonly meta: boolean;
+    }
+
+    export interface SchedulerTimeHeaderRightClickArgs {
+        readonly header: {
+            readonly start: DayPilot.Date;
+            readonly end: DayPilot.Date;
+            readonly level: number;
+        };
+
+        preventDefault(): void;
+    }
+
+    export interface SchedulerTimeHeaderRightClickedArgs {
+        readonly header: {
+            readonly start: DayPilot.Date;
+            readonly end: DayPilot.Date;
+            readonly level: number;
+        };
+    }
+
+    export interface SchedulerTimeRangeClickArgs {
+        readonly start: DayPilot.Date;
+        readonly end: DayPilot.Date;
+        readonly resource: ResourceId;
+
+        preventDefault(): void;
+    }
+
+    export interface SchedulerTimeRangeClickedArgs {
+        readonly start: DayPilot.Date;
+        readonly end: DayPilot.Date;
+        readonly resource: ResourceId;
+    }
+
+    export interface SchedulerTimeRangeSelectArgs {
+        readonly start: DayPilot.Date;
+        readonly end: DayPilot.Date;
+        readonly resource: ResourceId;
+        readonly control: DayPilot.Scheduler;
+
+        preventDefault(): void;
+    }
+
+    export interface SchedulerTimeRangeSelectedArgs {
+        readonly start: DayPilot.Date;
+        readonly end: DayPilot.Date;
+        readonly resource: ResourceId;
+        readonly control: DayPilot.Scheduler;
+    }
+
+    // TODO check if all values are supported
+    export type GroupBy = "Minute" | "Hour" | "Day" | "Week" | "Month" | "Quarter" | "Year" | "Cell" | "None";
+
+    export interface SchedulerViewport {
+        start: DayPilot.Date,
+        end: DayPilot.Date,
+        resources: ResourceId[]
+    }
+
+    export interface ResourceData {
+        id?: ResourceId;
+        name?: string;
+        start?: DayPilot.Date | string;
+        end?: DayPilot.Date | string;
+
+        areas?: AreaData[];
+        ariaLabel?: string;
+        backColor?: string;
+        fontColor?: string;
+        cssClass?: string;
+        html?: string;
+        tags?: any;
+        toolTip?: string;
+
+        [prop: string]: any;
+    }
+
+    export interface TimeHeaderData {
+        groupBy: GroupBy;
+        format?: string;
+        height?: number;
+    }
+
+    export class Row {
+        events: {
+            all(): DayPilot.Event[];
+            isEmpty(): boolean;
+            forRange(start: string | DayPilot.Date, end: string | DayPilot.Date): DayPilot.Event[];
+            totalDuration(): DayPilot.Duration;
+        };
+        readonly calendar: DayPilot.Scheduler;
+        readonly data: any;
+        readonly id: ResourceId;
+        readonly index: number;
+        readonly level: number;
+        readonly name: string;
+
+        addClass(className: string): void;
+
+        remove(): void;
+
+        removeClass(className: string): void;
+    }
+
+    export class RenderRow extends Row {
+        areas: AreaData[];
+        backColor: string;
+        cssClass: string;
+        fontColor: string;
+        horizontalAlignment: HorizontalAlignment;
+        html: string;
+        text: string;
+        toolTip: string;
+    }
+
+
     export class CalendarPropsAndEvents {
         backendUrl?: string;
         businessBeginsHour?: number;
@@ -1226,6 +1696,10 @@ export module DayPilot {
 }
 import React from 'react';
 
+export declare class DayPilotScheduler extends React.Component<SchedulerProps> {
+    control: DayPilot.Scheduler;
+}
+
 export declare class DayPilotCalendar extends React.Component<CalendarProps> {
     control: DayPilot.Calendar;
 }
@@ -1238,6 +1712,9 @@ export declare class DayPilotNavigator extends React.Component<NavigatorProps> {
     control: DayPilot.Navigator;
 }
 
+export class SchedulerProps extends DayPilot.SchedulerConfig {
+    controlRef?: React.MutableRefObject | ((component: DayPilot.Scheduler) => void);
+}
 
 export class CalendarProps extends DayPilot.CalendarConfig {
     controlRef?: React.MutableRefObject | ((component: DayPilot.Calendar) => void);