vxe-pc-ui 4.12.0 → 4.12.2

package/lib/calendar/src/calendar.js

@@ -9,9 +9,16 @@ var _comp = require("../../ui/src/comp");
 var _ui = require("../../ui");
 var _util = require("../../date-panel/src/util");
 var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _log = require("../../ui/src/log");
 var _button = _interopRequireDefault(require("../../button/src/button"));
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const {
+  menus,
+  getConfig,
+  getI18n
+} = _ui.VxeUI;
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeCalendar',
   props: {
@@ -23,7 +30,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     className: String,
     size: {
       type: String,
-      default: () => (0, _ui.getConfig)().calendar.size || (0, _ui.getConfig)().size
+      default: () => getConfig().calendar.size || getConfig().size
     },
     multiple: Boolean,
     width: [String, Number],
@@ -31,34 +38,35 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     // date、week、month、quarter、year
     minDate: {
       type: [String, Number, Date],
-      default: () => (0, _ui.getConfig)().calendar.minDate
+      default: () => getConfig().calendar.minDate
     },
     maxDate: {
       type: [String, Number, Date],
-      default: () => (0, _ui.getConfig)().calendar.maxDate
+      default: () => getConfig().calendar.maxDate
     },
     startDay: {
       type: [String, Number],
-      default: () => (0, _ui.getConfig)().calendar.startDay
+      default: () => getConfig().calendar.startDay
     },
     labelFormat: String,
     valueFormat: String,
     festivalMethod: {
       type: Function,
-      default: () => (0, _ui.getConfig)().calendar.festivalMethod
+      default: () => getConfig().calendar.festivalMethod
     },
     disabledMethod: {
       type: Function,
-      default: () => (0, _ui.getConfig)().calendar.disabledMethod
+      default: () => getConfig().calendar.disabledMethod
     },
-    cellStyle: Function,
+    cellStyle: [Object, Function],
+    menuConfig: Object,
     // week
     selectDay: {
       type: [String, Number],
-      default: () => (0, _ui.getConfig)().calendar.selectDay
+      default: () => getConfig().calendar.selectDay
     }
   },
-  emits: ['update:modelValue', 'change', 'click', 'date-prev', 'date-today', 'date-next', 'view-change'],
+  emits: ['update:modelValue', 'change', 'cell-click', 'date-prev', 'date-today', 'date-next', 'view-change', 'cell-menu', 'menu-click'],
   setup(props, context) {
     const {
       emit
@@ -122,6 +130,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeSupportMultiples = (0, _vue.computed)(() => {
       return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
     });
+    const computeMenuOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().calendar.menuConfig, props.menuConfig);
+    });
     const computeDateListValue = (0, _vue.computed)(() => {
       const {
         multiple
@@ -207,7 +218,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const isCalendarType = computeIsCalendarType.value;
       const dateValueFormat = computeDateValueFormat.value;
       if (isCalendarType) {
-        return labelFormat || dateValueFormat || (0, _ui.getI18n)(`vxe.input.date.labelFormat.${props.type}`);
+        return labelFormat || dateValueFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
       }
       return null;
     });
@@ -261,11 +272,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : '';
         } else {
           y = `${year}`;
-          m = month ? (0, _ui.getI18n)(`vxe.input.date.m${month}`) : '-';
+          m = month ? getI18n('vxe.calendar.monthLabel', [month]) : '-';
         }
       }
       return {
-        y,
+        y: getI18n('vxe.calendar.yearLabel', [y]),
         m
       };
     });
@@ -299,7 +310,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return weekDatas.map(day => {
           return {
             value: day,
-            label: (0, _ui.getI18n)(`vxe.input.date.weeks.w${day}`)
+            label: getI18n(`vxe.input.date.weeks.w${day}`)
           };
         });
       }
@@ -310,7 +321,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (isCalendarType) {
         const dateHeaders = computeDateHeaders.value;
         return [{
-          label: (0, _ui.getI18n)('vxe.input.date.weeks.w')
+          label: getI18n('vxe.input.date.weeks.w')
         }].concat(dateHeaders);
       }
       return [];
@@ -753,11 +764,85 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       }
     };
