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

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

@@ -1,6 +1,6 @@
-import { ref, computed } from 'vue';
+import { ref, computed, nextTick, watch } from 'vue';
 import '../util/index.mjs';
-import { getCurWeekDates, isToday, isDateInCurWeek, isTimeGreaterThan, handleTimeRange, handleBkColor, fade, handleEVentClick } from '../util/util.mjs';
+import { handleTimeRange, isToday, handleBkColor, fade, isDateInCurWeek, isTimeGreaterThan, checkDateRangeIncludes, getCurWeekDates, handleEmit } from '../util/util.mjs';
 
 "use strict";
 const useCalendarWeek = (props, emit) => {
@@ -28,7 +28,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);
@@ -41,12 +45,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 = 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, _weekDay.date) && !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 (isToday(_event.endTime, _weekDay.date) && !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 || handleBkColor(tempColors, _event.itemType);
+      Object.assign(tempEventContent, { bkColor });
+    }
+    if (tempEventContent.bkColor) {
+      const tempBkColor = 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 (isDateInCurWeek(_event.beginTime, _firstDay, _lastDay) && 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 (isDateInCurWeek(_event.beginTime, _firstDay, _lastDay) && !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 (isDateInCurWeek(_event.endTime, _firstDay, _lastDay) && !isDateInCurWeek(_event.beginTime, _firstDay, _lastDay)) {
+      const eventWidth = handleHeaderEventWidth(
+        _firstDay,
+        _event.endTime,
+        _firstDay,
+        _lastDay
+      );
+      headerEVentWidth = "".concat(eventWidth, "%");
+      headerEventLeft = "".concat(0, "%");
+    } else if (!isDateInCurWeek(_event.endTime, _firstDay, _lastDay) && !isDateInCurWeek(_event.beginTime, _firstDay, _lastDay) && isTimeGreaterThan(_firstDay, _event.beginTime) && 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 (isDateInCurWeek(_event.beginTime, _firstDay, _lastDay) && isToday(_event.beginTime, _weekDay.date)) {
+      eventHeaderIsShow = true;
+    } else if (_hostIndex === 0) {
+      eventHeaderIsShow = true;
+    }
+    const _curDate = new Date(_weekDay.date);
+    if (!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 } = getCurWeekDates(curDate);
     const tempArray = [];
+    const tempHeaderArray = [];
     const tempEvents = [];
     const tempRowsHeader = [];
     weekDays.value = [];
@@ -76,12 +221,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
@@ -94,6 +245,13 @@ const useCalendarWeek = (props, emit) => {
         if (!event.endTime && event.beginTime) {
           Object.assign(item, { endTime: event.beginTime });
         }
+        if (isDateInCurWeek(item.beginTime, firstDay, lastDay) && isDateInCurWeek(item.endTime, firstDay, lastDay) || isDateInCurWeek(item.beginTime, firstDay, lastDay) && !isDateInCurWeek(item.endTime, firstDay, lastDay) || isDateInCurWeek(item.endTime, firstDay, lastDay) && !isDateInCurWeek(item.beginTime, firstDay, lastDay) || !isDateInCurWeek(event.endTime, firstDay, lastDay) && !isDateInCurWeek(event.beginTime, firstDay, lastDay) && isTimeGreaterThan(firstDay, event.beginTime) && isTimeGreaterThan(event.endTime, firstDay)) {
+          const dateArray = getDateRanges(firstDay, lastDay);
+          dateArray.forEach((date) => {
+            const weekIndex = new Date(date).getDay();
+            tempHeaderArray[weekIndex].push({ ...item });
+          });
+        }
         if (isDateInCurWeek(item.beginTime, firstDay, lastDay) && isDateInCurWeek(item.endTime, firstDay, lastDay)) {
           const dateArray = getDateRanges(item.beginTime, item.endTime);
           dateArray.forEach((date) => {
@@ -135,157 +293,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 (isToday(event.beginTime, event.endTime)) {
-            height = getEventHeight(event.beginTime, event.endTime);
-            timeRange = handleTimeRange(
-              event.beginTime,
-              event.endTime,
-              "HH:mm"
-            );
-            const tempVal = handleTopOrCurVal(new Date(event.beginTime));
-            styleTop = tempVal.styleTop;
-          } else if (isToday(event.beginTime, weekDay.date) && !isToday(event.endTime, weekDay.date)) {
-            const endDate = new Date(weekDay.date);
-            endDate.setHours(23, 59, 59, 0);
-            height = getEventHeight(event.beginTime, endDate);
-            timeRange = handleTimeRange(
-              event.beginTime,
-              event.endTime,
-              "YYYY-MM-DD HH:mm"
-            );
-            const tempVal = handleTopOrCurVal(new Date(event.beginTime));
-            styleTop = tempVal.styleTop;
-          } else if (isToday(event.endTime, weekDay.date) && !isToday(event.beginTime, weekDay.date)) {
-            const beginDate = new Date(weekDay.date);
-            beginDate.setHours(0, 0, 0, 0);
-            height = getEventHeight(beginDate, event.endTime);
-            timeRange = 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 = 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 : handleBkColor(tempColors, event.itemType);
-            Object.assign(tempEventContent, { bkColor });
-          }
-          if (tempEventContent.bkColor) {
-            const tempBkColor = 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 (!isToday(event.beginTime, event.endTime)) {
-            Object.assign(tempEventHeader, tempEventContent);
-            Object.assign(tempEventHeader, {
-              width: 0,
-              styleLeft: 0
-            });
-            let headerEVentWidth = 0;
-            let headerEventLeft = 0;
-            if (isDateInCurWeek(event.beginTime, firstDay, lastDay) && 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 (isDateInCurWeek(event.beginTime, firstDay, lastDay) && !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 (isDateInCurWeek(event.endTime, firstDay, lastDay) && !isDateInCurWeek(event.beginTime, firstDay, lastDay)) {
-              const eventWidth = handleHeaderEventWidth(
-                firstDay,
-                event.endTime,
-                firstDay,
-                lastDay
-              );
-              headerEVentWidth = "".concat(eventWidth, "%");
-              headerEventLeft = "".concat(0, "%");
-            } else if (!isDateInCurWeek(event.endTime, firstDay, lastDay) && !isDateInCurWeek(event.beginTime, firstDay, lastDay) && isTimeGreaterThan(firstDay, event.beginTime) && 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 (isDateInCurWeek(event.beginTime, firstDay, lastDay) && 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
+            )
+          );
         }
       });
     });
@@ -358,9 +413,10 @@ const useCalendarWeek = (props, emit) => {
     }
     return tempDrawData;
   };
-  const eventClick = async (item, location) => {
+  const handleEventClick = (item, location) => {
     popVisible.value = false;
-    const res = await handleEVentClick(
+    const res = handleEmit(
+      "eventClick",
       item,
       location,
       props.events,
@@ -375,6 +431,97 @@ const useCalendarWeek = (props, emit) => {
     selectedData.value = tempSelectedData;
     handleUIEvents();
   };
+  const handleEventDblClick = (item, location) => {
+    popVisible.value = false;
+    const res = 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 = ref();
+  const scrollTop = ref(0);
+  const thumbHeight = ref(0);
+  const enableScroll = ref(false);
+  const orginY = ref(0);
+  const realHeight = ref(1);
+  const visibleHeight = ref(1);
+  const isScroll = 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;
+    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] });
+  };
+  watch(
+    () => headerEventRef.value,
+    () => {
+      initHeaderEventScroll();
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
   return {
     drawData,
     curTimeTimer,
@@ -388,12 +535,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/es/control/calendar/components/constant/event.d.ts

@@ -3,3 +3,4 @@ export declare const CHANGE_EVENT = "change";
 export declare const INPUT_EVENT = "input";
 export declare const EVENT_CLICK_EVENT = "eventClick";
 export declare const EVENT_DBL_CLICK_EVENT = "eventDblClick";
+export declare const EVENT_CONTEXT_MENU = "eventContextmenu";

package/es/control/calendar/components/constant/event.mjs

@@ -4,5 +4,6 @@ const CHANGE_EVENT = "change";
 const INPUT_EVENT = "input";
 const EVENT_CLICK_EVENT = "eventClick";
 const EVENT_DBL_CLICK_EVENT = "eventDblClick";
+const EVENT_CONTEXT_MENU = "eventContextmenu";
 
-export { CHANGE_EVENT, EVENT_CLICK_EVENT, EVENT_DBL_CLICK_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT };
+export { CHANGE_EVENT, EVENT_CLICK_EVENT, EVENT_CONTEXT_MENU, EVENT_DBL_CLICK_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT };

package/es/control/calendar/components/constant/index.mjs

@@ -1,3 +1,3 @@
-export { CHANGE_EVENT, EVENT_CLICK_EVENT, EVENT_DBL_CLICK_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from './event.mjs';
+export { CHANGE_EVENT, EVENT_CLICK_EVENT, EVENT_CONTEXT_MENU, EVENT_DBL_CLICK_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from './event.mjs';
 
 "use strict";

package/es/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/es/control/calendar/components/custom-calendar/custom-calendar.d.ts

@@ -12,12 +12,14 @@ export declare const CustomCalendar: import("vue").DefineComponent<import("@ibiz
     change: (value: Date) => 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>> & {
     onChange?: ((value: Date) => any) | undefined;
     onInput?: ((value: Date) => any) | undefined;
     "onUpdate:modelValue"?: ((value: Date) => 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/custom-calendar/custom-calendar.mjs

@@ -34,6 +34,7 @@ const CustomCalendar = /* @__PURE__ */ defineComponent({
       pickDay,
       handleEVentClick,
       handleEVentDblClick,
+      handleEventContextmenu,
       selectDate,
       selectLegend
     } = useCustomCalendar(props, emit, "custom-calendar");
@@ -64,13 +65,10 @@ const CustomCalendar = /* @__PURE__ */ defineComponent({
         }, [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), createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-text"),
-          "style": {
-            color: item.isShow ? item.color : "#CCCCCC"
-          },
           "title": showTitle(item.name)
         }, [item.name])]);
       })]), createVNode("div", {
@@ -89,7 +87,8 @@ const CustomCalendar = /* @__PURE__ */ 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 = () => {
@@ -116,13 +115,10 @@ const CustomCalendar = /* @__PURE__ */ defineComponent({
         }, [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), createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-text"),
-          "style": {
-            color: item.isShow ? item.color : "#CCCCCC"
-          },
           "title": showTitle(item.name)
         }, [item.name])]);
       })]), createVNode("div", {
@@ -138,12 +134,14 @@ const CustomCalendar = /* @__PURE__ */ defineComponent({
       }, [curWeek.value])]), createVNode(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 = () => {