@ibiz-template/vue3-components 0.7.41-alpha.13 → 0.7.41-alpha.15

package/es/control/calendar/components/calendar-daily/use-calendar-daily.mjs

@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue';
 import '../util/index.mjs';
-import { isToday, handleTimeRange, handleBkColor, fade, handleEVentClick } from '../util/util.mjs';
+import { checkDateRangeIncludes, handleTimeRange, isToday, handleBkColor, fade, handleEmit } from '../util/util.mjs';
 
 "use strict";
 const useCalendarDaily = (props, emit) => {
@@ -24,7 +24,8 @@ const useCalendarDaily = (props, emit) => {
   };
   const handleDrag = (event) => {
     const heightChange = event.clientY - initialMouseY + initialHeight;
-    resizableHand.value.style.height = "".concat(heightChange, "px");
+    if (heightChange < 320)
+      resizableHand.value.style.height = "".concat(heightChange, "px");
   };
   const events = computed(() => {
     return computeUIEvents(
@@ -34,14 +35,17 @@ const useCalendarDaily = (props, emit) => {
       calendarDaily.value
     );
   });
-  const computeUIEvents = (events2, curDate, legends2, calendarDaily2) => {
+  const computeUIEvents = (_events, curDate, _legends, _calendarDaily) => {
     const tempEvents = [];
     const tempColors = /* @__PURE__ */ new Map();
     let contentWidth = 0;
-    if (calendarDaily2) {
-      contentWidth = parseInt(window.getComputedStyle(calendarDaily2).width, 10);
+    if (_calendarDaily) {
+      contentWidth = parseInt(
+        window.getComputedStyle(_calendarDaily).width,
+        10
+      );
     }
-    events2.sort((a, b) => {
+    _events.sort((a, b) => {
       const beginTimeDifference = new Date(a.beginTime).getTime() - new Date(b.beginTime).getTime();
       let type;
       if (beginTimeDifference === 0) {
@@ -51,18 +55,33 @@ const useCalendarDaily = (props, emit) => {
       }
       return type;
     });
-    const tempArray = events2.filter((event) => {
-      return event && event.beginTime && event.endTime && isToday(curDate, event.beginTime) && isToday(curDate, event.endTime);
+    const tempArray = [];
+    _events.forEach((event) => {
+      const targetLegend = _legends.find(
+        (legendItem) => Object.is(legendItem.id, event.itemType)
+      );
+      if (!targetLegend || !targetLegend.isShow)
+        return;
+      if (event && event.beginTime && checkDateRangeIncludes(event.beginTime, event.endTime, curDate)) {
+        const item = { ...event, targetLegend };
+        const targetEvent = selectedData.value.find(
+          (tempItem) => tempItem.id === event.id
+        );
+        if (targetEvent) {
+          Object.assign(item, { isSelectedEvent: true });
+        } else {
+          Object.assign(item, { isSelectedEvent: false });
+        }
+        if (!event.endTime && event.beginTime) {
+          Object.assign(item, { endTime: event.beginTime });
+        }
+        tempArray.push(item);
+      }
     });
     tempArray.forEach((event, index) => {
+      const { targetLegend } = event;
       const tempItem = {};
       Object.assign(tempItem, event);
-      const targetLegend = legends2.find(
-        (legendItem) => Object.is(legendItem.id, event.itemType)
-      );
-      const targetEvent = selectedData.value.find(
-        (item) => item.id === event.id
-      );
       Object.assign(tempItem, { zIndex: index + 1 });
       const length = tempArray.length;
       const itemWidth = (contentWidth - 90) / length;
@@ -74,25 +93,40 @@ const useCalendarDaily = (props, emit) => {
         styleLeft = "".concat(index * 100, "px");
       }
       Object.assign(tempItem, { width, styleLeft });
-      if (event.beginTime && event.endTime) {
-        const height = handleEventHeight(
-          event.beginTime,
-          event.endTime,
-          curDate
-        );
-        const timeRange = handleTimeRange(
-          event.beginTime,
-          event.endTime,
-          "HH:mm"
-        );
-        Object.assign(tempItem, { height, timeRange });
-      }
-      if (event.beginTime) {
-        const { styleTop } = handleTopOrCurVal(new Date(event.beginTime));
-        Object.assign(tempItem, { styleTop });
+      let height = "auto";
+      let styleTop = 60;
+      const timeRange = handleTimeRange(
+        event.beginTime,
+        event.endTime,
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      if (isToday(event.beginTime, event.endTime)) {
+        height = getEventHeight(event.beginTime, event.endTime);
+        const tempVal = handleTopOrCurVal(new Date(event.beginTime));
+        styleTop = tempVal.styleTop;
+      } else if (isToday(event.beginTime, curDate) && !isToday(event.endTime, curDate)) {
+        const endDate = new Date(curDate);
+        endDate.setHours(23, 59, 59, 0);
+        height = getEventHeight(event.beginTime, endDate);
+        const tempVal = handleTopOrCurVal(new Date(event.beginTime));
+        styleTop = tempVal.styleTop;
+      } else if (isToday(event.endTime, curDate) && !isToday(event.beginTime, curDate)) {
+        const beginDate = new Date(curDate);
+        beginDate.setHours(0, 0, 0, 0);
+        height = getEventHeight(beginDate, event.endTime);
+        const tempVal = handleTopOrCurVal(new Date(beginDate));
+        styleTop = tempVal.styleTop;
+      } else {
+        const date = new Date(curDate);
+        const beginDate = new Date(date.setHours(0, 0, 0, 0));
+        const endDate = new Date(date.setHours(23, 59, 59, 59));
+        height = getEventHeight(beginDate, endDate);
+        const tempVal = handleTopOrCurVal(new Date(beginDate));
+        styleTop = tempVal.styleTop;
       }
+      Object.assign(tempItem, { height, styleTop, timeRange });
       if (!(event == null ? void 0 : event.bkColor)) {
-        const bkColor = targetLegend ? targetLegend.bkcolor : handleBkColor(tempColors, event.itemType);
+        const bkColor = targetLegend && targetLegend.bkcolor || handleBkColor(tempColors, event.itemType);
         Object.assign(tempItem, { bkColor });
       }
       if (tempItem.bkColor) {
@@ -101,27 +135,26 @@ const useCalendarDaily = (props, emit) => {
           bkColorFade: tempBkColor
         });
       }
+      if (!(event == null ? void 0 : event.color)) {
+        const tempColor = targetLegend && targetLegend.color;
+        Object.assign(tempItem, {
+          color: tempColor
+        });
+      }
       if ((tempItem == null ? void 0 : tempItem.height) && (tempItem == null ? void 0 : tempItem.height) > 10) {
         const border = "1px solid #FFF";
         Object.assign(tempItem, { border });
       } else {
         Object.assign(tempItem, { border: "none" });
       }
-      if (targetEvent) {
-        Object.assign(tempItem, { isSelectedEvent: true });
-      } else {
-        Object.assign(tempItem, { isSelectedEvent: false });
-      }
-      if (targetLegend && targetLegend.isShow || !targetLegend) {
-        tempEvents.push(tempItem);
-      }
+      tempEvents.push(tempItem);
     });
     tempColors.clear();
     return tempEvents;
   };
-  const handleEventHeight = (startTime, endTime, date) => {
+  const getEventHeight = (startTime, endTime) => {
     let height = 1;
-    if (isToday(startTime, date) && isToday(endTime, date)) {
+    if (isToday(startTime, endTime)) {
       const difference = new Date(endTime).getTime() - new Date(startTime).getTime();
       height = Math.floor(difference / (1e3 * 60));
     }
@@ -161,8 +194,25 @@ const useCalendarDaily = (props, emit) => {
     }
     return tempDrawData;
   };
-  const eventClick = async (item, location) => {
-    const res = await handleEVentClick(
+  const handleEventClick = (item, location) => {
+    const res = handleEmit(
+      "eventClick",
+      item,
+      location,
+      props.events,
+      multiple.value,
+      selectedData.value,
+      emit
+    );
+    const { tempSelectedData, isSelectedEvent } = res;
+    if (!isSelectedEvent) {
+      Object.assign(item, { isSelectedEvent });
+    }
+    selectedData.value = tempSelectedData;
+  };
+  const handleEventDblClick = (item, location) => {
+    const res = handleEmit(
+      "eventDblClick",
       item,
       location,
       props.events,
@@ -176,6 +226,9 @@ const useCalendarDaily = (props, emit) => {
     }
     selectedData.value = tempSelectedData;
   };
+  const eventContextmenu = async (item, evt) => {
+    emit("eventContextmenu", { evt, data: [item] });
+  };
   return {
     drawData,
     curTimeTimer,
@@ -188,7 +241,9 @@ const useCalendarDaily = (props, emit) => {
     handleCurTime,
     handleDrag,
     handleDragStart,
-    eventClick,
+    handleEventClick,
+    handleEventDblClick,
+    eventContextmenu,
     initDrawData
   };
 };

package/es/control/calendar/components/calendar-week/calendar-week.css

@@ -1 +1 @@
-.ibiz-calendar-week{display:flex;flex:1;flex-direction:column;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__header{position:relative;z-index:100;display:flex;flex-direction:column;width:calc(100% - 7px);height:150px;min-height:150px}.ibiz-calendar-week__header--date-cell-first{width:90px;max-width:90px;height:100%;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-cell-first{display:flex;align-items:center;justify-content:center;width:90px;max-width:90px;height:100%;padding-left:40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--dates{display:flex;justify-content:space-between;width:100%;height:96px}.ibiz-calendar-week__header--date-cell{display:flex;flex:1;flex-direction:column;align-items:center;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--date-week{width:100%;height:26px;margin-top:6px;text-align:center}.ibiz-calendar-week__header--date-day{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-top:6px;font-weight:600;border:none;border-radius:50%}.ibiz-calendar-week__header--date-day.is-today{color:#fff;background:var(--ibiz-color-primary)}.ibiz-calendar-week__header--events{display:flex;flex:1;justify-content:space-between;width:100%;height:30px;overflow:hidden}.ibiz-calendar-week__header--event-cell{position:relative;top:0;left:0;flex:1;width:100%;height:100%;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-box{position:absolute}.ibiz-calendar-week__header--event-content{position:relative;z-index:2;width:100%;height:22px;padding-left:4px;cursor:pointer;background-color:var(--ibiz-color-primary);border:none;border-radius:4px;outline:0}.ibiz-calendar-week__header--event-summary{width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__header--resizable-handle{position:absolute;bottom:-6px;display:flex;align-items:center;width:100%;height:10PX;cursor:row-resize}.ibiz-calendar-week__header--resize-line{width:100%;height:1px;background-color:var(--ibiz-color-border)}.ibiz-calendar-week__header--check{position:absolute;top:50%;right:6px;color:var(--ibiz-color-primary);transform:translate(0,-50%)}.ibiz-calendar-week__scroll-area{flex:1;overflow:hidden scroll}.ibiz-calendar-week__time-pane{position:relative;display:flex;flex:1 1 0%;width:calc(100% - 3px);height:auto}.ibiz-calendar-week__time-pane--time-labels{position:sticky;left:0;width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-label{height:22px;margin-top:38px;line-height:22px;text-align:left}.ibiz-calendar-week__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-week__time-pane--time-columns{position:relative;flex:1;padding-bottom:60px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column{height:60px;border-top:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column:nth-child(1){border-top:none}.ibiz-calendar-week__time-pane--time-column-last{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__time-pane--container-scroll{position:relative;top:0;width:100%;height:100%;overflow:auto;overflow:hidden}.ibiz-calendar-week__time-pane--event-box{position:absolute;width:auto;height:auto;padding:0 2px}.ibiz-calendar-week__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-week__time-pane--event-content:active{animation:pulse 1s linear}.ibiz-calendar-week__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-week__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-week__event-popover{position:relative;width:auto;height:auto;padding:0}.ibiz-calendar-week__event-popover.el-popover.el-popper{padding:24px 12px 8px}.ibiz-calendar-week__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-week__event-popover--scroll{width:auto;min-width:450px;height:auto;min-height:200px;overflow:auto}.ibiz-calendar-week__event-popover--close{position:absolute;top:8px;right:8px;cursor:pointer}.ibiz-calendar-week__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-week__event-popover--close:hover .el-icon svg{fill:#fff}.ibiz-calendar-week__event-popover .el-icon{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;font-size:20px}.ibiz-calendar-week__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes move{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
+.ibiz-calendar-week{display:flex;flex:1;flex-direction:column;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__header{position:relative;z-index:100;display:flex;flex-direction:column;width:100%;height:150px;min-height:150px}.ibiz-calendar-week__header--date-cell-first{width:90px;max-width:90px;height:100%;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-cell-first{display:flex;align-items:center;justify-content:center;width:90px;max-width:90px;height:100%;padding-left:40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--dates{display:flex;justify-content:space-between;width:calc(100% - 7px);height:96px}.ibiz-calendar-week__header--date-cell{display:flex;flex:1;flex-direction:column;align-items:center;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--date-week{width:100%;height:26px;margin-top:6px;text-align:center}.ibiz-calendar-week__header--date-day{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-top:6px;font-weight:600;border:none;border-radius:50%}.ibiz-calendar-week__header--date-day.is-today{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-calendar-week__header--events{display:flex;flex:1;width:100%;height:30px;overflow:hidden;position:relative}.ibiz-calendar-week__header--event-container{width:calc(100% - 97px);height:100%;overflow-y:auto;overflow-x:hidden}.ibiz-calendar-week__header--event-container::-webkit-scrollbar{display:none}.ibiz-calendar-week__header--container-scroll{display:flex;height:auto}.ibiz-calendar-week__header--event-cell{position:relative;top:0;left:0;flex:1;width:100%;height:auto}.ibiz-calendar-week__header--event-cell::after{content:"";display:block;position:absolute;top:0;right:0;width:1px;height:var(--ibiz-calendar-week-header-event-scroll-real-height);border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-box{position:absolute;display:flex;min-width:32px}.ibiz-calendar-week__header--event-box:has(.ibiz-calendar-week__header--check){min-width:50px}.ibiz-calendar-week__header--event-content{position:relative;z-index:2;width:100%;height:100%;min-height:22px;padding-left:4px;cursor:pointer;background-color:var(--ibiz-color-primary);border:none;outline:0}.ibiz-calendar-week__header--event-content.is-selected-event{padding-right:20px}.ibiz-calendar-week__header--event-summary{width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__header--resizable-handle{position:absolute;bottom:-6px;display:flex;align-items:center;width:calc(100% - 7px);height:10px;cursor:row-resize}.ibiz-calendar-week__header--resize-line{width:100%;height:1px;background-color:var(--ibiz-color-border)}.ibiz-calendar-week__header--check{position:absolute;top:50%;right:6px;color:var(--ibiz-color-primary);transform:translate(0,-50%)}.ibiz-calendar-week__scroll-area{flex:1;overflow:hidden scroll}.ibiz-calendar-week__time-pane{position:relative;display:flex;flex:1 1 0%;width:calc(100% - 3px);height:auto}.ibiz-calendar-week__time-pane--time-labels{position:sticky;left:0;width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-label{height:22px;margin-top:38px;line-height:22px;text-align:left}.ibiz-calendar-week__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-week__time-pane--time-columns{position:relative;flex:1;padding-bottom:60px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column{height:60px;border-top:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column:nth-child(1){border-top:none}.ibiz-calendar-week__time-pane--time-column-last{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__time-pane--container-scroll{position:relative;top:0;width:100%;height:100%;overflow:auto;overflow:hidden}.ibiz-calendar-week__time-pane--event-box{position:absolute;width:auto;height:auto;padding:0 2px}.ibiz-calendar-week__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-week__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-week__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-week__event-popover{position:relative;width:auto;height:auto;padding:0}.ibiz-calendar-week__event-popover.el-popover.el-popper{padding:8px}.ibiz-calendar-week__event-popover:has(.ibiz-control-calendar-item-default){display:none!important}.ibiz-calendar-week__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-week__event-popover--scroll{width:auto;min-width:200px;height:auto;max-height:80%;overflow:auto;pointer-events:none}.ibiz-calendar-week__event-popover--scroll .ibiz-control-calendar-item:last-child{margin-bottom:0}.ibiz-calendar-week__event-popover--scroll .ibiz-control-calendar-item.is-active{background-color:transparent;border-color:transparent}.ibiz-calendar-week__event-popover--close{position:absolute;top:8px;right:8px;display:none;cursor:pointer}.ibiz-calendar-week__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-week__event-popover--close:hover .el-icon svg{fill:var(--ibiz-color-white)}.ibiz-calendar-week__event-popover .el-icon{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;font-size:20px}.ibiz-calendar-week__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}.ibiz-calendar-week-scroll-bar{position:absolute;top:var(--ibiz-calendar-week-header-event-scroll-bar-thumb-top);right:0;z-index:10;width:4px;height:100%;border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-calendar-week-scroll-bar__thumb{width:4px;height:var(--ibiz-calendar-week-header-event-scroll-bar-thumb-height);cursor:pointer;background-color:var(--ibiz-color-fill-2);border-radius:var(--ibiz-border-radius-extra-small)}

package/es/control/calendar/components/calendar-week/calendar-week.d.ts

@@ -1,17 +1,23 @@
 import './calendar-week.scss';
 export declare const CalendarWeek: import("vue").DefineComponent<import("@ibiz-template/core").IApiParams, {
     ns: import("@ibiz-template/core").Namespace;
+    thumbHeight: import("vue").Ref<number>;
     calendarWeek: import("vue").Ref<any>;
+    scrollTop: import("vue").Ref<number>;
+    realHeight: import("vue").Ref<number>;
+    headerEventRef: import("vue").Ref<any>;
     renderHeader: () => JSX.Element;
     renderContent: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     pick: (value: import("dayjs").Dayjs) => boolean;
     eventClick: (value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
     eventDblClick: (value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
+    eventContextmenu: (_value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<import("@ibiz-template/core").IApiParams>> & {
     onPick?: ((value: import("dayjs").Dayjs) => any) | undefined;
     onEventClick?: ((value: import("@ibiz-template/core").IApiParams) => any) | undefined;
     onEventDblClick?: ((value: import("@ibiz-template/core").IApiParams) => any) | undefined;
+    onEventContextmenu?: ((_value: import("@ibiz-template/core").IApiParams) => any) | undefined;
 }, {
     [x: string]: any;
     [x: symbol]: any;

package/es/control/calendar/components/calendar-week/calendar-week.mjs

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
+import { watch, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import '../interface/index.mjs';
@@ -28,15 +28,24 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
       selectedData,
       legends,
       rowsHeader,
-      eventClick,
+      headerEventRef,
+      thumbHeight,
+      scrollTop,
+      realHeight,
+      isScroll,
+      handleEventClick,
+      handleEventDblClick,
       handleDrag,
       handleDragStart,
+      handleDragEnd,
       handleCurTime,
       initDrawData,
-      handleUIEvents
+      handleUIEvents,
+      onScrollbarMouseDown,
+      onHeaderEventScroll,
+      initHeaderEventScroll,
+      eventContextmenu
     } = useCalendarWeek(props, emit);
-    const hoverItem = ref("");
-    const visible = ref(false);
     watch(() => props.selectedData, () => {
       if (props.selectedData && props.selectedData.length > 0) {
         const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
@@ -57,6 +66,7 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
     });
     watch(() => props.events, () => {
       handleUIEvents();
+      initHeaderEventScroll();
     }, {
       immediate: true,
       deep: true
@@ -73,60 +83,67 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
         curTimeTimer.value = null;
       }
     });
-    const onMouseenter = (event) => {
-      hoverItem.value = String(event.id);
-      visible.value = true;
-    };
-    const onClickCalendarItem = () => {
-      visible.value = false;
-    };
-    const onMouseleavee = () => {
-      hoverItem.value = "";
-      visible.value = false;
+    const renderScrollbar = () => {
+      return createVNode("div", {
+        "class": ns.b("scroll-bar")
+      }, [createVNode("div", {
+        "class": ns.be("scroll-bar", "thumb"),
+        "onMousedown": onScrollbarMouseDown
+      }, null)]);
     };
     const renderEventItem = (location, eventBoxStyle, eventContentStyle, event, index, slotNme, classEName) => {
       var _a;
+      let title = "".concat(event.text || "");
+      if (location === "header" && event.timeRange)
+        title = "".concat(title, "     ").concat(event.timeRange || "");
+      title = showTitle(title) || "";
+      if (props.showDetail)
+        title = "";
       return createVNode("div", {
         "key": index,
         "class": [ns.em(classEName, "event-box")],
-        "style": eventBoxStyle,
-        "onMouseenter": () => onMouseenter(event),
-        "onMouseleave": onMouseleavee,
-        "onClick": onClickCalendarItem
+        "style": eventBoxStyle
       }, [createVNode("button", {
-        "class": [ns.em(classEName, "event-content"), event.isSelectedEvent ? "is-selected-event" : "", event.classname],
+        "class": [ns.em(classEName, "event-content"), ns.is("selected-event", !!event.isSelectedEvent), event.classname],
         "onClick": () => {
-          eventClick(event, "head");
+          handleEventClick(event, "head");
+        },
+        "onDblclick": () => {
+          handleEventDblClick(event, "head");
         },
-        "style": eventContentStyle
+        "onContextmenu": (e) => eventContextmenu(event, e),
+        "style": eventContentStyle,
+        "title": title
       }, [slots[slotNme] ? (_a = slots[slotNme]) == null ? void 0 : _a.call(slots, {
         data: event
       }) : createVNode("div", {
-        "class": [ns.em(classEName, "event-summary"), event.classname],
-        "title": showTitle(location === "header" ? "".concat(event.text || "", " ").concat(event.timeRange || "") : "")
+        "class": [ns.em(classEName, "event-summary"), event.classname]
       }, [event.icon && createVNode("span", {
         "class": [event.icon, ns.em(classEName, "event-icon")],
         "style": {
           color: event.bkColor
         }
       }, null), event.text && createVNode("span", {
-        "class": [ns.em(classEName, "event-name")],
-        "title": event.text
+        "class": [ns.em(classEName, "event-name")]
       }, [event.text])]), location === "header" && event.isSelectedEvent ? createVNode("span", {
         "class": ["fa fa-check", ns.em(classEName, "check")]
       }, null) : ""])]);
     };
-    const renderPopover = (content, event) => {
+    const renderPopover = (content, event, placement) => {
       if (!props.showDetail) {
         return content;
       }
+      const _tempEvent = {
+        ...event,
+        color: "",
+        bkColor: ""
+      };
       return createVNode(resolveComponent("el-popover"), {
-        "visible": visible.value && event.id === hoverItem.value,
         "show-after": 100,
         "offset": 4,
         "width": "auto",
         "popper-class": [ns.e("event-popover")],
-        "placement": "right-start"
+        "placement": placement || "right-start"
       }, {
         reference: () => content,
         default: () => {
@@ -140,7 +157,7 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
           }, null), createVNode("div", {
             "class": [ns.em("event-popover", "scroll")]
           }, [(slots == null ? void 0 : slots.event) ? (_a = slots.event) == null ? void 0 : _a.call(slots, {
-            data: event
+            data: _tempEvent
           }) : createVNode("div", {
             "class": [ns.em("event-popover", "content")]
           }, ["".concat(event.text || "", " ").concat(event.timeRange || "")])])]);
@@ -167,7 +184,15 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
         "class": [ns.em("header", "events")]
       }, [createVNode("div", {
         "class": [ns.em("header", "event-cell-first")]
-      }, [ibiz.i18n.t("control.calendar.calendardaily.tip")]), rowsHeader.value.map((item) => createVNode("div", {
+      }, [ibiz.i18n.t("control.calendar.calendardaily.tip")]), createVNode("div", {
+        "class": ns.em("header", "event-container"),
+        "ref": (el) => {
+          headerEventRef.value = el;
+        },
+        "onScroll": onHeaderEventScroll
+      }, [createVNode("div", {
+        "class": ns.em("header", "container-scroll")
+      }, [rowsHeader.value.map((item) => createVNode("div", {
         "class": [ns.em("header", "event-cell")]
       }, [item.map((event, index) => {
         const eventBoxStyle = {
@@ -176,15 +201,18 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
           width: "".concat(event == null ? void 0 : event.width)
         };
         const eventContentStyle = {
-          color: event.color,
           background: event.bkColorFade
         };
-        return event.isShow ? renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "header") : "";
-      })]))]), createVNode("div", {
+        if (!event.isShow)
+          return "";
+        const tempContent = renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "header");
+        return renderPopover(tempContent, event, "bottom");
+      })]))]), isScroll.value && renderScrollbar()])]), createVNode("div", {
         "class": ns.em("header", "resizable-handle"),
         "draggable": "true",
         "onDrag": (event) => handleDrag(event),
-        "onDragstart": (event) => handleDragStart(event)
+        "onDragstart": (event) => handleDragStart(event),
+        "onDragend": () => handleDragEnd()
       }, [createVNode("div", {
         "class": ns.em("header", "resize-line")
       }, null)])]);
@@ -224,8 +252,7 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
         }
         const eventContentStyle = {
           background: event.bkColorFade,
-          "border-left": "3px solid ".concat(event.bkColor),
-          color: event.color
+          "border-left": "3px solid ".concat(event.bkColor)
         };
         const tempContent = renderEventItem("content", eventBoxStyle, eventContentStyle, event, index, "", "time-pane");
         return renderPopover(tempContent, event);
@@ -233,7 +260,11 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
     };
     return {
       ns,
+      thumbHeight,
       calendarWeek,
+      scrollTop,
+      realHeight,
+      headerEventRef,
       renderHeader,
       renderContent
     };
@@ -243,7 +274,12 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
       "ref": (el) => {
         this.calendarWeek = el;
       },
-      "class": this.ns.b()
+      "class": this.ns.b(),
+      "style": {
+        ["".concat(this.ns.cssVarBlockName("header-event-scroll-bar-thumb-height"))]: "".concat(this.thumbHeight, "px"),
+        ["".concat(this.ns.cssVarBlockName("header-event-scroll-bar-thumb-top"))]: "".concat(this.scrollTop, "px"),
+        ["".concat(this.ns.cssVarBlockName("header-event-scroll-real-height"))]: "".concat(this.realHeight, "px")
+      }
     }, [this.renderHeader(), this.renderContent()]);
   }
 });

package/es/control/calendar/components/calendar-week/index.d.ts

@@ -1,16 +1,22 @@
 export declare const IBizCalendarWeek: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<import("@ibiz-template/core").IApiParams, {
     ns: import("@ibiz-template/core").Namespace;
+    thumbHeight: import("vue").Ref<number>;
     calendarWeek: import("vue").Ref<any>;
+    scrollTop: import("vue").Ref<number>;
+    realHeight: import("vue").Ref<number>;
+    headerEventRef: import("vue").Ref<any>;
     renderHeader: () => JSX.Element;
     renderContent: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     pick: (value: import("dayjs").Dayjs) => boolean;
     eventClick: (value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
     eventDblClick: (value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
+    eventContextmenu: (_value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<import("@ibiz-template/core").IApiParams>> & {
     onPick?: ((value: import("dayjs").Dayjs) => any) | undefined;
     onEventClick?: ((value: import("@ibiz-template/core").IApiParams) => any) | undefined;
     onEventDblClick?: ((value: import("@ibiz-template/core").IApiParams) => any) | undefined;
+    onEventContextmenu?: ((_value: import("@ibiz-template/core").IApiParams) => any) | undefined;
 }, {
     [x: string]: any;
     [x: symbol]: any;

package/es/control/calendar/components/calendar-week/use-calendar-week.d.ts

@@ -150,10 +150,21 @@ export declare const useCalendarWeek: (props: CalendarWeekProps, emit: SetupCont
     legends: import("vue").Ref<any>;
     rowsHeader: import("vue").Ref<import("@ibiz-template/core").IApiData[]>;
     popVisible: import("vue").Ref<boolean>;
+    headerEventRef: import("vue").Ref<any>;
+    thumbHeight: import("vue").Ref<number>;
+    realHeight: import("vue").Ref<number>;
+    scrollTop: import("vue").Ref<number>;
+    isScroll: import("vue").Ref<boolean>;
     handleCurTime: () => void;
     handleDrag: (event: DragEvent) => void;
     handleDragStart: (event: DragEvent) => void;
-    eventClick: (item: IUIEvent, location: string) => Promise<void>;
+    handleDragEnd: () => void;
+    handleEventClick: (item: IUIEvent, location: string) => void;
+    handleEventDblClick: (item: IUIEvent, location: string) => void;
     initDrawData: () => string[];
     handleUIEvents: () => void;
+    onScrollbarMouseDown: (event: MouseEvent) => void;
+    onHeaderEventScroll: (event: Event) => void;
+    initHeaderEventScroll: () => void;
+    eventContextmenu: (item: IUIEvent, evt: MouseEvent) => Promise<void>;
 };