-    const dateSelectEvent = item => {
+    const dateClickEvent = (evnt, item) => {
+      const {
+        type
+      } = props;
+      const {
+        datePanelType
+      } = reactData;
+      const {
+        date
+      } = item;
       if (!isDateDisabled(item)) {
-        dateSelectItem(item.date);
+        dateSelectItem(date);
+        dispatchEvent('cell-click', {
+          date,
+          type,
+          viewType: datePanelType
+        }, evnt);
       }
     };
+    const datContextmenuEvent = (evnt, item) => {
+      const {
+        type
+      } = props;
+      const {
+        datePanelType
+      } = reactData;
+      const {
+        menuConfig
+      } = props;
+      const menuOpts = computeMenuOpts.value;
+      if (menuConfig ? (0, _utils.isEnableConf)(menuOpts) : menuOpts.enabled) {
+        const {
+          options,
+          visibleMethod
+        } = menuOpts;
+        const {
+          date
+        } = item;
+        if (!visibleMethod || visibleMethod({
+          $calendar: $xeCalendar,
+          options,
+          date,
+          type,
+          viewType: datePanelType
+        })) {
+          if (_ui.VxeUI.contextMenu) {
+            _ui.VxeUI.contextMenu.openByEvent(evnt, {
+              options,
+              events: {
+                optionClick(eventParams) {
+                  const {
+                    option
+                  } = eventParams;
+                  const gMenuOpts = menus.get(option.code);
+                  const cmMethod = gMenuOpts ? gMenuOpts.calendarMenuMethod : null;
+                  const params = {
+                    menu: option,
+                    date,
+                    type,
+                    viewType: datePanelType,
+                    $event: evnt,
+                    $calendar: $xeCalendar
+                  };
+                  if (cmMethod) {
+                    cmMethod(params, evnt);
+                  }
+                  dispatchEvent('menu-click', params, eventParams.$event);
+                }
+              }
+            });
+          }
+        }
+      }
+      dispatchEvent('cell-menu', {
+        date: item.date,
+        type,
+        viewType: datePanelType
+      }, evnt);
+    };
     const dateMoveDay = offsetDay => {
       if (!isDateDisabled({
         date: offsetDay
@@ -818,6 +903,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       }
     };
+    const dateMouseleaveEvent = () => {
+      reactData.datePanelValue = null;
+    };
     const dateConfirmEvent = () => {};
     const dateOpenPanel = () => {
       const {
@@ -858,11 +946,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           label: festivalItem.extra
         } : festivalItem.extra : null;
         const labels = [(0, _vue.h)('span', {
-          class: ['vxe-calendar--date-label', {
+          class: ['vxe-calendar--label', {
             'is-notice': festivalItem.notice
           }]
-        }, extraItem && extraItem.label ? [(0, _vue.h)('span', `${label || ''}`), (0, _vue.h)('span', {
-          class: ['vxe-calendar--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
+        }, extraItem && extraItem.label ? [(0, _vue.h)('span', {
+          class: 'vxe-calendar--label--number'
+        }, `${label || ''}`), (0, _vue.h)('span', {
+          class: ['vxe-calendar--label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
           style: extraItem.style
         }, _xeUtils.default.toValueString(extraItem.label))] : [`${label || ''}`])];
         const festivalLabel = festivalItem.label;
@@ -870,12 +960,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           // 默认最多支持3个节日重叠
           const festivalLabels = _xeUtils.default.toValueString(festivalLabel).split(',');
           labels.push((0, _vue.h)('span', {
-            class: ['vxe-calendar--date-festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
+            class: ['vxe-calendar--festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
             style: festivalItem.style
           }, [festivalLabels.length > 1 ? (0, _vue.h)('span', {
-            class: ['vxe-calendar--date-festival--overlap', `overlap--${festivalLabels.length}`]
+            class: ['vxe-calendar--festival--overlap', `overlap--${festivalLabels.length}`]
           }, festivalLabels.map(label => (0, _vue.h)('span', label.substring(0, 3)))) : (0, _vue.h)('span', {
-            class: 'vxe-calendar--date-festival--label'
+            class: 'vxe-calendar--festival--label'
           }, festivalLabels[0].substring(0, 3))]));
         }
         return labels;
@@ -896,25 +986,44 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const dayDatas = computeDayDatas.value;
       const dateListValue = computeDateListValue.value;
       const matchFormat = 'yyyyMMdd';
-      return [(0, _vue.h)('table', {
-        class: `vxe-calendar--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0, _vue.h)('tr', dateHeaders.map(item => {
-        return (0, _vue.h)('th', {
-          class: 'vxe-calendar--view-th'
-        }, item.label);
-      })), ...dayDatas.map(rows => {
-        return (0, _vue.h)('tr', rows.map(item => {
-          return (0, _vue.h)('td', {
-            class: ['vxe-calendar--view-td', {
+      return [(0, _vue.h)('div', {
+        class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-calendar--view-header',
+        style: {
+          height: `${100 / (dayDatas.length + 1)}%`
+        }
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-calendar--view-row'
+      }, dateHeaders.map(item => {
+        return (0, _vue.h)('div', {
+          class: 'vxe-calendar--view-item',
+          style: {
+            width: `${100 / dateHeaders.length}%`
+          }
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-calendar--view-item-inner'
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-calendar--view-item-label'
+        }, item.label)])]);
+      }))]), (0, _vue.h)('div', {
+        class: 'vxe-calendar--view-body'
+      }, dayDatas.map(rows => {
+        return (0, _vue.h)('div', {
+          class: 'vxe-calendar--view-row',
+          style: {
+            height: `${100 / dayDatas.length}%`
+          }
+        }, rows.map(item => {
+          const isSelected = multiple ? dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat)) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+          return (0, _vue.h)('div', {
+            class: ['vxe-calendar--view-item', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': item.isNow,
               'is--next': item.isNext,
               'is--disabled': isDateDisabled(item),
-              'is--selected': multiple ? dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat)) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--selected': isSelected,
               'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
             }],
             style: Object.assign({}, _xeUtils.default.isFunction(cellStyle) ? cellStyle({
@@ -922,12 +1031,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               viewType: datePanelType,
               date: item.date,
               $calendar: $xeCalendar
-            }) : cellStyle),
-            onClick: () => dateSelectEvent(item),
-            onMouseenter: () => dateMouseenterEvent(item)
-          }, renderDateLabel(item, item.label));
+            }) : cellStyle, {
+              width: `${100 / rows.length}%`
+            }),
+            onClick: evnt => dateClickEvent(evnt, item),
+            onContextmenu: evnt => datContextmenuEvent(evnt, item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0, _vue.h)('div', {
+            class: 'vxe-calendar--view-item-inner'
+          }, renderDateLabel(item, item.label))]);
         }));
-      })])];
+      }))])];
     };
     const renderDateWeekTable = () => {
       const {
@@ -943,24 +1058,43 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const weekDates = computeWeekDates.value;
       const dateListValue = computeDateListValue.value;
       const matchFormat = 'yyyyMMdd';
-      return [(0, _vue.h)('table', {
-        class: `vxe-calendar--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0, _vue.h)('tr', weekHeaders.map(item => {
-        return (0, _vue.h)('td', {
-          class: 'vxe-calendar--view-th'
-        }, item.label);
-      })), ...weekDates.map(rows => {
+      return [(0, _vue.h)('div', {
+        class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-calendar--view-header',
+        style: {
+          height: `${100 / (weekDates.length + 1)}%`
+        }
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-calendar--view-row'
+      }, weekHeaders.map((item, rIndex) => {
+        return (0, _vue.h)('div', {
+          class: 'vxe-calendar--view-item',
+          style: {
+            width: `${rIndex ? 13 : 9}%`
+          }
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-calendar--view-item-inner'
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-calendar--view-item-label'
+        }, item.label)])]);
+      }))]), (0, _vue.h)('div', {
+        class: 'vxe-calendar--view-body'
+      }, weekDates.map(rows => {
         const isSelected = multiple ? rows.some(item => dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat))) : rows.some(item => _xeUtils.default.isDateSame(dateValue, item.date, matchFormat));
         const isHover = rows.some(item => _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat));
-        return (0, _vue.h)('tr', rows.map(item => {
-          return (0, _vue.h)('td', {
-            class: ['vxe-calendar--view-td', {
+        const isNowWeek = rows.some(item => item.isNow);
+        return (0, _vue.h)('div', {
+          class: 'vxe-calendar--view-row',
+          style: {
+            height: `${100 / weekDates.length}%`
+          }
+        }, rows.map((item, rIndex) => {
+          return (0, _vue.h)('div', {
+            class: ['vxe-calendar--view-item', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
-              'is--now': item.isNow,
+              'is--now': rIndex ? item.isNow : isNowWeek,
               'is--next': item.isNext,
               'is--disabled': isDateDisabled(item),
               'is--selected': isSelected,
@@ -971,13 +1105,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               viewType: datePanelType,
               date: item.date,
               $calendar: $xeCalendar
-            }) : cellStyle),
-            // event
-            onClick: () => dateSelectEvent(item),
-            onMouseenter: () => dateMouseenterEvent(item)
-          }, renderDateLabel(item, item.label));
+            }) : cellStyle, {
+              width: `${rIndex ? 13 : 9}%`
+            }),
+            onClick: evnt => dateClickEvent(evnt, item),
+            onContextmenu: evnt => datContextmenuEvent(evnt, item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0, _vue.h)('div', {
+            class: 'vxe-calendar--view-item-inner'
+          }, renderDateLabel(item, item.label))]);
         }));
-      })])];
+      }))])];
     };
     const renderDateMonthTable = () => {
       const {
@@ -992,21 +1131,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const monthDatas = computeMonthDatas.value;
       const dateListValue = computeDateListValue.value;
       const matchFormat = 'yyyyMM';
-      return [(0, _vue.h)('table', {
-        class: `vxe-calendar--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0, _vue.h)('tbody', monthDatas.map(rows => {
-        return (0, _vue.h)('tr', rows.map(item => {
-          return (0, _vue.h)('td', {
-            class: ['vxe-calendar--view-td', {
+      return [(0, _vue.h)('div', {
+        class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-calendar--view-body'
+      }, monthDatas.map(rows => {
+        return (0, _vue.h)('div', {
+          class: 'vxe-calendar--view-row',
+          style: {
+            height: `${100 / monthDatas.length}%`
+          }
+        }, rows.map(item => {
+          const isSelected = multiple ? dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat)) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+          return (0, _vue.h)('div', {
+            class: ['vxe-calendar--view-item', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': item.isNow,
               'is--next': item.isNext,
               'is--disabled': isDateDisabled(item),
-              'is--selected': multiple ? dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat)) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--selected': isSelected,
               'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
             }],
             style: Object.assign({}, _xeUtils.default.isFunction(cellStyle) ? cellStyle({
@@ -1014,10 +1158,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               viewType: datePanelType,
               date: item.date,
               $calendar: $xeCalendar
-            }) : cellStyle),
-            onClick: () => dateSelectEvent(item),
-            onMouseenter: () => dateMouseenterEvent(item)
-          }, renderDateLabel(item, (0, _ui.getI18n)(`vxe.input.date.months.m${item.month}`)));
+            }) : cellStyle, {
+              width: `${100 / rows.length}%`
+            }),
+            onClick: evnt => dateClickEvent(evnt, item),
+            onContextmenu: evnt => datContextmenuEvent(evnt, item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0, _vue.h)('div', {
+            class: 'vxe-calendar--view-item-inner'
+          }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)))]);
         }));
       }))])];
     };
@@ -1034,21 +1184,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const quarterDatas = computeQuarterDatas.value;
       const dateListValue = computeDateListValue.value;
       const matchFormat = 'yyyyq';
-      return [(0, _vue.h)('table', {
-        class: `vxe-calendar--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0, _vue.h)('tbody', quarterDatas.map(rows => {
-        return (0, _vue.h)('tr', rows.map(item => {
-          return (0, _vue.h)('td', {
-            class: ['vxe-calendar--view-td', {
+      return [(0, _vue.h)('div', {
+        class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-calendar--view-body'
+      }, quarterDatas.map(rows => {
+        return (0, _vue.h)('div', {
+          class: 'vxe-calendar--view-row',
+          style: {
+            height: `${100 / quarterDatas.length}%`
+          }
+        }, rows.map(item => {
+          const isSelected = multiple ? dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat)) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+          return (0, _vue.h)('div', {
+            class: ['vxe-calendar--view-item', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': item.isNow,
               'is--next': item.isNext,
               'is--disabled': isDateDisabled(item),
-              'is--selected': multiple ? dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat)) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--selected': isSelected,
               'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
             }],
             style: Object.assign({}, _xeUtils.default.isFunction(cellStyle) ? cellStyle({
@@ -1056,10 +1211,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               viewType: datePanelType,
               date: item.date,
               $calendar: $xeCalendar
-            }) : cellStyle),
-            onClick: () => dateSelectEvent(item),
-            onMouseenter: () => dateMouseenterEvent(item)
-          }, renderDateLabel(item, (0, _ui.getI18n)(`vxe.input.date.quarters.q${item.quarter}`)));
+            }) : cellStyle, {
+              width: `${100 / rows.length}%`
+            }),
+            onClick: evnt => dateClickEvent(evnt, item),
+            onContextmenu: evnt => datContextmenuEvent(evnt, item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0, _vue.h)('div', {
+            class: 'vxe-calendar--view-item-inner'
+          }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)))]);
         }));
       }))])];
     };
