@sme.up/ketchup 9.6.3 → 9.6.5

package/dist/collection/components/kup-planner/utils/gantt-table.module.css

@@ -131,6 +131,84 @@
   margin-right: 10px;
 }
 
+.scrollable {
+  overflow-x: auto;
+  scrollbar-width: 0;
+}
+.scrollable .project-wrapper {
+  display: table;
+}
+.scrollable .project {
+  width: 100% !important;
+  display: table-row;
+}
+.scrollable .project > * {
+  overflow: unset;
+  padding-right: 10px;
+  display: table-cell;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--kup-border-color, #acacac);
+  border-top: 1px solid var(--kup-border-color, #acacac);
+  padding-left: 12px;
+}
+.scrollable .project > *:first-child {
+  border-left: 1px solid var(--kup-border-color, #acacac);
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.scrollable .project > *:last-child {
+  border-right: 1px solid var(--kup-border-color, #acacac);
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.scrollable .subrow {
+  width: 100% !important;
+  display: table-row;
+}
+.scrollable .subrow > * {
+  overflow: unset;
+  padding-right: 10px;
+  display: table-cell;
+  vertical-align: middle;
+  border-bottom: 1px solid #acacac;
+  border-top: 1px solid #acacac;
+  padding-left: 12px;
+}
+.scrollable .subrow > *:first-child {
+  border-left: 1px solid #acacac;
+}
+.scrollable .subrow > *:last-child {
+  border-right: 1px solid #acacac;
+}
+.scrollable .timeline {
+  width: 100% !important;
+  display: table-row;
+}
+.scrollable .timeline > * {
+  overflow: unset;
+  padding-right: 10px;
+  display: table-cell;
+  vertical-align: middle;
+  border-bottom: 1px solid #acacac;
+  border-top: 1px solid #acacac;
+  padding-left: 12px;
+}
+.scrollable .timeline > *:first-child {
+  border-left: 1px solid #acacac;
+}
+.scrollable .timeline > *:last-child {
+  border-right: 1px solid #acacac;
+}
+.scrollable .project:has(+ .subrow) > * {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.scrollable::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
 .project {
   background: var(--kup-background-color, #ffffff);
   border: 1px solid var(--kup-border-color, #acacac);
@@ -183,8 +261,8 @@
 
 .subrow:has(+ .subrow),
 .project:has(+ .subrow) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 
 .timeline {

package/dist/collection/components/kup-planner/utils/helpers/bar.helpers.js

@@ -29,16 +29,16 @@ const convertToBarTask = (task, index, dates, columnWidth, rowHeight, taskHeight
     }
     return barTask;
 };
-function computeTypeAndXs(start, end, type, dates, columnWidth, handleWidth, rtl) {
+function computeTypeAndXs(start, end, type, dates, columnWidth, handleWidth, rtl, startHour, endHour) {
     let x1;
     let x2;
     if (rtl) {
-        x2 = taskXCoordinateRTL(start, dates, columnWidth);
-        x1 = taskXCoordinateRTL(end, dates, columnWidth);
+        x2 = taskXCoordinateRTL(start, dates, columnWidth, startHour);
+        x1 = taskXCoordinateRTL(end, dates, columnWidth, endHour);
     }
     else {
-        x1 = taskXCoordinate(start, dates, columnWidth);
-        x2 = taskXCoordinate(end, dates, columnWidth);
+        x1 = taskXCoordinate(start, dates, columnWidth, startHour);
+        x2 = taskXCoordinate(end, dates, columnWidth, endHour);
     }
     let typeInternal = type;
     if (typeInternal === 'task' && x2 - x1 < handleWidth * 2) {
@@ -48,9 +48,9 @@ function computeTypeAndXs(start, end, type, dates, columnWidth, handleWidth, rtl
     return { x1, x2, typeInternal };
 }
 const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, showSecondaryDates) => {
-    const { x1, x2, typeInternal } = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, rtl);
+    const { x1, x2, typeInternal } = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, rtl, task.startHour, task.endHour);
     const { x1: x1secondary, x2: x2secondary } = showSecondaryDates && task.secondaryStart && task.secondaryEnd
-        ? computeTypeAndXs(task.secondaryStart, task.secondaryEnd, task.type, dates, columnWidth, handleWidth, rtl)
+        ? computeTypeAndXs(task.secondaryStart, task.secondaryEnd, task.type, dates, columnWidth, handleWidth, rtl, task.secondaryStartHour, task.secondaryEndHour)
         : { x1: undefined, x2: undefined };
     const [progressWidth, progressX] = progressWithByParams(x1, x2, task.progress, rtl);
     const y = taskYCoordinate(index, rowHeight, taskHeight);
@@ -67,7 +67,7 @@ const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, ba
         progressWidth,
         barCornerRadius,
         handleWidth,
-        hideChildren, height: taskHeight, barChildren: [], styles });
+        hideChildren, height: taskHeight, barChildren: [], styles, ySecondary: y });
 };
 const defaultStyles = (styles) => {
     var _a, _b, _c, _d;
@@ -124,7 +124,13 @@ const convertToTimeline = (task, index, dates, columnWidth, rowHeight, taskHeigh
         index, progressX: 0, progressWidth: 0, barCornerRadius,
         handleWidth, typeInternal: task.type, progress: 0, height: taskHeight, hideChildren: undefined, barChildren: children !== null && children !== void 0 ? children : [], styles: defaultStyles(task.styles) });
 };
-const taskXCoordinate = (xDate, dates, columnWidth) => {
+const taskXCoordinate = (xDate, dates, columnWidth, hourString) => {
+    if (hourString) {
+        const [hours, minutes, seconds] = hourString.split(':').map(Number);
+        xDate.setHours(hours !== null && hours !== void 0 ? hours : 0);
+        xDate.setMinutes(minutes !== null && minutes !== void 0 ? minutes : 0);
+        xDate.setSeconds(seconds !== null && seconds !== void 0 ? seconds : 0);
+    }
     const index = dates.findIndex((d) => d.getTime() >= xDate.getTime()) - 1;
     if (index < 0) {
         return 0;
@@ -134,8 +140,8 @@ const taskXCoordinate = (xDate, dates, columnWidth) => {
     const x = index * columnWidth + percentOfInterval * columnWidth;
     return x;
 };
-const taskXCoordinateRTL = (xDate, dates, columnWidth) => {
-    let x = taskXCoordinate(xDate, dates, columnWidth);
+const taskXCoordinateRTL = (xDate, dates, columnWidth, hourString) => {
+    let x = taskXCoordinate(xDate, dates, columnWidth, hourString);
     x += columnWidth;
     return x;
 };
@@ -228,11 +234,24 @@ const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
         (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
     return newDate;
 };
+const hourStringFromDate = (date, withSeconds) => {
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const formattedHours = hours < 10 ? '0' + hours : hours;
+    const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
+    const formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
+    const hourString = withSeconds ? `${formattedHours}:${formattedMinutes}:${formattedSeconds}` : `${formattedHours}:${formattedMinutes}`;
+    return hourString;
+};
+const hasSeconds = (hourString) => {
+    return hourString.split(":").length === 3;
+};
 /**
  * Method handles event in real time(mousemove) and on finish(mouseup)
  */
-export const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) => handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl);
-const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) => {
+export const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl, svgY) => handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl, svgY);
+const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl, svgY) => {
     const changedTask = Object.assign({}, selectedTask);
     let isChanged = false;
     switch (action) {
@@ -257,9 +276,11 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, time
             if (isChanged) {
                 if (rtl) {
                     changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
+                    changedTask.endHour && (changedTask.endHour = hourStringFromDate(changedTask.end, hasSeconds(changedTask.endHour)));
                 }
                 else {
                     changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+                    changedTask.startHour && (changedTask.startHour = hourStringFromDate(changedTask.start, hasSeconds(changedTask.startHour)));
                 }
                 const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
                 changedTask.progressWidth = progressWidth;
@@ -274,9 +295,11 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, time
             if (isChanged) {
                 if (rtl) {
                     changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
+                    changedTask.startHour && (changedTask.startHour = hourStringFromDate(changedTask.start, hasSeconds(changedTask.startHour)));
                 }
                 else {
                     changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+                    changedTask.endHour && (changedTask.endHour = hourStringFromDate(changedTask.end, hasSeconds(changedTask.endHour)));
                 }
                 const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
                 changedTask.progressWidth = progressWidth;
@@ -290,11 +313,16 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, time
             if (isChanged) {
                 changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
                 changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+                changedTask.startHour && (changedTask.startHour = hourStringFromDate(changedTask.start, hasSeconds(changedTask.startHour)));
+                changedTask.endHour && (changedTask.endHour = hourStringFromDate(changedTask.end, hasSeconds(changedTask.endHour)));
                 changedTask.x1 = newMoveX1;
                 changedTask.x2 = newMoveX2;
                 const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
                 changedTask.progressWidth = progressWidth;
                 changedTask.progressX = progressX;
+                if (changedTask.type === 'task') {
+                    changedTask.y = svgY;
+                }
             }
             break;
         }

package/dist/collection/components/kup-planner/utils/helpers/other.helpers.js

@@ -46,3 +46,6 @@ export const sortTasks = (taskA, taskB) => {
         return 0;
     }
 };
+export const createArrayFromNum = (number) => {
+    return Array.from({ length: number }, (_, index) => index);
+};

package/dist/collection/components/kup-planner/utils/kup-gantt/kup-gantt.css

@@ -156,6 +156,16 @@
   overflow: hidden;
 }
 
+.horizontalContainerScrollable {
+  overflow: auto !important;
+  scrollbar-width: 0;
+}
+
+.horizontalContainerScrollable::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
 .task-gantt {
   overflow: hidden;
 }

package/dist/collection/components/kup-planner/utils/kup-gantt/kup-gantt.js

@@ -9,7 +9,7 @@ export class KupGantt {
         this.tasks = undefined;
         this.headerHeight = 114;
         this.columnWidth = 60;
-        this.listCellWidth = '297px';
+        this.listCellWidth = '300px';
         this.rowHeight = 50;
         this.filter = undefined;
         this.ganttHeight = 0;
@@ -54,6 +54,7 @@ export class KupGantt {
         this.currentTasks = [];
         this.label = undefined;
         this.doubleView = undefined;
+        this.scrollableTaskList = undefined;
         this.setDoubleView = undefined;
         this.barContextMenu = undefined;
         this.scrollXChange = undefined;
@@ -72,6 +73,7 @@ export class KupGantt {
         this.doubleClick = undefined;
         this.delete = undefined;
         this.expanderClick = undefined;
+        this.phaseDrop = undefined;
         this.wrapperRef = undefined;
         this.taskGanttRef = null;
         this.taskListRef = undefined;
@@ -93,6 +95,8 @@ export class KupGantt {
         this.ignoreScrollEvent = false;
         this.currentDateIndicatorContent = undefined;
         this.projectionContent = undefined;
+        this.taskListScrollWidth = undefined;
+        this.taskListScrollX = 0;
     }
     //---- Lifecycle hooks ----
     componentWillLoad() {
@@ -271,6 +275,7 @@ export class KupGantt {
                 newScrollX = this.svgWidth;
             }
             this.scrollX = newScrollX;
+            // this.taskListScrollX = newScrollX;
             window.dispatchEvent(new CustomEvent('gantt-sync-scroll-event', {
                 detail: {
                     componentId: this.ganttId,
@@ -469,6 +474,13 @@ export class KupGantt {
             this.expanderClick(Object.assign(Object.assign({}, task), { hideChildren: !task.hideChildren }));
         }
     }
+    handleTaskListScrollX(event) {
+        const currentTarget = event.currentTarget;
+        this.taskListScrollX = currentTarget.scrollLeft;
+    }
+    handlePhaseDragScroll(scrollY) {
+        this.scrollY = scrollY;
+    }
     setFailedTask(task) {
         this.failedTask = task;
     }
@@ -530,6 +542,7 @@ export class KupGantt {
             barDblClick: this.barDblClick,
             barContextMenu: this.barContextMenu,
             delete: this.delete,
+            phaseDrop: this.phaseDrop
         };
         const tableProps = {
             rowHeight: this.rowHeight,
@@ -548,9 +561,11 @@ export class KupGantt {
             setSelectedTask: this.handleSelectedTask.bind(this),
             expanderClick: this.handleExpanderClick.bind(this),
             TaskListHeader: this.TaskListHeader,
-            TaskListTable: this.TaskListTable,
+            TaskListTable: this.TaskListTable
         };
-        return (h("div", { key: 'f7f84291517b74796502599d7005f0902432da84', class: "gannt-wrapper-main" }, h("div", { key: 'bbf2af26ac05a9c67a82eddedbeb7641c9b75e04', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '138391819549ea113ba52f3d218afbc74e4e92bb', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: 'da4e17e28991a3fbc7793c90d17d42cdb3f29383', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this) }))));
+        return (h("div", { key: 'd2628cb4c523eadcbfa97d83cad48ca0aa817fcb', class: "gannt-wrapper-main" }, h("div", { key: '3b336bd6595402bbb1b3ff87524d74286f63b1bc', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
+                this.taskListScrollWidth = width;
+            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: 'b887edfe9460338576ccc2868f39eef9f8c41e2a', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: 'ab50bf33585da01c741255df86328c9fd3c10a4a', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
     }
     static get is() { return "kup-gantt"; }
     static get originalStyleUrls() {
@@ -679,7 +694,7 @@ export class KupGantt {
                 },
                 "attribute": "list-cell-width",
                 "reflect": false,
-                "defaultValue": "'297px'"
+                "defaultValue": "'300px'"
             },
             "rowHeight": {
                 "type": "number",
@@ -755,7 +770,7 @@ export class KupGantt {
                 "mutable": false,
                 "complexType": {
                     "original": "KupPlannerGanttProps['viewMode']",
-                    "resolved": "\"day\" | \"month\" | \"week\" | \"year\"",
+                    "resolved": "\"day\" | \"hour\" | \"month\" | \"week\" | \"year\"",
                     "references": {
                         "KupPlannerGanttProps": {
                             "location": "import",
@@ -1701,6 +1716,23 @@ export class KupGantt {
                 "attribute": "double-view",
                 "reflect": false
             },
+            "scrollableTaskList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scrollable-task-list",
+                "reflect": false
+            },
             "setDoubleView": {
                 "type": "unknown",
                 "mutable": false,
@@ -2076,6 +2108,27 @@ export class KupGantt {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "phaseDrop": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerGanttProps['phaseDrop']",
+                    "resolved": "(originalPhaseData: KupPlannerTask, originalTaskData: KupPlannerTask, finalPhaseData: KupPlannerTask, destinationData: KupPlannerTask) => boolean | void | Promise<boolean> | Promise<void>",
+                    "references": {
+                        "KupPlannerGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }
@@ -2101,7 +2154,9 @@ export class KupGantt {
             "scrollY": {},
             "ignoreScrollEvent": {},
             "currentDateIndicatorContent": {},
-            "projectionContent": {}
+            "projectionContent": {},
+            "taskListScrollWidth": {},
+            "taskListScrollX": {}
         };
     }
     static get methods() {

package/dist/collection/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { getDaysInMonth, defaultDateTimeFormatters, } from "../kup-planner-time-formatter";
+import { getDaysInMonth, defaultDateTimeFormatters, getCachedDateTimeFormat, getLocalDayOfWeek, getLocaleMonth, } from "../kup-planner-time-formatter";
 export class KupGanttCalendar {
     constructor() {
         this.dateSetup = undefined;
@@ -177,8 +177,38 @@ export class KupGanttCalendar {
         }
         return [topValues, bottomValues];
     }
+    getCalendarValuesForHour() {
+        const topValues = [];
+        const bottomValues = [];
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = 0; i < dates.length; i++) {
+            const date = dates[i];
+            const bottomValue = getCachedDateTimeFormat(this.locale, {
+                hour: 'numeric',
+            }).format(date);
+            bottomValues.push(h("text", { key: date.getTime(), y: this.headerHeight * 0.8, x: this.columnWidth * (i + +this.rtl), class: "calendarBottomText" }, bottomValue));
+            if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
+                const displayDate = dates[i - 1];
+                const topValue = `${getLocalDayOfWeek(displayDate, this.locale, 'long')}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, this.locale)}`;
+                const topPosition = (date.getHours() - 24) / 2;
+                topValues.push({
+                    key: topValue + date.getFullYear(),
+                    value: topValue,
+                    x1Line: this.columnWidth * i,
+                    y1Line: 0,
+                    y2Line: topDefaultHeight,
+                    xText: this.columnWidth * (i + topPosition),
+                    yText: topDefaultHeight * 0.9,
+                });
+            }
+        }
+        return [topValues, bottomValues];
+    }
     getTopAndBottomValues() {
         switch (this.dateSetup.viewMode) {
+            case 'hour':
+                return this.getCalendarValuesForHour();
             case 'day':
                 return this.getCalendarValuesForDay();
             case 'week':
@@ -195,7 +225,7 @@ export class KupGanttCalendar {
         this.simplifiedHeader =
             this.singleLineHeader && this.dateSetup.viewMode !== 'year';
         const [topValues, bottomValues] = this.getTopAndBottomValues();
-        return (h("svg", { key: '171a0a61231f0c68b1df22766f06d5c6a6ee6488', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { key: 'bb77cf35555bfe7e4e9dffe476de550b06253235', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { key: 'b99cc1d617b4ad05fa319423ac985a078d53794d', x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
+        return (h("svg", { key: '7a19cec75e555a4fd92acca667c464df43370468', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { key: 'a7e72bfedfefae5813d339b99d78bf7138354ff5', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { key: '34f50e350bd20b69fe0a7bfc4744b27dfeb27a12', x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
             ? topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y2Line * 2, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value))))
             : topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y1Line, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value)))), this.currentDateIndicator && (
         // current date indicator

package/dist/collection/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.css

@@ -185,4 +185,8 @@
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
+}
+
+.ghost-preview {
+  opacity: 0.5;
 }