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

package/es/common/carousel/carousel.css

@@ -1 +1 @@
-.ibiz-carousel-component .el-carousel__container .el-carousel__item{display:flex;align-items:center;justify-content:center}.ibiz-carousel-component .el-carousel__container .el-carousel__item img{display:inline-block;width:100%;height:100%}
+.ibiz-carousel-component .el-carousel__container .el-carousel__item{display:flex;align-items:center;justify-content:center}.ibiz-carousel-component .el-carousel__container .el-carousel__item img{display:inline-block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}

package/es/common/map-chart/map-chart.mjs

@@ -1,4 +1,4 @@
-import { computed, onMounted, toRefs, watch, createVNode, defineComponent } from 'vue';
+import { computed, onMounted, createVNode, defineComponent } from 'vue';
 import { isNil, mergeDeepWithKey } from 'ramda';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { defaultOpts } from './map-chart.util.mjs';
@@ -42,8 +42,7 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
       historyNames,
       changeMap,
       getCityName,
-      goBack,
-      refresh
+      goBack
     } = useMapManager(options, (mapName) => {
       const {
         visualMap,
@@ -52,8 +51,8 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
         hoverAreaColor,
         areaBorderColor
       } = options.value;
-      const areaData2 = props.areaData || [];
-      const pointData2 = props.pointData || [];
+      const areaData = props.areaData || [];
+      const pointData = props.pointData || [];
       const result = {
         geo: {
           map: mapName
@@ -123,7 +122,7 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
             select: {
               disabled: true
             },
-            data: areaData2.map((item) => ({
+            data: areaData.map((item) => ({
               name: "".concat(item._areaCode),
               value: item._value,
               _id: item._id
@@ -159,7 +158,7 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
                 return find == null ? void 0 : find._tooltip;
               }
             },
-            data: pointData2.map((item) => {
+            data: pointData.map((item) => {
               return {
                 _id: item._id,
                 symbol: item._symbol ? "image://".concat(item._symbol) : void 0,
@@ -190,13 +189,6 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       changeMap(options.value.defaultAreaCode, true);
     });
-    const {
-      areaData,
-      pointData
-    } = toRefs(props);
-    watch([areaData, pointData], () => {
-      refresh();
-    });
     return {
       ns,
       chartRef,

package/es/control/calendar/calendar-util.d.ts

@@ -1,3 +1,4 @@
+import { Namespace } from '@ibiz-template/core';
 import dayjs from 'dayjs';
 /**
  * 根据当前时间获取上周日到本周六的所有日期
@@ -22,3 +23,14 @@ export declare const isTimeBetween: (_argrs: {
     endTime?: string;
     unit?: dayjs.OpUnitType | undefined;
 }) => boolean;
+/**
+ * 用于处理日历图例
+ *
+ * @export
+ * @param {Namespace} ns 菜单样式处理命名空间
+ */
+export declare function useCalendarLegend(ns: Namespace): {
+    getFontColor: () => string;
+    getBkColor: (_index: number) => string;
+    getActBdrColors: (_index: number) => string;
+};

package/es/control/calendar/calendar-util.mjs

@@ -17,5 +17,34 @@ const isTimeBetween = (_argrs) => {
   const { date, beginTime, endTime, unit = "day" } = _argrs;
   return !!(beginTime && dayjs(date).isSame(beginTime, unit) || endTime && dayjs(date).isSame(endTime, unit) || beginTime && endTime && dayjs(date).isAfter(beginTime, unit) && dayjs(date).isBefore(endTime, unit));
 };
+function useCalendarLegend(ns) {
+  const getVarValue = (varName) => {
+    const root = document.documentElement;
+    return getComputedStyle(root).getPropertyValue(varName);
+  };
+  const bgColors = [
+    // 首个颜色用主题色
+    getVarValue("".concat(ns.cssVarName("color-primary"))),
+    "#2196F3",
+    "#4CAF50",
+    "#3F51B5",
+    "#FF9800",
+    "#673AB7",
+    "#757575"
+  ];
+  const actBdrColors = bgColors.map(
+    () => getVarValue("".concat(ns.cssVarName("color-black")))
+  );
+  const getBkColor = (_index) => {
+    return bgColors[_index] || bgColors[0];
+  };
+  const getActBdrColors = (_index) => {
+    return actBdrColors[_index] || getVarValue("".concat(ns.cssVarName("color-primary")));
+  };
+  const getFontColor = () => {
+    return getVarValue("".concat(ns.cssVarName("color-primary-text")));
+  };
+  return { getFontColor, getBkColor, getActBdrColors };
+}
 
-export { getWeekRange, isTimeBetween };
+export { getWeekRange, isTimeBetween, useCalendarLegend };

package/es/control/calendar/calendar.css

@@ -1 +1 @@
-.ibiz-control-calendar{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);position:relative;width:100%;height:100%}.ibiz-control-calendar__nav-icon{position:absolute;top:18px;right:0;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-calendar__calendar-item{display:flex;align-items:center;padding:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar__icon{width:var(--ibiz-width-icon-small);height:var(--ibiz-width-icon-small);margin-right:var(--ibiz-spacing-base-tight);border-radius:var(--ibiz-border-radius-circle)}.ibiz-control-calendar-content{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-calendar-content .el-calendar{display:flex;flex-direction:column;height:100%}.ibiz-control-calendar-content .el-calendar__header{flex-wrap:wrap}.ibiz-control-calendar-content .el-calendar-table,.ibiz-control-calendar-content .el-calendar-table .el-calendar-day{width:100%;height:100%;min-height:90px;cursor:pointer}.ibiz-control-calendar-content .el-calendar-table{flex:1;width:-moz-fit-content;width:fit-content}.ibiz-control-calendar-content .el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:var(--el-calendar-selected-bg-color)}.ibiz-control-calendar-content .el-calendar__body{display:flex;flex:1;padding:0;overflow:auto}.ibiz-control-calendar-content.is-show-date-range .el-calendar-day{padding:var(--ibiz-spacing-tight) 0}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item{width:calc(100% + 1px);min-height:34px;border-radius:0}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-begin-time{width:100%;margin-left:var(--ibiz-spacing-super-tight);border-radius:var(--ibiz-spacing-extra-tight) 0 0 var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-begin-time.is-end-time{width:calc(100% - var(--ibiz-spacing-super-tight) * 2);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-end-time{width:calc(100% - var(--ibiz-spacing-super-tight));border-radius:0 var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) 0}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-active{border-right:none;border-left:none}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-active.is-begin-time{border-left:solid .5px var(--ibiz-control-calendar-border-color)}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-active.is-end-time{border-right:solid .5px var(--ibiz-control-calendar-border-color)}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-hidden{position:relative;z-index:-1;opacity:0}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-no-begin-time,.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-no-end-time{width:calc(100% - var(--ibiz-spacing-super-tight) * 2);margin-left:var(--ibiz-spacing-super-tight);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more{width:100%;font-size:var(--ibiz-font-size-small);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);height:100%;padding:var(--ibiz-control-calendar-item-padding);margin-bottom:var(--ibiz-control-calendar-margin);overflow:hidden;font-size:var(--ibiz-control-calendar-font-size);color:var(--ibiz-control-calendar-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:solid .5px transparent;border-radius:var(--ibiz-control-calendar-border-radius)}.ibiz-control-calendar-item:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item.is-active{background-color:var(--ibiz-control-calendar-active-bg-color);border:solid .5px var(--ibiz-control-calendar-border-color)}.ibiz-control-calendar-date-text{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);padding-bottom:var(--ibiz-control-calendar-item-padding);margin:0;text-align:center}.ibiz-control-calendar-day{height:-moz-fit-content;height:fit-content}.ibiz-control-calendar-content-title{line-height:var(--ibiz-editor-default-line-height)}.ibiz-control-calendar-content-header{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-calendar-content-header>*+*{margin-left:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar-legend{display:flex;justify-content:flex-end;width:100%}.ibiz-control-calendar-legend>*+*{margin-left:var(--ibiz-spacing-base-loose)}.ibiz-control-calendar-timeline-content .el-timeline{padding-left:0}
+.ibiz-control-calendar{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);position:relative;width:100%;height:100%}.ibiz-control-calendar__nav-icon{position:absolute;top:18px;right:0;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-calendar__calendar-item{display:flex;align-items:center;padding:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar__icon{width:var(--ibiz-width-icon-small);height:var(--ibiz-width-icon-small);margin-right:var(--ibiz-spacing-base-tight);border-radius:var(--ibiz-border-radius-circle)}.ibiz-control-calendar-content{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-calendar-content .el-calendar{display:flex;flex-direction:column;height:100%}.ibiz-control-calendar-content .el-calendar__header{flex-wrap:nowrap}.ibiz-control-calendar-content .el-calendar-table,.ibiz-control-calendar-content .el-calendar-table .el-calendar-day{width:100%;height:100%;min-height:90px;cursor:pointer}.ibiz-control-calendar-content .el-calendar-table{flex:1;width:-moz-fit-content;width:fit-content}.ibiz-control-calendar-content .el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:var(--el-calendar-selected-bg-color)}.ibiz-control-calendar-content .el-calendar__body{display:flex;flex:1;padding:0;overflow:auto}.ibiz-control-calendar-content.is-show-date-range .el-calendar-day{padding:var(--ibiz-spacing-tight) 0}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item{width:calc(100% + 1px);min-height:34px;border-radius:0}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-begin-time{width:100%;margin-left:var(--ibiz-spacing-super-tight);border-radius:var(--ibiz-spacing-extra-tight) 0 0 var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-begin-time.is-end-time{width:calc(100% - var(--ibiz-spacing-super-tight) * 2);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-end-time{width:calc(100% - var(--ibiz-spacing-super-tight));border-radius:0 var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) 0}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-active{border-right:none;border-left:none}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-active.is-begin-time{border-left:solid .5px var(--ibiz-control-calendar-item-active-border-color,var(--ibiz-control-calendar-border-color))}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-active.is-end-time{border-right:solid .5px var(--ibiz-control-calendar-item-active-border-color,var(--ibiz-control-calendar-border-color))}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-hidden{position:relative;z-index:-1;opacity:0}.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-no-begin-time,.ibiz-control-calendar-content.is-show-date-range .ibiz-control-calendar-item.is-no-end-time{width:calc(100% - var(--ibiz-spacing-super-tight) * 2);margin-left:var(--ibiz-spacing-super-tight);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more{width:100%;font-size:var(--ibiz-font-size-small);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);--ibiz-control-calendar-item-color:none;--ibiz-color-text-2:var(--ibiz-control-calendar-item-color);--ibiz-editor-default-text-color:var(--ibiz-control-calendar-item-color);height:100%;padding:var(--ibiz-control-calendar-item-padding);margin-bottom:var(--ibiz-control-calendar-margin);overflow:hidden;font-size:var(--ibiz-control-calendar-font-size);color:var(--ibiz-control-calendar-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:solid .5px transparent;border-radius:var(--ibiz-control-calendar-border-radius)}.ibiz-control-calendar-item:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item.is-active{background-color:var(--ibiz-control-calendar-active-bg-color);border:solid .5px var(--ibiz-control-calendar-item-active-border-color,var(--ibiz-control-calendar-border-color))}.ibiz-control-calendar-date-text{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);padding-bottom:var(--ibiz-control-calendar-item-padding);margin:0;text-align:center}.ibiz-control-calendar-day{height:-moz-fit-content;height:fit-content}.ibiz-control-calendar-content-title{line-height:var(--ibiz-editor-default-line-height);white-space:nowrap}.ibiz-control-calendar-content-header{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-calendar-content-header>*+*{margin-left:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar-content-header .el-button-group{display:flex}.ibiz-control-calendar-legend{display:flex;justify-content:center;width:100%}.ibiz-control-calendar-legend__item{display:flex;align-items:center;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-control-calendar-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-control-calendar-legend__item--text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-calendar-timeline-content{height:100%;overflow:auto}.ibiz-control-calendar-timeline-content .el-timeline{padding-left:0}

package/es/control/calendar/calendar.d.ts

@@ -61,10 +61,12 @@ export declare const CalendarControl: import("vue").DefineComponent<{
     showDateRange: import("vue").Ref<boolean>;
     showDateList: import("vue").Ref<boolean>;
     popoverValue: import("vue").Ref<string>;
+    legendItems: import("vue").Ref<import("@ibiz-template/core").IApiData[]>;
     selectDate: (tag: string) => void;
     calcItemStyle: (data: ICalendarItemData) => IData;
     calcCalendarItems: (date: Date) => ICalendarItemData[];
     onNodeContextmenu: (item: ICalendarItemData, evt: MouseEvent) => Promise<void>;
+    monthLegendClick: (_item: IData) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * @description 日历模型数据

package/es/control/calendar/calendar.mjs

@@ -1,10 +1,10 @@
 import { isVNode, ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
-import { useControlController, useNamespace, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
+import { useControlController, useNamespace, useUIStore, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { CalendarController } from '@ibiz-template/runtime';
 import dayjs from 'dayjs';
 import { showTitle } from '@ibiz-template/core';
 import { IBizCustomCalendar } from './components/custom-calendar/index.mjs';
-import { getWeekRange, isTimeBetween } from './calendar-util.mjs';
+import { useCalendarLegend, getWeekRange, isTimeBetween } from './calendar-util.mjs';
 import './calendar.css';
 
 "use strict";
@@ -68,10 +68,54 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
   setup() {
     const c = useControlController((...args) => new CalendarController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
+    const {
+      UIStore
+    } = useUIStore();
+    const {
+      getFontColor,
+      getBkColor,
+      getActBdrColors
+    } = useCalendarLegend(ns);
     const calendarRef = ref();
     const curPopover = ref();
     const showDateRange = ref(c.controlParams.showmode === "daterange");
     const showDateList = ref(c.controlParams.showmode === "expand");
+    const monthLegendClick = (_item) => {
+      Object.assign(_item, {
+        isShow: !_item.isShow
+      });
+    };
+    const legendItems = ref([]);
+    const legendType = ["DAY", "WEEK", "MONTH"];
+    const calcLegend = () => {
+      legendItems.value = c.state.legends.map((_item, index) => {
+        const tempItem = {
+          ..._item,
+          isShow: true
+        };
+        if (!c.model.calendarStyle || !legendType.includes(c.model.calendarStyle))
+          return tempItem;
+        if (!_item.bkcolor) {
+          Object.assign(tempItem, {
+            bkcolor: getBkColor(index),
+            actBdrColor: getActBdrColors(index)
+          });
+        }
+        if (!_item.color)
+          Object.assign(tempItem, {
+            color: getFontColor()
+          });
+        return tempItem;
+      });
+    };
+    watch(() => c.state.legends, () => {
+      calcLegend();
+    }, {
+      deep: true
+    });
+    watch(() => UIStore.theme, () => {
+      calcLegend();
+    });
     const popoverValue = ref("");
     const selectDate = (tag) => {
       if (!calendarRef.value)
@@ -119,6 +163,9 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         }
         return false;
       }
+      if (c.model.calendarStyle === "TIMELINE") {
+        return dayjs(newVal).isSame(dayjs(oldVal), "millisecond");
+      }
       return false;
     };
     watch(() => c.state.selectedDate, (newVal, oldVal) => {
@@ -128,14 +175,20 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       c.load();
     });
     const calcItemStyle = (data) => {
+      const _legend = legendItems.value.find((_item) => _item.id === data.itemType);
       return {
         color: data.color,
-        backgroundColor: data.bkColor
+        backgroundColor: data.bkColor,
+        ["".concat(ns.cssVarBlockName("item-color"))]: data.color,
+        ["".concat(ns.cssVarBlockName("item-active-border-color"))]: _legend == null ? void 0 : _legend.actBdrColor
       };
     };
     const calcCalendarItems = (date) => {
       const weekRange = getWeekRange(date);
       const calendarItems = c.state.items.filter((item) => {
+        const _legend = legendItems.value.find((legend) => legend.id === item.itemType);
+        if (_legend && !_legend.isShow)
+          return false;
         if (!showDateRange.value) {
           return dayjs(date).isSame(item.beginTime, "day");
         }
@@ -156,7 +209,20 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
           return result;
         });
       }
-      return calendarItems;
+      return calendarItems.map((_item) => {
+        const targetLegend = legendItems.value.find((legendItem) => Object.is(legendItem.id, _item.itemType));
+        if (!targetLegend)
+          return _item;
+        if (!_item.bkColor)
+          Object.assign(_item, {
+            bkColor: targetLegend.bkcolor
+          });
+        if (!_item.color)
+          Object.assign(_item, {
+            color: targetLegend.color
+          });
+        return _item;
+      });
     };
     let ContextMenu;
     const iBizRawItem = resolveComponent("IBizRawItem");
@@ -284,7 +350,10 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       if (!contextMenuC.model.detoolbarItems) {
         return;
       }
-      await contextMenuC.calcButtonState(item.deData || (item.deData ? item : void 0), targetCalendarItem.appDataEntityId);
+      await contextMenuC.calcButtonState(item.deData || (item.deData ? item : void 0), targetCalendarItem.appDataEntityId, {
+        view: c.view,
+        ctrl: c
+      });
       const menuState = contextMenuC.state.buttonsState;
       const menus = calcContextMenuItems(contextMenuC.model.detoolbarItems, item, evt, menuState);
       if (!menus.length) {
@@ -306,10 +375,12 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       showDateRange,
       showDateList,
       popoverValue,
+      legendItems,
       selectDate,
       calcItemStyle,
       calcCalendarItems,
-      onNodeContextmenu
+      onNodeContextmenu,
+      monthLegendClick
     };
   },
   render() {
@@ -349,7 +420,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1), this.ns.is("begin-time", date && dayjs(date).isSame(item.beginTime, "day")), this.ns.is("hidden", this.showDateRange && !isTimeBetween({
+      const itemClass = [this.ns.b("item"), this.ns.be("item", "default"), this.ns.is("active", findIndex !== -1), this.ns.is("begin-time", date && dayjs(date).isSame(item.beginTime, "day")), this.ns.is("hidden", this.showDateRange && !isTimeBetween({
         beginTime: item.beginTime,
         endTime: item.endTime,
         date
@@ -417,11 +488,31 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         header: ({
           date
         }) => {
-          var _a;
           let _slot, _slot2, _slot3, _slot4, _slot5;
           return [createVNode("span", {
             "class": this.ns.b("content-title")
           }, [date]), createVNode("div", {
+            "class": this.ns.b("legend")
+          }, [this.legendItems && this.legendItems.length > 1 && this.legendItems.map((_legend) => {
+            var _a;
+            let label = _legend.name;
+            const _model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((_calendarItem) => _calendarItem.id === _legend.id);
+            if (_model == null ? void 0 : _model.nameLanguageRes) {
+              label = ibiz.i18n.t(_model.nameLanguageRes.lanResTag, _model.name);
+            }
+            return createVNode("div", {
+              "class": [this.ns.be("legend", "item")],
+              "onClick": () => this.monthLegendClick(_legend)
+            }, [createVNode("div", {
+              "class": this.ns.bem("legend", "item", "tip"),
+              "style": {
+                background: _legend.isShow ? _legend == null ? void 0 : _legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")"),
+                color: _legend == null ? void 0 : _legend.color
+              }
+            }, null), createVNode("div", {
+              "class": this.ns.bem("legend", "item", "text")
+            }, [label])]);
+          })]), createVNode("div", {
             "class": this.ns.b("content-header")
           }, [createVNode(resolveComponent("el-date-picker"), {
             "modelValue": this.c.state.selectedDate,
@@ -459,23 +550,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
             }, _isSlot(_slot5 = ibiz.i18n.t("control.calendar.nextYear")) ? _slot5 : {
               default: () => [_slot5]
             })]
-          })]), createVNode("div", {
-            "class": this.ns.b("legend")
-          }, [this.c.model.sysCalendarItems && this.c.model.sysCalendarItems.length > 1 && ((_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.map((calendarItem) => {
-            let label = calendarItem.name;
-            if (calendarItem.nameLanguageRes) {
-              label = ibiz.i18n.t(calendarItem.nameLanguageRes.lanResTag, calendarItem.name);
-            }
-            return createVNode("div", {
-              "class": this.ns.e("calendar-item")
-            }, [createVNode("div", {
-              "class": this.ns.e("icon"),
-              "style": {
-                background: calendarItem.bkcolor,
-                color: calendarItem.color
-              }
-            }, null), label]);
-          }))])];
+          })])];
         },
         "date-cell": ({
           data
@@ -539,7 +614,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         "ref": "calendarRef",
         "viewType": this.c.model.calendarStyle,
         "events": this.c.state.items,
-        "legends": this.c.state.legends,
+        "legends": this.legendItems,
         "multiple": !this.c.state.singleSelect,
         "selectedData": this.c.state.selectedData,
         "onEventClick": (value) => {
@@ -557,6 +632,15 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
           const item = data[0];
           if (item)
             this.c.onDbRowClick(item);
+        },
+        "onEventContextmenu": (value) => {
+          const {
+            data,
+            evt
+          } = value;
+          const item = data[0];
+          if (item && evt)
+            this.onNodeContextmenu(item, evt);
         }
       }, _isSlot(slots) ? slots : {
         default: () => [slots]

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

@@ -1 +1 @@
-.ibiz-calendar-daily{width:100%;height:100%;flex:1;display:flex;flex-direction:column;overflow:hidden}.ibiz-calendar-daily__calendar-daily__head{width:100%;height:58px;min-height:58px;padding-bottom:0;display:flex;position:relative;z-index:100}.ibiz-calendar-daily__allday-info{min-width:90px;height:100%;padding-left:40px;color:#999;overflow:hidden;display:flex;align-items:center}.ibiz-calendar-daily__allday-info--work-items{width:100%;height:100%;padding-top:5px;overflow:hidden}.ibiz-calendar-daily__allday-info--work-items-scroll{height:100%;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__allday-info--work-items-body{height:auto}.ibiz-calendar-daily__allday-info--event-box{width:100%;height:22px;line-height:22px;padding:0 8px;margin-top:4px}.ibiz-calendar-daily__allday-info--event-box:nth-child(1){margin-top:0}.ibiz-calendar-daily__allday-info--event-content{display:block;width:100%;height:100%;border:none;outline:0;text-align:left;border-radius:4px;background:#f5f5f5;border-radius:4px;position:relative;cursor:pointer}.ibiz-calendar-daily__allday-info--event-content:active{animation:move 1s linear}.ibiz-calendar-daily__allday-info--morphing-animation{height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:pink;animation:move 1s linear}.ibiz-calendar-daily__allday-info--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__allday-info--event-icon{margin-right:6px}.ibiz-calendar-daily__allday-info--event-name{margin-right:6px}.ibiz-calendar-daily__allday-info--time-range{margin-right:6px}.ibiz-calendar-daily__allday-info--check{color:var(--ibiz-color-primary);position:absolute;right:6px;top:50%;transform:translate(0,-50%)}.ibiz-calendar-daily__allday-resize-line{width:100%;height:3px;background-color:var(--ibiz-color-border)}.ibiz-calendar-daily__resizable-handle{width:100%;height:10px;position:absolute;bottom:-4px;display:flex;align-items:center;cursor:row-resize}.ibiz-calendar-daily__scroll-area{flex:1;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__time-pane{height:auto;width:calc(100% - 5px);display:flex;flex-basis:0%;flex-grow:1;flex-shrink:1;position:relative}.ibiz-calendar-daily__time-pane--time-labels{width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border);position:sticky;left:0}.ibiz-calendar-daily__time-pane--time-label{margin-top:38px;height:22px;text-align:left}.ibiz-calendar-daily__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-daily__time-pane--time-columns{position:relative;flex:1;padding-bottom:59px}.ibiz-calendar-daily__time-pane--time-column{height:60px;border-top:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--time-column:first-child{border-top:none}.ibiz-calendar-daily__time-pane--time-column-last{border-bottom:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-daily__time-pane--container-scroll{position:relative;top:0;overflow:auto;height:100%;width:auto;overflow-y:hidden;overflow-x:auto}.ibiz-calendar-daily__time-pane--event-box{position:absolute;width:auto;height:auto;padding-left:4px}.ibiz-calendar-daily__time-pane--event-content{width:100%;height:100%;padding:12px 8px;line-height:100%;border:none;outline:0;text-align:left;overflow:hidden;position:relative;z-index:3;cursor:pointer}.ibiz-calendar-daily__time-pane--event-content:active{animation:pulse 1s linear}.ibiz-calendar-daily__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-daily__time-pane--event-summary{width:100%;height:100%;line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-daily__time-pane--current-time{width:calc(100% - 36px);margin-left:40px;position:absolute;top:38px;left:-3px;height:2px;background-color:var(--ibiz-color-primary);display:flex;align-items:center}.ibiz-calendar-daily__time-pane--current-time-label{width:48px;min-width:48px;max-width:18px;height:24px;text-align:center;line-height:24px;border:none;border-radius:4px;background:var(--ibiz-color-primary);color:#fff}.ibiz-calendar-daily__event-popover{padding:0;width:auto;height:auto;position:relative}.ibiz-calendar-daily__event-popover.el-popover.el-popper{padding:24px 12px 8px 12px}.ibiz-calendar-daily__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-daily__event-popover--scroll{width:auto;height:auto;min-width:200px;min-height:100px;overflow:auto}.ibiz-calendar-daily__event-popover--close{position:absolute;right:8px;top:8px;cursor:pointer}.ibiz-calendar-daily__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-daily__event-popover--close:hover .el-icon svg{fill:#fff}.ibiz-calendar-daily__event-popover .el-icon{font-size:20px;min-height:24px;min-width:24px;display:flex;justify-content:center;align-items:center}.ibiz-calendar-daily__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-daily{width:100%;height:100%;flex:1;display:flex;flex-direction:column;overflow:hidden}.ibiz-calendar-daily__calendar-daily__head{width:100%;height:58px;min-height:58px;padding-bottom:0;display:flex;position:relative;z-index:100}.ibiz-calendar-daily__allday-info{min-width:90px;height:100%;padding-left:40px;color:var(--ibiz-color-text-3);overflow:hidden;display:flex;align-items:center}.ibiz-calendar-daily__allday-info--work-items{width:100%;height:100%;padding-top:5px;overflow:hidden}.ibiz-calendar-daily__allday-info--work-items-scroll{height:100%;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__allday-info--work-items-body{height:auto}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data){height:100%}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data) .ibiz-no-data{min-height:100%;min-width:100%}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data) .ibiz-no-data .el-empty__description{margin:0}.ibiz-calendar-daily__allday-info--event-box{width:100%;height:22px;line-height:22px;padding:0 8px;margin-top:4px}.ibiz-calendar-daily__allday-info--event-box:nth-child(1){margin-top:0}.ibiz-calendar-daily__allday-info--event-content{display:block;width:100%;height:100%;border:none;outline:0;text-align:left;border-radius:4px;background:var(--ibiz-color-tertiary-light-hover);border-radius:4px;position:relative;cursor:pointer}.ibiz-calendar-daily__allday-info--event-content.is-selected-event{padding-right:20px}.ibiz-calendar-daily__allday-info--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__allday-info--event-icon{margin-right:6px}.ibiz-calendar-daily__allday-info--event-name{margin-right:6px}.ibiz-calendar-daily__allday-info--time-range{margin-right:6px}.ibiz-calendar-daily__allday-info--check{color:var(--ibiz-color-primary);position:absolute;right:6px;top:50%;transform:translate(0,-50%)}.ibiz-calendar-daily__allday-resize-line{width:100%;height:3px;background-color:var(--ibiz-color-border)}.ibiz-calendar-daily__resizable-handle{width:100%;height:10px;position:absolute;bottom:-4px;display:flex;align-items:center;cursor:row-resize}.ibiz-calendar-daily__scroll-area{flex:1;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__time-pane{height:auto;width:calc(100% - 5px);display:flex;flex-basis:0%;flex-grow:1;flex-shrink:1;position:relative}.ibiz-calendar-daily__time-pane--time-labels{width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border);position:sticky;left:0}.ibiz-calendar-daily__time-pane--time-label{margin-top:38px;height:22px;text-align:left}.ibiz-calendar-daily__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-daily__time-pane--time-columns{position:relative;flex:1;padding-bottom:59px}.ibiz-calendar-daily__time-pane--time-column{height:60px;border-top:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--time-column:first-child{border-top:none}.ibiz-calendar-daily__time-pane--time-column-last{border-bottom:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-daily__time-pane--container-scroll{position:relative;top:0;overflow:auto;height:100%;width:auto;overflow-y:hidden;overflow-x:auto}.ibiz-calendar-daily__time-pane--event-box{position:absolute;width:auto;height:auto;padding-left:4px}.ibiz-calendar-daily__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;min-height:22px;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-daily__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-daily__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-daily__time-pane--current-time{width:calc(100% - 36px);margin-left:40px;position:absolute;top:38px;left:-3px;height:2px;background-color:var(--ibiz-color-primary);display:flex;align-items:center}.ibiz-calendar-daily__time-pane--current-time-label{width:48px;min-width:48px;max-width:18px;height:24px;text-align:center;line-height:24px;border:none;border-radius:4px;background:var(--ibiz-color-primary);color:var(--ibiz-color-primary-text)}.ibiz-calendar-daily__event-popover{position:relative;width:auto;height:auto;padding:0}.ibiz-calendar-daily__event-popover.el-popover.el-popper{padding:8px}.ibiz-calendar-daily__event-popover:has(.ibiz-control-calendar-item-default){display:none!important}.ibiz-calendar-daily__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-daily__event-popover--scroll{width:auto;min-width:200px;height:auto;max-height:80%;overflow:auto;pointer-events:none}.ibiz-calendar-daily__event-popover--scroll .ibiz-control-calendar-item:last-child{margin-bottom:0}.ibiz-calendar-daily__event-popover--scroll .ibiz-control-calendar-item.is-active{background-color:transparent;border-color:transparent}.ibiz-calendar-daily__event-popover--close{position:absolute;top:8px;right:8px;display:none;cursor:pointer}.ibiz-calendar-daily__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-daily__event-popover--close:hover .el-icon svg{fill:var(--ibiz-color-white)}.ibiz-calendar-daily__event-popover .el-icon{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;font-size:20px}.ibiz-calendar-daily__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}

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

@@ -8,10 +8,12 @@ export declare const CalendarDaily: import("vue").DefineComponent<import("@ibiz-
     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-daily/calendar-daily.mjs

@@ -1,4 +1,4 @@
-import { watch, onMounted, onUnmounted, createVNode, 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';
@@ -6,7 +6,7 @@ import '../util/index.mjs';
 import { useCalendarDaily } from './use-calendar-daily.mjs';
 import './calendar-daily.css';
 import { calendarDailyProps, calendarDailyEmits } from '../interface/calendar-daily.mjs';
-import { isToday } from '../util/util.mjs';
+import { handlePopClose, closeIcon, isToday } from '../util/util.mjs';
 
 "use strict";
 const CalendarDaily = /* @__PURE__ */ defineComponent({
@@ -27,11 +27,13 @@ const CalendarDaily = /* @__PURE__ */ defineComponent({
       curTimeTimer,
       calendarDaily,
       selectedData,
-      eventClick,
+      handleEventClick,
+      handleEventDblClick,
       handleDrag,
       handleDragStart,
       handleCurTime,
-      initDrawData
+      initDrawData,
+      eventContextmenu
     } = useCalendarDaily(props, emit);
     watch(() => props.selectedData, () => {
       if (props.selectedData && props.selectedData.length > 0) {
@@ -58,19 +60,31 @@ const CalendarDaily = /* @__PURE__ */ defineComponent({
     });
     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
       }, [createVNode("button", {
         "class": [ns.em(classEName, "event-content"), event.isSelectedEvent ? "is-selected-event" : "", event.classname],
-        "onClick": () => eventClick(event, "head"),
-        "style": eventContentStyle
+        "onClick": () => {
+          handleEventClick(event, "head");
+        },
+        "onDblclick": () => {
+          handleEventDblClick(event, "head");
+        },
+        "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("".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": {
@@ -82,6 +96,41 @@ const CalendarDaily = /* @__PURE__ */ defineComponent({
         "class": ["fa fa-check", ns.em(classEName, "check")]
       }, null) : ""])]);
     };
+    const renderPopover = (content, event, placement) => {
+      if (!props.showDetail) {
+        return content;
+      }
+      const _tempEvent = {
+        ...event,
+        color: "",
+        bkColor: ""
+      };
+      return createVNode(resolveComponent("el-popover"), {
+        "show-after": 100,
+        "offset": 4,
+        "width": "auto",
+        "popper-class": [ns.e("event-popover")],
+        "placement": placement || "right-start"
+      }, {
+        reference: () => content,
+        default: () => {
+          var _a;
+          return createVNode("div", {
+            "class": [ns.em("event-popover", "body")]
+          }, [createVNode("div", {
+            "class": [ns.em("event-popover", "close")],
+            "onClick": (el) => handlePopClose(el),
+            "innerHTML": closeIcon
+          }, 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: _tempEvent
+          }) : createVNode("div", {
+            "class": [ns.em("event-popover", "content")]
+          }, ["".concat(event.text || "", " ").concat(event.timeRange || "")])])]);
+        }
+      });
+    };
     const renderHeader = () => {
       return createVNode("div", {
         "class": [ns.e("calendar-daily__head")],
@@ -96,14 +145,16 @@ const CalendarDaily = /* @__PURE__ */ defineComponent({
         "class": ns.em("allday-info", "work-items-scroll")
       }, [createVNode("div", {
         "class": ns.em("allday-info", "work-items-body")
-      }, [events.value.map((event, index) => {
+      }, [events.value.length > 0 ? events.value.map((event, index) => {
         const eventBoxStyle = {};
         const eventContentStyle = {
-          color: event.color,
           background: event.bkColorFade
         };
-        return renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "allday-info");
-      })])])]), createVNode("div", {
+        const tempContent = renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "allday-info");
+        return renderPopover(tempContent, event, "bottom");
+      }) : createVNode(resolveComponent("iBizNoData"), {
+        "hideNoDataImage": true
+      }, null)])])]), createVNode("div", {
         "class": ns.e("resizable-handle"),
         "draggable": "true",
         "onDrag": (event) => handleDrag(event),
@@ -146,11 +197,10 @@ const CalendarDaily = /* @__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, "event", "time-pane");
-        return tempContent;
+        const tempContent = renderEventItem("content", eventBoxStyle, eventContentStyle, event, index, "", "time-pane");
+        return renderPopover(tempContent, event);
       })])])]), isToday(props == null ? void 0 : props.selectedDay, /* @__PURE__ */ new Date()) ? createVNode("div", {
         "class": ns.em("time-pane", "current-time"),
         "style": {

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

@@ -7,10 +7,12 @@ export declare const IBizCalendarDaily: import("@ibiz-template/vue3-util").TypeW
     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-daily/use-calendar-daily.d.ts

@@ -149,6 +149,8 @@ export declare const useCalendarDaily: (props: CalendarDailyProps, emit: SetupCo
     handleCurTime: () => void;
     handleDrag: (event: DragEvent) => void;
     handleDragStart: (event: DragEvent) => void;
-    eventClick: (item: IUIEvent, location: string) => Promise<void>;
+    handleEventClick: (item: IUIEvent, location: string) => void;
+    handleEventDblClick: (item: IUIEvent, location: string) => void;
+    eventContextmenu: (item: IUIEvent, evt: MouseEvent) => Promise<void>;
     initDrawData: () => string[];
 };