schedulant 1.0.0-alpha.1 → 1.0.0

package/README.md

@@ -44,3 +44,259 @@ Note: Schedulant is a project based on Typescript React, it is designed specific
 * Schedulant supports **day**, **month**, **quarter**, and **year** views. This means that users can choose the view that best suits their needs and preferences to view and manage their schedule.
 * Schedulant supports **exporting images**. This means that users can export their schedule or project timeline in the form of images, which is convenient for sharing and archiving.
 * Schedulant supports **customizing row height and column width**. This means that users can adjust the row height and column width of the schedule according to their needs and preferences, making the display of the schedule more in line with their visual habits.
+
+## Previews
+
+* Day view
+  ![Day view](https://github.com/DAIMENGEN/schedulant/blob/master/example/previews/day.png?raw=true)
+
+* Week view
+  ![Week view](https://github.com/DAIMENGEN/schedulant/blob/master/example/previews/week.png?raw=true)
+
+* Month view
+  ![Month view](https://github.com/DAIMENGEN/schedulant/blob/master/example/previews/month.png?raw=true)
+
+* Quarter view
+  ![Month view](https://github.com/DAIMENGEN/schedulant/blob/master/example/previews/quarter.png?raw=true)
+
+* Year view
+  ![Month view](https://github.com/DAIMENGEN/schedulant/blob/master/example/previews/year.png?raw=true)
+
+## Props
+
+* **start:** Start date of the schedule view.
+* **end:** End date of the schedule view.
+* **editable:** Whether editing the schedule is allowed; if the current value is `false`, properties such as `eventMove`, `eventResizeStart`, `eventResizeEnd`, `milestonesMove`, and `checkpointMove` will become ineffective.
+* **lineHeight:** Sets the line height of the schedule.
+* **slotMinWidth:** Determines how wide each of the time-axis slots will be. Specified as a number of pixels. When not specified, a reasonable value will be automatically computed.
+* **schedulantMaxHeight:** Sets the max height of the entire schedule.
+* **schedulantViewType:** Sets the view type of the schedule. Currently, support day, week, month quarter and year view.
+* **events:** An array of event objects that will be displayed on the schedule.
+* **resources:** Tells the schedule to display resources from an array input. The resource's id property is the most important because is allows associating events with resources.
+* **milestones:** An array of milestones objects that will be displayed on the schedule. (**Note:** This property is optional)
+* **checkpoints:** An array of milestones objects that will be displayed on the schedule. (**Note:** This property is optional)
+* **companyHolidays:** An array of company holidays that will be used to mark company holidays on the schedule. (**Note:** This property is optional)
+* **specialWorkdays:** An array of special workdays that will be used to mark special workdays on the schedule. (**Note:** This property is optional)
+* **nationalHolidays:** An array of national holidays that will be used to mark national holidays on the schedule. (**Note:** This property is optional)
+* **resourceAreaWidth:** Determines the width of the area that contains the list of resources. Can be specified as a number of pixels, or a CSS string value, like "25%". default: "30%" (**Note:** This property is optional)
+* **resourceAreaColumns:** Turns the resource area from a plain list of titles into a grid of data. An array of objects can be provided, each with information about a column. (**Note:** This property is optional)
+* **selectAllow:** Exact programmatic control over where the user can select. This callback will be called for every new potential selection as the user is dragging. (**Note:** This property is optional)
+* **enableEventContextMenu:** Whether to enable the right-click menu functionality for event. (**Note:** This property is optional)
+* **eventContextMenuClick:** The event triggered when an option in the event's right-click menu is clicked. (**Note:** This property is optional)
+* **eventContextMenuItems:** Configure options in the event's right-click menu. (**Note:** This property is optional)
+* **eventDidMount:** Called right after the element has been added to the DOM. If the event data changes, this is NOT called again. (**Note:** This property is optional)
+* **eventWillUnmount:** Called right before the element will be removed from the DOM. (**Note:** This property is optional)
+* **eventMove:** Triggered when event move begins. (**Note:** This property is optional)
+* **eventResizeStart:** Triggered when resizing stops and the event start date has changed in duration. (**Note:** This property is optional)
+* **eventResizeEnd:** Triggered when resizing stops and the event end date has changed in duration. (**Note:** This property is optional)
+* **enableMilestoneContextMenu:** Whether to enable the right-click menu functionality for milestone. (**Note:** This property is optional)
+* **milestoneContextMenuClick:** The milestone triggered when an option in the milestone's right-click menu is clicked. (**Note:** This property is optional)
+* **milestoneContextMenuItems:** Configure options in the milestone's right-click menu. (**Note:** This property is optional)
+* **milestoneDidMount:** Called right after the element has been added to the DOM. If the milestone data changes, this is NOT called again. (**Note:** This property is optional)
+* **milestoneWillUnmount:** Called right before the element will be removed from the DOM. (**Note:** This property is optional)
+* **milestoneMove:** Triggered when milestone move begins. (**Note:** This property is optional)
+* **enableCheckpointContextMenu:** Whether to enable the right-click menu functionality for checkpoint. (**Note:** This property is optional)
+* **checkpointContextMenuClick:** The checkpoint triggered when an option in checkpoint's right-click menu is clicked. (**Note:** This property is optional)
+* **checkpointContextMenuItems:** Configure options in the checkpoint's right-click menu. (**Note:** This property is optional)
+* **checkpointDidMount:** Called right after the element has been added to the DOM. If the checkpoint data changes, this is NOT called again. (**Note:** This property is optional)
+* **checkpointWillUnmount:** Called right before the element will be removed from the DOM. (**Note:** This property is optional)
+* **checkpointMove:** Triggered when event move begins. (**Note:** This property is optional)
+* **enableResourceLaneContextMenu:** Whether to enable the right-click menu functionality for resource lane. (**Note:** This property is optional)
+* **resourceLaneContextMenuClick:** The resource lane triggered when an option in resource lane's right-click menu is clicked. (**Note:** This property is optional)
+* **resourceLaneContextMenuItems:** Configure options in the resource lane's right-click menu. (**Note:** This property is optional)
+* **resourceLaneDidMount:** Called right after the element has been added to the DOM. If the resource data changes, this is NOT called again. (**Note:** This property is optional)
+* **resourceLaneWillUnmount:** Called right before the element will be removed from the DOM. (**Note:** This property is optional)
+* **enableResourceLabelContextMenu:** Whether to enable the right-click menu functionality for resource label. (**Note:** This property is optional)
+* **resourceLabelContextMenuClick:** The resource label triggered when an option in resource lane's right-click menu is clicked. (**Note:** This property is optional)
+* **resourceLabelContextMenuItems:** Configure options in the resource lane's right-click menu. (**Note:** This property is optional)
+* **resourceLabelDidMount:** Called right after the element has been added to the DOM. If the resource label data changes, this is NOT called again. (**Note:** This property is optional)
+* **resourceLabelWillUnmount:** Called right before the element will be removed from the DOM. (**Note:** This property is optional)
+* **timelineSlotLabelDidMount:** Called right after the element has been added to the DOM. (**Note:** This property is optional)
+* **timelineSlotLabelWillUnmount:** Called right before the element will be removed from the DOM. (**Note:** This property is optional)
+* **timelineSlotLaneDidMount:** Called right after the element has been added to the DOM. (**Note:** This property is optional)
+* **timelineSlotLaneWillUnmount:** Called right before the element will be removed from the DOM. (**Note:** This property is optional)
+* **schedulantDidMount:** Called right after the element has been added to the DOM. (**Note:** This property is optional)
+* **schedulantWillUnmount:** Called right before the element will be removed from the DOM. (**Note:** This property is optional)
+
+## Basic Example
+```typescript
+import "schedulant/dist/schedulant.css";
+const App = () => {
+    const mockResources = [
+        {
+            id: "8968845952632643583",
+            title: "Transfer to ATJ for learning and working",
+            parentId: "4575511461886459807",
+            extendedProps: {
+                order: 1
+            }
+        },
+        {
+            id: "8638818878966724025",
+            title: "Memory Test Software",
+            type: 1,
+            extendedProps: {
+                order: 2
+            }
+        },
+        {
+            id: "8858562325095899135",
+            title: "WFB 3D Viewer (Prototype)",
+            parentId: "8638818878966724025",
+            extendedProps: {
+                order: 1
+            }
+        }
+    ];
+    const mockEvents: Array<Event> = [
+        {
+            id: "1",
+            title: "Transfer to ATJ for learning and working",
+            color: "#000000",
+            start: dayjs("2024-04-01"),
+            end: dayjs("2024-06-30"),
+            resourceId: "8968845952632643583"
+        },
+        {
+            id: "2",
+            title: "Memory Test Software",
+            color: "rgba(0,0,0,0.57)",
+            start: dayjs("2021-01-01"),
+            end: dayjs("2024-12-31"),
+            resourceId: "8638818878966724025",
+        },
+        {
+            id: "3",
+            title: "WFB 3D Viewer (Prototype)",
+            color: "#000000",
+            start: dayjs("2024-04-01"),
+            end: dayjs("2024-06-15"),
+            resourceId: "8858562325095899135"
+        },
+    ];
+    const mockCheckpoints: Array<Checkpoint> = [
+        {
+            id: "1",
+            title: "Test Condition Monitor",
+            color: "green",
+            timestamp: dayjs("2024-04-15"),
+            resourceId: "8968845952632643583",
+        },
+    ];
+    const mockMilestones: Array<Milestone> = [
+        {
+            id: "1",
+            title: "milestone1",
+            timestamp: dayjs("2024-04-31"),
+            status: "Success",
+            resourceId: "8858562325095899135",
+        }
+    ]
+    return (
+        <div>
+            <Schedulant start={dayjs("2024-01-01")}
+                          end={dayjs("2024-10-01")}
+                          editable={true}
+                          lineHeight={40}
+                          slotMinWidth={50}
+                          schedulantMaxHeight={600}
+                          schedulantViewType={"Day"}
+                          resources={mockResources}
+                          events={mockEvents}
+                          checkpoints={mockCheckpoints}
+                          milestones={mockMilestones}
+                          enableEventContextMenu={true}
+                          resourceAreaColumns={[
+                              {
+                                  field: "title",
+                                  headerContent: "Title"
+                              },
+                              {
+                                  field: "order",
+                                  headerContent: "Order"
+                              },
+                              {
+                                  field: "parentId",
+                                  headerContent: "ParentId"
+                              }
+                          ]}
+                          eventContextMenuItems={[
+                              {
+                                  title: "123",
+                                  label: "event lane",
+                              }
+                          ]}
+                          eventContextMenuClick={(arg: EventContextMenuArg) => {
+                              // alert(arg.eventApi.getTitle());
+                          }}
+                          eventDidMount={(arg: EventMountArg) => {
+                              // console.log(arg);
+                          }}
+                          eventMove={(arg: EventMoveMountArg) => {
+                              console.log("el", arg.el);
+                              console.log("title", arg.eventApi.getTitle());
+                              console.log("startDate", arg.startDate.format("YYYY-MM-DD"));
+                              console.log("endDate", arg.endDate.format("YYYY-MM-DD"));
+                              console.log("scheduleApi", arg.scheduleApi);
+                          }}
+                          eventResizeEnd={(arg: EventResizeMountArg) => {
+                              console.log("el", arg.el);
+                              console.log("title", arg.eventApi.getTitle());
+                              console.log("date", arg.date.format("YYYY-MM-DD"));
+                              console.log("scheduleApi", arg.scheduleApi);
+                          }}
+                          eventResizeStart={(arg: EventResizeMountArg) => {
+                              console.log("el", arg.el);
+                              console.log("title", arg.eventApi.getTitle());
+                              console.log("date", arg.date.format("YYYY-MM-DD"));
+                              console.log("scheduleApi", arg.scheduleApi);
+                          }}
+                          enableResourceLabelContextMenu={true}
+                          resourceLabelContextMenuItems={[
+                              {
+                                  title: "123",
+                                  label: "resource label",
+                              }
+                          ]}
+                          resourceLabelContextMenuClick={(arg: ResourceLabelContextMenuArg) => {
+                              alert(arg.label.headerContent);
+                          }}
+                          resourceLabelDidMount={(arg: ResourceLabelMountArg) => {
+                              // console.log(arg);
+                          }}
+                          enableResourceLaneContextMenu={true}
+                          resourceLaneContextMenuItems={[
+                              {
+                                  title: "123",
+                                  label: "resource lane",
+                              }
+                          ]}
+                          resourceLaneContextMenuClick={(arg: ResourceLaneContextMenuArg) => {
+                              // alert(arg.resourceApi.getTitle());
+                          }}
+                          resourceLaneDidMount={(arg: ResourceLaneMountArg) => {
+                              // console.log(arg)
+                          }}
+                          milestoneDidMount={(arg: MilestoneMountArg) => {
+                              const {el, milestoneApi} = arg;
+                              el.title = milestoneApi.getTitle();
+                          }}
+                          milestoneMove={(arg: MilestoneMoveMountArg) => {
+                              console.log("el", arg.el);
+                              console.log("title", arg.milestoneApi.getTitle());
+                              console.log("date", arg.date.format("YYYY-MM-DD"));
+                              console.log("scheduleApi", arg.scheduleApi);
+                              console.log("milestoneApi", arg.milestoneApi);
+                          }}
+                          checkpointMove={(arg: CheckpointMoveMountArg) => {
+                              console.log("el", arg.el);
+                              console.log("title", arg.checkpointApi.getTitle());
+                              console.log("date", arg.date.format("YYYY-MM-DD"));
+                              console.log("scheduleApi", arg.scheduleApi);
+                              console.log("checkpointApi", arg.checkpointApi);
+                          }}
+            />
+    	</div>
+    )
+}
+```

package/dist/components/datagrid/body-cell.d.ts

@@ -1,5 +1,6 @@
 import { SchedulantApi } from '../../types/schedulant.ts';
 import { ResourceApi, ResourceAreaColumn } from '../../types/resource.ts';
+import { ResizerMouseDownFunc, ResizerMouseUp } from '../../hooks/use-resource-area-resizer.ts';
 export declare const BodyCell: (props: {
     schedulantApi: SchedulantApi;
     resourceApi: ResourceApi;
@@ -7,4 +8,7 @@ export declare const BodyCell: (props: {
     showPlusSquare: boolean;
     showIndentation: boolean;
     resourceAreaColumn: ResourceAreaColumn;
+    isResizable: boolean;
+    cellResizerMouseUp: ResizerMouseUp;
+    cellResizerMouseDownFunc: ResizerMouseDownFunc;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/datagrid/datagrid-body.d.ts

@@ -1,4 +1,7 @@
 import { SchedulantView } from '../../types/schedulant-view.tsx';
+import { ResizerMouseDownFunc, ResizerMouseUp } from '../../hooks/use-resource-area-resizer.ts';
 export declare const DatagridBody: (props: {
     schedulantView: SchedulantView;
+    cellResizerMouseUp: ResizerMouseUp;
+    cellResizerMouseDownFunc: ResizerMouseDownFunc;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/datagrid/datagrid-head.d.ts

@@ -1,4 +1,7 @@
 import { SchedulantView } from '../../types/schedulant-view.tsx';
+import { ResizerMouseDownFunc, ResizerMouseUp } from '../../hooks/use-resource-area-resizer.ts';
 export declare const DatagridHead: (props: {
     schedulantView: SchedulantView;
+    cellResizerMouseUp: ResizerMouseUp;
+    cellResizerMouseDownFunc: ResizerMouseDownFunc;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/datagrid/head-cell.d.ts

@@ -1,7 +1,10 @@
 import { ResourceAreaColumn } from '../../types/resource.ts';
 import { SchedulantApi } from '../../types/schedulant.ts';
+import { ResizerMouseDownFunc, ResizerMouseUp } from '../../hooks/use-resource-area-resizer.ts';
 export declare const HeadCell: (props: {
     schedulantApi: SchedulantApi;
     resourceAreaColumn: ResourceAreaColumn;
     isResizable: boolean;
+    cellResizerMouseUp: ResizerMouseUp;
+    cellResizerMouseDownFunc: ResizerMouseDownFunc;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-resource-area-resizer.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, MouseEventHandler, MutableRefObject, RefObject } from 'react';
+import { Action } from '../context/schedulant-state';
+export type ResizerMouseUp = MouseEventHandler<HTMLDivElement>;
+export type ResizerMouseDown = MouseEventHandler<HTMLDivElement>;
+export type ResizerMouseDownFunc = (cellRef: MutableRefObject<HTMLDivElement | null>) => ResizerMouseDown;
+export declare const useResourceAreaResizer: (dispatch: Dispatch<Action>, scheduleElRef: RefObject<HTMLDivElement>, resourceAreaColElRef: RefObject<HTMLTableColElement>) => {
+    datagridResizerMouseUp: ResizerMouseUp;
+    datagridResizerMouseDown: ResizerMouseDown;
+    datagridCellResizerMouseUp: ResizerMouseUp;
+    datagridCellResizerMouseDownFunc: ResizerMouseDownFunc;
+};

package/dist/schedulant.css

@@ -1 +1 @@
-::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background-color:#f5f5f5}::-webkit-scrollbar-thumb{background:#848484;border-radius:5px;border:2px solid #fff;box-shadow:inset 0 0 5px #0003}::-webkit-scrollbar-thumb:hover{background-color:#91003c}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-corner{background-color:#f5f5f5}.schedulant,.schedulant *{box-sizing:border-box}.schedulant{direction:ltr;text-align:left;display:flex;flex-direction:column;font-size:1em;position:relative}.schedulant table{border-collapse:collapse;border-spacing:0;font-size:1em;table-layout:fixed;width:100%}.schedulant table td,.schedulant table th{padding:0;border:1px solid #CED4DA}.schedulant table th{text-align:center}.schedulant .schedulant-view-harness{flex-grow:1;position:relative}.schedulant .schedulant-view-harness .schedulant-view{top:0;right:0;bottom:0;left:0;position:absolute}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid{height:100%}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section .schedulant-scroller-harness{height:100%;direction:ltr;overflow:hidden;position:relative}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section .schedulant-resource-timeline-divider{cursor:col-resize;width:3px;background-color:#e9ecef}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section .schedulant-datagrid-cell-frame{height:100%;display:flex;justify-content:flex-start;align-items:center;position:relative;cursor:pointer}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section .schedulant-datagrid-cell-frame .schedulant-datagrid-cell-cushion{overflow:hidden;padding-left:8px;white-space:nowrap}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header>td{border-bottom-style:hidden}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header .schedulant-scroller-harness .schedulant-scroller-header-left{height:100%;overflow:hidden}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header .schedulant-scroller-harness .schedulant-scroller-header-left .schedulant-datagrid-header{height:100%}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header .schedulant-scroller-harness .schedulant-scroller-header-left .schedulant-datagrid-header td,.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header .schedulant-scroller-harness .schedulant-scroller-header-left .schedulant-datagrid-header th{border-bottom-style:hidden}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header .schedulant-scroller-harness .schedulant-scroller-header-left .schedulant-datagrid-header .schedulant-datagrid-cell-resizer{position:absolute;top:0;bottom:0;cursor:col-resize;width:10px;z-index:1;right:-5px}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header .schedulant-scroller-harness .schedulant-scroller-header-right{overflow:hidden scroll}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header .schedulant-scroller-harness .schedulant-scroller-header-right .schedulant-timeline-header table tr:last-child td,.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-header .schedulant-scroller-harness .schedulant-scroller-header-right .schedulant-timeline-header table tr:last-child th{border-bottom-style:hidden}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-scroller-harness .schedulant-scroller-body-left{top:0;right:0;bottom:0;left:0;position:absolute;overflow:scroll}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-scroller-harness .schedulant-scroller-body-left::-webkit-scrollbar{width:0}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-scroller-harness .schedulant-scroller-body-right{top:0;right:0;bottom:0;left:0;position:absolute;overflow:scroll}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body{min-height:100%;position:relative;z-index:1}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-slots{position:absolute;top:0;bottom:0;z-index:1}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-slots .schedulant-timeline-slot-frame{height:100%}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-slots>table{height:100%}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame{position:relative}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-lane{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-events{position:relative;width:0;z-index:3}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-events .schedulant-timeline-event-harness{position:absolute;z-index:2}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-events .schedulant-timeline-event-harness .schedulant-timeline-event{border-radius:5px;display:flex;justify-content:space-between}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-events .schedulant-timeline-event-harness .schedulant-timeline-event .schedulant-event-main{padding-left:5px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones{position:relative;width:0;z-index:4}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones .schedulant-timeline-milestone-harness{position:absolute;z-index:2}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones .schedulant-timeline-milestone-harness .schedulant-timeline-milestone{width:100%;text-align:center}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones .schedulant-timeline-milestone-harness .schedulant-timeline-milestone .schedulant-milestone-main svg{transition:transform .3s ease}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones .schedulant-timeline-milestone-harness .schedulant-timeline-milestone .schedulant-milestone-main svg:hover{transform:scale(1.2);cursor:pointer}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints{position:relative;width:0;z-index:4}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints .schedulant-timeline-checkpoint-harness{position:absolute;z-index:2}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints .schedulant-timeline-checkpoint-harness .schedulant-timeline-checkpoint{width:100%;text-align:center}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints .schedulant-timeline-checkpoint-harness .schedulant-timeline-checkpoint .schedulant-checkpoint-main svg{transition:transform .3s ease}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints .schedulant-timeline-checkpoint-harness .schedulant-timeline-checkpoint .schedulant-checkpoint-main svg:hover{transform:scale(1.2);cursor:pointer}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid table{border-left-style:hidden;border-right-style:hidden;border-top-style:hidden}.schedulant .schedulant-icon{display:inline-block;height:12px;width:12px;margin-right:1px}.schedulant .schedulant-holiday{background-color:#e9ecef}
+::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background-color:#f5f5f5}::-webkit-scrollbar-thumb{background:#848484;border-radius:5px;border:2px solid #fff;box-shadow:inset 0 0 5px #0003}::-webkit-scrollbar-thumb:hover{background-color:#91003c}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-corner{background-color:#f5f5f5}.schedulant,.schedulant *{box-sizing:border-box}.schedulant{direction:ltr;text-align:left;display:flex;flex-direction:column;font-size:1em;position:relative}.schedulant table{border-collapse:collapse;border-spacing:0;font-size:1em;table-layout:fixed;width:100%}.schedulant table td,.schedulant table th{padding:0;border:1px solid #CED4DA}.schedulant table th{text-align:center}.schedulant .schedulant-view-harness{flex-grow:1;position:relative}.schedulant .schedulant-view-harness .schedulant-view{top:0;right:0;bottom:0;left:0;position:absolute}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid{height:100%}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section .schedulant-scroller-harness{height:100%;direction:ltr;overflow:hidden;position:relative}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section .schedulant-resource-timeline-divider{cursor:col-resize;width:3px;background-color:#e9ecef}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section .schedulant-datagrid-cell-frame{height:100%;display:flex;justify-content:flex-start;align-items:center;position:relative;cursor:pointer}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section .schedulant-datagrid-cell-frame .schedulant-datagrid-cell-cushion{overflow:hidden;padding-left:8px;white-space:nowrap}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head>td{border-bottom-style:hidden}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head .schedulant-scroller-harness .schedulant-scroller-head-left{height:100%;overflow:hidden}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head .schedulant-scroller-harness .schedulant-scroller-head-left .schedulant-datagrid-head{height:100%}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head .schedulant-scroller-harness .schedulant-scroller-head-left .schedulant-datagrid-head td,.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head .schedulant-scroller-harness .schedulant-scroller-head-left .schedulant-datagrid-head th{border-bottom-style:hidden}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head .schedulant-scroller-harness .schedulant-scroller-head-left .schedulant-datagrid-head .schedulant-datagrid-cell-resizer{position:absolute;top:0;bottom:0;cursor:col-resize;width:10px;z-index:1;right:-5px}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head .schedulant-scroller-harness .schedulant-scroller-head-right{overflow:hidden scroll}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head .schedulant-scroller-harness .schedulant-scroller-head-right .schedulant-timeline-head table tr:last-child td,.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-head .schedulant-scroller-harness .schedulant-scroller-head-right .schedulant-timeline-head table tr:last-child th{border-bottom-style:hidden}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-scroller-harness .schedulant-scroller-body-left::-webkit-scrollbar{width:0}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-scroller-harness .schedulant-scroller-body-left{top:0;right:0;bottom:0;left:0;overflow:scroll;position:absolute}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-scroller-harness .schedulant-scroller-body-left .schedulant-datagrid-body .schedulant-datagrid-cell-resizer{position:absolute;top:0;bottom:0;cursor:col-resize;width:10px;z-index:1;right:-5px}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-scroller-harness .schedulant-scroller-body-right{top:0;right:0;bottom:0;left:0;position:absolute;overflow:scroll}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body{min-height:100%;position:relative;z-index:1}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-slots{position:absolute;top:0;bottom:0;z-index:1}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-slots .schedulant-timeline-slot-frame{height:100%}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-slots>table{height:100%}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame{position:relative}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-lane{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-events{position:relative;width:0;z-index:3}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-events .schedulant-timeline-event-harness{position:absolute;z-index:2}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-events .schedulant-timeline-event-harness .schedulant-timeline-event{border-radius:5px;display:flex;justify-content:space-between}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-events .schedulant-timeline-event-harness .schedulant-timeline-event .schedulant-event-main{padding-left:5px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones{position:relative;width:0;z-index:4}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones .schedulant-timeline-milestone-harness{position:absolute;z-index:2}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones .schedulant-timeline-milestone-harness .schedulant-timeline-milestone{width:100%;text-align:center}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones .schedulant-timeline-milestone-harness .schedulant-timeline-milestone .schedulant-milestone-main svg{transition:transform .3s ease}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-milestones .schedulant-timeline-milestone-harness .schedulant-timeline-milestone .schedulant-milestone-main svg:hover{transform:scale(1.2);cursor:pointer}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints{position:relative;width:0;z-index:4}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints .schedulant-timeline-checkpoint-harness{position:absolute;z-index:2}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints .schedulant-timeline-checkpoint-harness .schedulant-timeline-checkpoint{width:100%;text-align:center}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints .schedulant-timeline-checkpoint-harness .schedulant-timeline-checkpoint .schedulant-checkpoint-main svg{transition:transform .3s ease}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid .schedulant-scrollgrid-section-body .schedulant-timeline-body .schedulant-timeline-drawing-board .schedulant-timeline-lane-frame .schedulant-timeline-checkpoints .schedulant-timeline-checkpoint-harness .schedulant-timeline-checkpoint .schedulant-checkpoint-main svg:hover{transform:scale(1.2);cursor:pointer}.schedulant .schedulant-view-harness .schedulant-view .schedulant-scrollgrid table{border-left-style:hidden;border-right-style:hidden;border-top-style:hidden}.schedulant .schedulant-icon{display:inline-block;height:12px;width:12px;margin-right:1px}.schedulant .schedulant-holiday{background-color:#e9ecef}