@ibiz-template/vue3-components 0.7.41-alpha.14 → 0.7.41-alpha.16

package/lib/control/calendar/components/calendar-week/use-calendar-week.cjs

@@ -30,7 +30,11 @@ const useCalendarWeek = (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 handleDragEnd = () => {
+    initHeaderEventScroll();
   };
   const getDateRanges = (firstDate, lastDate) => {
     const firstDay = new Date(firstDate);
@@ -43,12 +47,153 @@ const useCalendarWeek = (props, emit) => {
     }
     return dateArray;
   };
+  const handleEventItemUIData = (_event, _weekDay, tempColors, _length, _index) => {
+    const tempEventContent = {};
+    const { targetLegend } = _event;
+    Object.assign(tempEventContent, _event);
+    Object.assign(tempEventContent, { zIndex: _index + 1 });
+    const percentage = Number((100 / _length).toFixed(3));
+    const width = "".concat(percentage, "%");
+    const styleLeft = "".concat(_index * percentage, "%");
+    Object.assign(tempEventContent, { width, styleLeft });
+    let height = "auto";
+    let styleTop = 60;
+    const timeRange = util.handleTimeRange(
+      _event.beginTime,
+      _event.endTime,
+      "YYYY-MM-DD HH:mm:ss"
+    );
+    if (util.isToday(_event.beginTime, _event.endTime)) {
+      height = getEventHeight(_event.beginTime, _event.endTime);
+      const tempVal = handleTopOrCurVal(new Date(_event.beginTime));
+      styleTop = tempVal.styleTop;
+    } else if (util.isToday(_event.beginTime, _weekDay.date) && !util.isToday(_event.endTime, _weekDay.date)) {
+      const endDate = new Date(_weekDay.date);
+      endDate.setHours(23, 59, 59, 0);
+      height = getEventHeight(_event.beginTime, endDate);
+      const tempVal = handleTopOrCurVal(new Date(_event.beginTime));
+      styleTop = tempVal.styleTop;
+    } else if (util.isToday(_event.endTime, _weekDay.date) && !util.isToday(_event.beginTime, _weekDay.date)) {
+      const beginDate = new Date(_weekDay.date);
+      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(_weekDay.date);
+      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(tempEventContent, { height, styleTop, timeRange });
+    if (!(_event == null ? void 0 : _event.bkColor)) {
+      const bkColor = targetLegend && targetLegend.bkcolor || util.handleBkColor(tempColors, _event.itemType);
+      Object.assign(tempEventContent, { bkColor });
+    }
+    if (tempEventContent.bkColor) {
+      const tempBkColor = util.fade(tempEventContent.bkColor, 10);
+      Object.assign(tempEventContent, {
+        bkColorFade: tempBkColor
+      });
+    }
+    if (!(_event == null ? void 0 : _event.color)) {
+      const tempColor = targetLegend && targetLegend.color;
+      Object.assign(tempEventContent, {
+        color: tempColor
+      });
+    }
+    if ((tempEventContent == null ? void 0 : tempEventContent.height) && (tempEventContent == null ? void 0 : tempEventContent.height) > 10) {
+      const border = "1px solid #FFF";
+      Object.assign(tempEventContent, { border });
+    } else {
+      Object.assign(tempEventContent, { border: "none" });
+    }
+    return tempEventContent;
+  };
+  const handleHeaderEventItemUIData = (_event, _weekDay, _firstDay, _lastDay, _length, _index, _hostIndex) => {
+    const tempEventHeader = {};
+    Object.assign(tempEventHeader, _event);
+    Object.assign(tempEventHeader, {
+      width: 0,
+      styleLeft: 0
+    });
+    let headerEVentWidth = 0;
+    let headerEventLeft = 0;
+    if (util.isDateInCurWeek(_event.beginTime, _firstDay, _lastDay) && util.isDateInCurWeek(_event.endTime, _firstDay, _lastDay)) {
+      const eventWidth = handleHeaderEventWidth(
+        _event.beginTime,
+        _event.endTime,
+        _firstDay,
+        _lastDay
+      );
+      const eventLeft = handleHeaderEventLeft(
+        _event.beginTime,
+        _firstDay,
+        _lastDay
+      );
+      headerEVentWidth = "".concat(eventWidth, "%");
+      headerEventLeft = "".concat(eventLeft, "%");
+    } else if (util.isDateInCurWeek(_event.beginTime, _firstDay, _lastDay) && !util.isDateInCurWeek(_event.endTime, _firstDay, _lastDay)) {
+      const eventWidth = handleHeaderEventWidth(
+        _event.beginTime,
+        _lastDay,
+        _firstDay,
+        _lastDay
+      );
+      const eventLeft = handleHeaderEventLeft(
+        _event.beginTime,
+        _firstDay,
+        _lastDay
+      );
+      headerEVentWidth = "".concat(eventWidth, "%");
+      headerEventLeft = "".concat(eventLeft, "%");
+    } else if (util.isDateInCurWeek(_event.endTime, _firstDay, _lastDay) && !util.isDateInCurWeek(_event.beginTime, _firstDay, _lastDay)) {
+      const eventWidth = handleHeaderEventWidth(
+        _firstDay,
+        _event.endTime,
+        _firstDay,
+        _lastDay
+      );
+      headerEVentWidth = "".concat(eventWidth, "%");
+      headerEventLeft = "".concat(0, "%");
+    } else if (!util.isDateInCurWeek(_event.endTime, _firstDay, _lastDay) && !util.isDateInCurWeek(_event.beginTime, _firstDay, _lastDay) && util.isTimeGreaterThan(_firstDay, _event.beginTime) && util.isTimeGreaterThan(_event.endTime, _firstDay)) {
+      const eventWidth = handleHeaderEventWidth(
+        _firstDay,
+        _lastDay,
+        _firstDay,
+        _lastDay
+      );
+      headerEVentWidth = "".concat(eventWidth, "%");
+      headerEventLeft = "".concat(0, "%");
+    }
+    Object.assign(tempEventHeader, {
+      width: headerEVentWidth,
+      styleLeft: headerEventLeft
+    });
+    let eventHeaderIsShow = false;
+    if (util.isDateInCurWeek(_event.beginTime, _firstDay, _lastDay) && util.isToday(_event.beginTime, _weekDay.date)) {
+      eventHeaderIsShow = true;
+    } else if (_hostIndex === 0) {
+      eventHeaderIsShow = true;
+    }
+    const _curDate = new Date(_weekDay.date);
+    if (!util.checkDateRangeIncludes(_event.beginTime, _event.endTime, _curDate)) {
+      eventHeaderIsShow = false;
+    }
+    Object.assign(tempEventHeader, {
+      isShow: eventHeaderIsShow
+    });
+    return tempEventHeader;
+  };
   const handleUIEvents = () => {
     const events = props.events;
     const curDate = props == null ? void 0 : props.selectedDay;
     const tempColors = /* @__PURE__ */ new Map();
     const { firstDay, lastDay } = util.getCurWeekDates(curDate);
     const tempArray = [];
+    const tempHeaderArray = [];
     const tempEvents = [];
     const tempRowsHeader = [];
     weekDays.value = [];
@@ -78,12 +223,18 @@ const useCalendarWeek = (props, emit) => {
       const item = { date, day, caption, isActivate };
       weekDays.value.push(item);
       tempArray.push([]);
+      tempHeaderArray.push([]);
       tempEvents.push([]);
       tempRowsHeader.push([]);
     }
     events.forEach((event) => {
+      const targetLegend = legends.value.find(
+        (legendItem) => Object.is(legendItem.id, event.itemType)
+      );
+      if (!targetLegend || !targetLegend.isShow)
+        return;
       if (event.beginTime) {
-        const item = {};
+        const item = { targetLegend };
         Object.assign(item, event);
         const targetEvent = selectedData.value.find(
           (tempItem) => tempItem.id === event.id
@@ -96,6 +247,13 @@ const useCalendarWeek = (props, emit) => {
         if (!event.endTime && event.beginTime) {
           Object.assign(item, { endTime: event.beginTime });
         }
+        if (util.isDateInCurWeek(item.beginTime, firstDay, lastDay) && util.isDateInCurWeek(item.endTime, firstDay, lastDay) || util.isDateInCurWeek(item.beginTime, firstDay, lastDay) && !util.isDateInCurWeek(item.endTime, firstDay, lastDay) || util.isDateInCurWeek(item.endTime, firstDay, lastDay) && !util.isDateInCurWeek(item.beginTime, firstDay, lastDay) || !util.isDateInCurWeek(event.endTime, firstDay, lastDay) && !util.isDateInCurWeek(event.beginTime, firstDay, lastDay) && util.isTimeGreaterThan(firstDay, event.beginTime) && util.isTimeGreaterThan(event.endTime, firstDay)) {
+          const dateArray = getDateRanges(firstDay, lastDay);
+          dateArray.forEach((date) => {
+            const weekIndex = new Date(date).getDay();
+            tempHeaderArray[weekIndex].push({ ...item });
+          });
+        }
         if (util.isDateInCurWeek(item.beginTime, firstDay, lastDay) && util.isDateInCurWeek(item.endTime, firstDay, lastDay)) {
           const dateArray = getDateRanges(item.beginTime, item.endTime);
           dateArray.forEach((date) => {
@@ -137,157 +295,54 @@ const useCalendarWeek = (props, emit) => {
         return type;
       });
     });
+    tempHeaderArray.forEach((item) => {
+      item.sort((a, b) => {
+        const tempA = a;
+        const tempB = b;
+        const beginTimeDifference = new Date(tempA.beginTime).getTime() - new Date(tempB.beginTime).getTime();
+        let type;
+        if (beginTimeDifference === 0) {
+          type = new Date(tempA.endTime).getTime() - new Date(tempB.endTime).getTime();
+        } else {
+          type = beginTimeDifference;
+        }
+        return type;
+      });
+    });
     tempArray.forEach((item, hostIndex) => {
       item.forEach((event, index) => {
-        const targetLegend = legends.value.find(
-          (legendItem) => Object.is(legendItem.id, event.itemType)
-        );
-        if (targetLegend && targetLegend.isShow || !targetLegend) {
-          const tempEventContent = {};
-          const tempEventHeader = {};
+        if (event.targetLegend) {
+          const length = tempArray[hostIndex].length;
+          const weekDay = weekDays.value[hostIndex];
+          tempEvents[hostIndex].push(
+            handleEventItemUIData(event, weekDay, tempColors, length, index)
+          );
+        }
+      });
+    });
+    tempHeaderArray.forEach((item, hostIndex) => {
+      item.forEach((event, index) => {
+        if (event.targetLegend) {
           const length = tempArray[hostIndex].length;
           const weekDay = weekDays.value[hostIndex];
-          Object.assign(tempEventContent, event);
-          Object.assign(tempEventContent, { zIndex: index + 1 });
-          const percentage = Number((100 / length).toFixed(3));
-          const width = "".concat(percentage, "%");
-          const styleLeft = "".concat(index * percentage, "%");
-          Object.assign(tempEventContent, { width, styleLeft });
-          let height = "auto";
-          let styleTop = 60;
-          let timeRange = "";
-          if (util.isToday(event.beginTime, event.endTime)) {
-            height = getEventHeight(event.beginTime, event.endTime);
-            timeRange = util.handleTimeRange(
-              event.beginTime,
-              event.endTime,
-              "HH:mm"
-            );
-            const tempVal = handleTopOrCurVal(new Date(event.beginTime));
-            styleTop = tempVal.styleTop;
-          } else if (util.isToday(event.beginTime, weekDay.date) && !util.isToday(event.endTime, weekDay.date)) {
-            const endDate = new Date(weekDay.date);
-            endDate.setHours(23, 59, 59, 0);
-            height = getEventHeight(event.beginTime, endDate);
-            timeRange = util.handleTimeRange(
-              event.beginTime,
-              event.endTime,
-              "YYYY-MM-DD HH:mm"
-            );
-            const tempVal = handleTopOrCurVal(new Date(event.beginTime));
-            styleTop = tempVal.styleTop;
-          } else if (util.isToday(event.endTime, weekDay.date) && !util.isToday(event.beginTime, weekDay.date)) {
-            const beginDate = new Date(weekDay.date);
-            beginDate.setHours(0, 0, 0, 0);
-            height = getEventHeight(beginDate, event.endTime);
-            timeRange = util.handleTimeRange(
-              event.beginTime,
-              event.endTime,
-              "YYYY-MM-DD HH:mm"
-            );
-            const tempVal = handleTopOrCurVal(new Date(beginDate));
-            styleTop = tempVal.styleTop;
-          } else {
-            const date = new Date(weekDay.date);
-            const beginDate = new Date(date.setHours(0, 0, 0, 0));
-            const endDate = new Date(date.setHours(23, 59, 59, 59));
-            height = getEventHeight(beginDate, endDate);
-            timeRange = util.handleTimeRange(
-              event.beginTime,
-              event.endTime,
-              "YYYY-MM-DD HH:mm"
-            );
-            const tempVal = handleTopOrCurVal(new Date(beginDate));
-            styleTop = tempVal.styleTop;
-          }
-          Object.assign(tempEventContent, { height, styleTop, timeRange });
-          if (!(event == null ? void 0 : event.bkColor)) {
-            const bkColor = targetLegend ? targetLegend.bkcolor : util.handleBkColor(tempColors, event.itemType);
-            Object.assign(tempEventContent, { bkColor });
-          }
-          if (tempEventContent.bkColor) {
-            const tempBkColor = util.fade(tempEventContent.bkColor, 10);
-            Object.assign(tempEventContent, {
-              bkColorFade: tempBkColor
-            });
-          }
-          if ((tempEventContent == null ? void 0 : tempEventContent.height) && (tempEventContent == null ? void 0 : tempEventContent.height) > 10) {
-            const border = "1px solid #FFF";
-            Object.assign(tempEventContent, { border });
-          } else {
-            Object.assign(tempEventContent, { border: "none" });
-          }
-          tempEvents[hostIndex].push(tempEventContent);
-          if (!util.isToday(event.beginTime, event.endTime)) {
-            Object.assign(tempEventHeader, tempEventContent);
-            Object.assign(tempEventHeader, {
-              width: 0,
-              styleLeft: 0
-            });
-            let headerEVentWidth = 0;
-            let headerEventLeft = 0;
-            if (util.isDateInCurWeek(event.beginTime, firstDay, lastDay) && util.isDateInCurWeek(event.endTime, firstDay, lastDay)) {
-              const eventWidth = handleHeaderEventWidth(
-                event.beginTime,
-                event.endTime,
-                firstDay,
-                lastDay
-              );
-              const eventLeft = handleHeaderEventLeft(
-                event.beginTime,
-                firstDay,
-                lastDay
-              );
-              headerEVentWidth = "".concat(eventWidth, "%");
-              headerEventLeft = "".concat(eventLeft, "%");
-            } else if (util.isDateInCurWeek(event.beginTime, firstDay, lastDay) && !util.isDateInCurWeek(event.endTime, firstDay, lastDay)) {
-              const eventWidth = handleHeaderEventWidth(
-                event.beginTime,
-                lastDay,
-                firstDay,
-                lastDay
-              );
-              const eventLeft = handleHeaderEventLeft(
-                event.beginTime,
-                firstDay,
-                lastDay
-              );
-              headerEVentWidth = "".concat(eventWidth, "%");
-              headerEventLeft = "".concat(eventLeft, "%");
-            } else if (util.isDateInCurWeek(event.endTime, firstDay, lastDay) && !util.isDateInCurWeek(event.beginTime, firstDay, lastDay)) {
-              const eventWidth = handleHeaderEventWidth(
-                firstDay,
-                event.endTime,
-                firstDay,
-                lastDay
-              );
-              headerEVentWidth = "".concat(eventWidth, "%");
-              headerEventLeft = "".concat(0, "%");
-            } else if (!util.isDateInCurWeek(event.endTime, firstDay, lastDay) && !util.isDateInCurWeek(event.beginTime, firstDay, lastDay) && util.isTimeGreaterThan(firstDay, event.beginTime) && util.isTimeGreaterThan(event.endTime, firstDay)) {
-              const eventWidth = handleHeaderEventWidth(
-                firstDay,
-                lastDay,
-                firstDay,
-                lastDay
-              );
-              headerEVentWidth = "".concat(eventWidth, "%");
-              headerEventLeft = "".concat(0, "%");
-            }
-            Object.assign(tempEventHeader, {
-              width: headerEVentWidth,
-              styleLeft: headerEventLeft
-            });
-            let eventHeaderIsShow = false;
-            if (util.isDateInCurWeek(event.beginTime, firstDay, lastDay) && util.isToday(event.beginTime, weekDay.date)) {
-              eventHeaderIsShow = true;
-            } else if (hostIndex === 0) {
-              eventHeaderIsShow = true;
-            }
-            Object.assign(tempEventHeader, {
-              isShow: eventHeaderIsShow
-            });
-            tempRowsHeader[hostIndex].push(tempEventHeader);
-          }
+          const _tempEnent = handleEventItemUIData(
+            event,
+            weekDay,
+            tempColors,
+            length,
+            index
+          );
+          tempRowsHeader[hostIndex].push(
+            handleHeaderEventItemUIData(
+              _tempEnent,
+              weekDay,
+              firstDay,
+              lastDay,
+              length,
+              index,
+              hostIndex
+            )
+          );
         }
       });
     });
@@ -360,9 +415,10 @@ const useCalendarWeek = (props, emit) => {
     }
     return tempDrawData;
   };
-  const eventClick = async (item, location) => {
+  const handleEventClick = (item, location) => {
     popVisible.value = false;
-    const res = await util.handleEVentClick(
+    const res = util.handleEmit(
+      "eventClick",
       item,
       location,
       props.events,
@@ -377,6 +433,97 @@ const useCalendarWeek = (props, emit) => {
     selectedData.value = tempSelectedData;
     handleUIEvents();
   };
+  const handleEventDblClick = (item, location) => {
+    popVisible.value = false;
+    const res = util.handleEmit(
+      "eventDblClick",
+      item,
+      location,
+      props.events,
+      multiple.value,
+      selectedData.value,
+      emit
+    );
+    const { tempSelectedData, isSelectedEvent } = res;
+    if (!isSelectedEvent) {
+      Object.assign(item, { isSelectedEvent });
+    }
+    selectedData.value = tempSelectedData;
+    handleUIEvents();
+  };
+  const headerEventRef = vue.ref();
+  const scrollTop = vue.ref(0);
+  const thumbHeight = vue.ref(0);
+  const enableScroll = vue.ref(false);
+  const orginY = vue.ref(0);
+  const realHeight = vue.ref(1);
+  const visibleHeight = vue.ref(1);
+  const isScroll = vue.ref(false);
+  const onMouseMove = (event) => {
+    if (enableScroll.value) {
+      const y = event.clientY - orginY.value;
+      scrollTop.value += y;
+      orginY.value = event.clientY;
+      if (headerEventRef.value) {
+        headerEventRef.value.scrollTop = realHeight.value * (scrollTop.value / visibleHeight.value);
+      }
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const onMouseUp = (event) => {
+    enableScroll.value = false;
+    event.preventDefault();
+    event.stopPropagation();
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  const onScrollbarMouseDown = (event) => {
+    orginY.value = event.clientY;
+    enableScroll.value = true;
+    event.preventDefault();
+    event.stopPropagation();
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const onHeaderEventScroll = (event) => {
+    var _a, _b, _c;
+    const realTop = ((_a = event.target) == null ? void 0 : _a.scrollTop) || 0;
+    realHeight.value = (_b = event.target) == null ? void 0 : _b.scrollHeight;
+    visibleHeight.value = (_c = event.target) == null ? void 0 : _c.clientHeight;
+    const realRatio = realTop / realHeight.value;
+    scrollTop.value = realRatio * visibleHeight.value;
+    thumbHeight.value = visibleHeight.value * (visibleHeight.value / realHeight.value);
+  };
+  const initHeaderEventScroll = () => {
+    realHeight.value = 0;
+    visibleHeight.value = 0;
+    isScroll.value = false;
+    thumbHeight.value = 0;
+    vue.nextTick(() => {
+      if (headerEventRef.value) {
+        realHeight.value = headerEventRef.value.scrollHeight;
+        visibleHeight.value = headerEventRef.value.clientHeight;
+        if (realHeight.value > visibleHeight.value) {
+          isScroll.value = true;
+        }
+        thumbHeight.value = visibleHeight.value * (visibleHeight.value / realHeight.value);
+      }
+    });
+  };
+  const eventContextmenu = async (item, evt) => {
+    emit("eventContextmenu", { evt, data: [item] });
+  };
+  vue.watch(
+    () => headerEventRef.value,
+    () => {
+      initHeaderEventScroll();
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
   return {
     drawData,
     curTimeTimer,
@@ -390,12 +537,23 @@ const useCalendarWeek = (props, emit) => {
     legends,
     rowsHeader,
     popVisible,
+    headerEventRef,
+    thumbHeight,
+    realHeight,
+    scrollTop,
+    isScroll,
     handleCurTime,
     handleDrag,
     handleDragStart,
-    eventClick,
+    handleDragEnd,
+    handleEventClick,
+    handleEventDblClick,
     initDrawData,
-    handleUIEvents
+    handleUIEvents,
+    onScrollbarMouseDown,
+    onHeaderEventScroll,
+    initHeaderEventScroll,
+    eventContextmenu
   };
 };
 

package/lib/control/calendar/components/constant/event.cjs

@@ -6,9 +6,11 @@ const CHANGE_EVENT = "change";
 const INPUT_EVENT = "input";
 const EVENT_CLICK_EVENT = "eventClick";
 const EVENT_DBL_CLICK_EVENT = "eventDblClick";
+const EVENT_CONTEXT_MENU = "eventContextmenu";
 
 exports.CHANGE_EVENT = CHANGE_EVENT;
 exports.EVENT_CLICK_EVENT = EVENT_CLICK_EVENT;
+exports.EVENT_CONTEXT_MENU = EVENT_CONTEXT_MENU;
 exports.EVENT_DBL_CLICK_EVENT = EVENT_DBL_CLICK_EVENT;
 exports.INPUT_EVENT = INPUT_EVENT;
 exports.UPDATE_MODEL_EVENT = UPDATE_MODEL_EVENT;

package/lib/control/calendar/components/constant/index.cjs

@@ -6,6 +6,7 @@ var event = require('./event.cjs');
 
 exports.CHANGE_EVENT = event.CHANGE_EVENT;
 exports.EVENT_CLICK_EVENT = event.EVENT_CLICK_EVENT;
+exports.EVENT_CONTEXT_MENU = event.EVENT_CONTEXT_MENU;
 exports.EVENT_DBL_CLICK_EVENT = event.EVENT_DBL_CLICK_EVENT;
 exports.INPUT_EVENT = event.INPUT_EVENT;
 exports.UPDATE_MODEL_EVENT = event.UPDATE_MODEL_EVENT;

package/lib/control/calendar/components/custom-calendar/custom-calendar.cjs

@@ -36,6 +36,7 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
       pickDay,
       handleEVentClick,
       handleEVentDblClick,
+      handleEventContextmenu,
       selectDate,
       selectLegend
     } = useCustomCalendar.useCustomCalendar(props, emit, "custom-calendar");
@@ -66,13 +67,10 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         }, [vue.createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-tip"),
           "style": {
-            background: item.isShow ? item.bkcolor : "#CCCCCC"
+            background: item.isShow ? item.bkcolor : "var(".concat(ns.cssVarName("color-disabled-bg"), ")")
           }
         }, null), vue.createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-text"),
-          "style": {
-            color: item.isShow ? item.color : "#CCCCCC"
-          },
           "title": core.showTitle(item.name)
         }, [item.name])]);
       })]), vue.createVNode("div", {
@@ -91,7 +89,8 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         "multiple": multiple.value,
         "selectedData": selectedData.value,
         "onEventClick": (value) => handleEVentClick(value),
-        "onEventDblClick": (value) => handleEVentDblClick(value)
+        "onEventDblClick": (value) => handleEVentDblClick(value),
+        "onEventContextmenu": (value) => handleEventContextmenu(value)
       }, slots)]);
     };
     const renderDay = () => {
@@ -118,13 +117,10 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         }, [vue.createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-tip"),
           "style": {
-            background: item.isShow ? item.bkcolor : "#CCCCCC"
+            background: item.isShow ? item.bkcolor : "var(".concat(ns.cssVarName("color-disabled-bg"), ")")
           }
         }, null), vue.createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-text"),
-          "style": {
-            color: item.isShow ? item.color : "#CCCCCC"
-          },
           "title": core.showTitle(item.name)
         }, [item.name])]);
       })]), vue.createVNode("div", {
@@ -140,12 +136,14 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
       }, [curWeek.value])]), vue.createVNode(index$1.IBizCalendarDaily, {
         "selected-day": realSelectedDay.value,
         "controller": props.controller,
+        "showDetail": props.showDetail,
         "events": events.value,
         "legends": legends.value,
         "multiple": multiple.value,
         "selectedData": selectedData.value,
         "onEventClick": (value) => handleEVentClick(value),
-        "onEventDblClick": (value) => handleEVentDblClick(value)
+        "onEventDblClick": (value) => handleEVentDblClick(value),
+        "onEventContextmenu": (value) => handleEventContextmenu(value)
       }, slots)]);
     };
     const renderUser = () => {

package/lib/control/calendar/components/custom-calendar/custom-calendar.css

@@ -1 +1 @@
-.ibiz-custom-calendar{width:100%;height:100%}.ibiz-custom-calendar__calendar-day{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;min-height:900px;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-day--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-day--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-day--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-day--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-day--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-day--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-day--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-day--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-week{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-week--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-week--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-week--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-week--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-week--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-week--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-week--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-week--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-custom-calendar__calendar-month--body{flex-grow:1;width:100%;height:calc(100% - 58px)}.ibiz-custom-calendar__calendar-month--legend{display:flex;align-items:center;justify-content:center;width:auto;height:100%}.ibiz-custom-calendar__calendar-month--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-month--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-month--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month--header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:12px 20px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-month--button-group{display:flex;align-items:center;justify-content:space-between;width:388px}.ibiz-custom-calendar__header--title{min-width:120px}.ibiz-custom-calendar .el-date-editor.el-input,.ibiz-custom-calendar .el-date-editor.el-input__wrapper{width:130px;height:32px}
+.ibiz-custom-calendar{width:100%;height:100%}.ibiz-custom-calendar__calendar-day{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;min-height:900px;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-day--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-day--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-day--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-day--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-day--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-day--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-day--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-day--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-week{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-week--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-week--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-week--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-week--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-week--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-week--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-week--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-week--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-custom-calendar__calendar-month--body{flex-grow:1;width:100%;height:calc(100% - 58px)}.ibiz-custom-calendar__calendar-month--legend{display:flex;align-items:center;justify-content:center;width:auto;height:100%}.ibiz-custom-calendar__calendar-month--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-month--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-month--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month--header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:12px 20px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-month--button-group{display:flex;align-items:center;justify-content:space-between;width:388px}.ibiz-custom-calendar__header--title{min-width:120px}.ibiz-custom-calendar .el-date-editor.el-input,.ibiz-custom-calendar .el-date-editor.el-input__wrapper{width:130px;height:32px}

package/lib/control/calendar/components/custom-calendar/use-custom-calendar.cjs

@@ -213,6 +213,9 @@ const useCustomCalendar = (props, emit, _componentName) => {
   const handleEVentDblClick = (value) => {
     emit("eventDblClick", value);
   };
+  const handleEventContextmenu = (value) => {
+    emit("eventContextmenu", value);
+  };
   const curWeek = vue.computed(() => {
     let tempWeek = "";
     if (realSelectedDay.value) {
@@ -259,6 +262,7 @@ const useCustomCalendar = (props, emit, _componentName) => {
     selectDate,
     handleEVentClick,
     handleEVentDblClick,
+    handleEventContextmenu,
     selectLegend
   };
 };

package/lib/control/calendar/components/interface/calendar-daily.cjs

@@ -22,12 +22,17 @@ const calendarDailyProps = util.handleProps({
   },
   selectedData: {
     type: Object
+  },
+  showDetail: {
+    type: Boolean,
+    default: false
   }
 });
 const calendarDailyEmits = {
   pick: (value) => lodashEs.isObject(value),
   eventClick: (value) => value,
-  eventDblClick: (value) => value
+  eventDblClick: (value) => value,
+  eventContextmenu: (_value) => _value
 };
 
 exports.calendarDailyEmits = calendarDailyEmits;