@@ -1076,21 +1237,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const yearDatas = computeYearDatas.value;
       const dateListValue = computeDateListValue.value;
       const matchFormat = 'yyyy';
-      return [(0, _vue.h)('table', {
-        class: `vxe-calendar--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0, _vue.h)('tbody', yearDatas.map(rows => {
-        return (0, _vue.h)('tr', rows.map(item => {
-          return (0, _vue.h)('td', {
-            class: ['vxe-calendar--view-td', {
+      return [(0, _vue.h)('div', {
+        class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-calendar--view-body'
+      }, yearDatas.map(rows => {
+        return (0, _vue.h)('div', {
+          class: 'vxe-calendar--view-row',
+          style: {
+            height: `${100 / yearDatas.length}%`
+          }
+        }, rows.map(item => {
+          const isSelected = multiple ? dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat)) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+          return (0, _vue.h)('div', {
+            class: ['vxe-calendar--view-item', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': item.isNow,
               'is--next': item.isNext,
               'is--disabled': isDateDisabled(item),
-              'is--selected': multiple ? dateListValue.some(val => _xeUtils.default.isDateSame(val, item.date, matchFormat)) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--selected': isSelected,
               'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
             }],
             style: Object.assign({}, _xeUtils.default.isFunction(cellStyle) ? cellStyle({
@@ -1098,10 +1264,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               viewType: datePanelType,
               date: item.date,
               $calendar: $xeCalendar
-            }) : cellStyle),
-            onClick: () => dateSelectEvent(item),
-            onMouseenter: () => dateMouseenterEvent(item)
-          }, renderDateLabel(item, item.year));
+            }) : cellStyle, {
+              width: `${100 / rows.length}%`
+            }),
+            onClick: evnt => dateClickEvent(evnt, item),
+            onContextmenu: evnt => datContextmenuEvent(evnt, item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0, _vue.h)('div', {
+            class: 'vxe-calendar--view-item-inner'
+          }, renderDateLabel(item, item.year))]);
         }));
       }))])];
     };
@@ -1168,7 +1340,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-calendar--confirm',
         type: 'button',
         onClick: dateConfirmEvent
-      }, (0, _ui.getI18n)('vxe.button.confirm'))]) : null])]), (0, _vue.h)('div', {
+      }, getI18n('vxe.button.confirm'))]) : null])]), (0, _vue.h)('div', {
         class: 'vxe-calendar--body'
       }, renderDateTable())];
     };
@@ -1225,6 +1397,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     });
     (0, _vue.onMounted)(() => {
+      const {
+        menuConfig
+      } = props;
+      const VxeUIContextMenu = _ui.VxeUI.getComponent('VxeContextMenu');
+      if (menuConfig && !VxeUIContextMenu) {
+        (0, _log.errLog)('vxe.error.reqComp', ['vxe-context-menu']);
+      }
       dateOpenPanel();
     });
     initValue();