diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx
index e793a4b56..fdeb43299 100644
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@@ -8,7 +8,6 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import interopDefault from '../_util/interopDefault';
 import { ConfigConsumerProps } from '../config-provider';
 import enUS from './locale/en_US';
-import Base from '../base';
 import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util';
 
 function noop() {
@@ -248,9 +247,8 @@ const Calendar = {
 };
 
 /* istanbul ignore next */
-Calendar.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Calendar.name, Calendar);
+Calendar.install = function(app) {
+  app.component(Calendar.name, Calendar);
 };
 export { HeaderProps } from './Header';
 export default Calendar;
diff --git a/components/vc-calendar/index.js b/components/vc-calendar/index.js
index d00e1f038..56945f6d2 100644
--- a/components/vc-calendar/index.js
+++ b/components/vc-calendar/index.js
@@ -1,8 +1,4 @@
 // based on rc-calendar 9.15.10
-import Vue from 'vue';
-import ref from 'vue-ref';
 import Calendar from './src/';
 
-Vue.use(ref, { name: 'ant-ref' });
-
 export default Calendar;
diff --git a/components/vc-calendar/src/Calendar.jsx b/components/vc-calendar/src/Calendar.jsx
index f0208573d..83fb1c100 100644
--- a/components/vc-calendar/src/Calendar.jsx
+++ b/components/vc-calendar/src/Calendar.jsx
@@ -23,6 +23,7 @@ const getMomentObjectIfValid = date => {
 
 const Calendar = {
   name: 'Calendar',
+  inheritAttrs: false,
   props: {
     locale: PropTypes.object.def(enUs),
     format: PropTypes.oneOfType([
@@ -273,22 +274,18 @@ const Calendar = {
     if (timePicker && showTimePicker) {
       const timePickerOriginProps = getOptionProps(timePicker);
       const timePickerProps = {
-        props: {
-          showHour: true,
-          showSecond: true,
-          showMinute: true,
-          ...timePickerOriginProps,
-          ...disabledTimeConfig,
-          value: sSelectedValue,
-          disabledTime,
-        },
-        on: {
-          change: this.onDateInputChange,
-        },
+        showHour: true,
+        showSecond: true,
+        showMinute: true,
+        ...timePickerOriginProps,
+        ...disabledTimeConfig,
+        value: sSelectedValue,
+        disabledTime,
+        onChange: this.onDateInputChange,
       };
 
       if (timePickerOriginProps.defaultValue !== undefined) {
-        timePickerProps.props.defaultOpenValue = timePickerOriginProps.defaultValue;
+        timePickerProps.defaultOpenValue = timePickerOriginProps.defaultValue;
       }
       timePickerEle = cloneElement(timePicker, timePickerProps);
     }
diff --git a/components/vc-calendar/src/FullCalendar.jsx b/components/vc-calendar/src/FullCalendar.jsx
index 136f6d1a7..f8410607b 100644
--- a/components/vc-calendar/src/FullCalendar.jsx
+++ b/components/vc-calendar/src/FullCalendar.jsx
@@ -1,7 +1,7 @@
 import moment from 'moment';
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, hasProp, getListeners } from '../../_util/props-util';
+import { getOptionProps, hasProp } from '../../_util/props-util';
 import DateTable from './date/DateTable';
 import MonthTable from './month/MonthTable';
 import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
@@ -10,6 +10,7 @@ import CalendarHeader from './full-calendar/CalendarHeader';
 import enUs from './locale/en_US';
 const FullCalendar = {
   name: 'FullCalendar',
+  inheritAttrs: false,
   props: {
     locale: PropTypes.object.def(enUs),
     format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
@@ -103,17 +104,13 @@ const FullCalendar = {
       } else {
         const TheHeader = headerComponent || CalendarHeader;
         const headerProps = {
-          props: {
-            ...props,
-            prefixCls: `${prefixCls}-full`,
-            type,
-            value,
-          },
-          on: {
-            ...getListeners(this),
-            typeChange: this.setType,
-            valueChange: this.setValue,
-          },
+          ...props,
+          ...this.$attrs,
+          prefixCls: `${prefixCls}-full`,
+          type,
+          value,
+          onTypeChange: this.setType,
+          onValueChange: this.setValue,
           key: 'calendar-header',
         };
         header = <TheHeader {...headerProps} />;
diff --git a/components/vc-calendar/src/MonthCalendar.jsx b/components/vc-calendar/src/MonthCalendar.jsx
index 43acc7415..d36b929c2 100644
--- a/components/vc-calendar/src/MonthCalendar.jsx
+++ b/components/vc-calendar/src/MonthCalendar.jsx
@@ -9,6 +9,7 @@ import CommonMixin from './mixin/CommonMixin';
 import enUs from './locale/en_US';
 const MonthCalendar = {
   name: 'MonthCalendar',
+  inheritAttrs: false,
   props: {
     locale: PropTypes.object.def(enUs),
     format: PropTypes.string,
@@ -90,12 +91,11 @@ const MonthCalendar = {
   },
 
   render() {
-    const { mode, sValue: value, $props: props, $scopedSlots } = this;
+    const { mode, sValue: value, $props: props, $slots } = this;
     const { prefixCls, locale, disabledDate } = props;
-    const monthCellRender = this.monthCellRender || $scopedSlots.monthCellRender;
-    const monthCellContentRender =
-      this.monthCellContentRender || $scopedSlots.monthCellContentRender;
-    const renderFooter = this.renderFooter || $scopedSlots.renderFooter;
+    const monthCellRender = this.monthCellRender || $slots.monthCellRender;
+    const monthCellContentRender = this.monthCellContentRender || $slots.monthCellContentRender;
+    const renderFooter = this.renderFooter || $slots.renderFooter;
     const children = (
       <div class={`${prefixCls}-month-calendar-content`}>
         <div class={`${prefixCls}-month-header-wrap`}>
diff --git a/components/vc-calendar/src/Picker.jsx b/components/vc-calendar/src/Picker.jsx
index 9386e1a91..9bd8f48e1 100644
--- a/components/vc-calendar/src/Picker.jsx
+++ b/components/vc-calendar/src/Picker.jsx
@@ -1,6 +1,6 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, hasProp, getEvents, getStyle } from '../../_util/props-util';
+import { getOptionProps, hasProp, getEvents, findDOMNode } from '../../_util/props-util';
 import { cloneElement } from '../../_util/vnode';
 import createChainedFunction from '../../_util/createChainedFunction';
 import KeyCode from '../../_util/KeyCode';
@@ -19,8 +19,14 @@ const TimeType = {
     }
   },
 };
+
+function refFn(field, component) {
+  this[field] = component;
+}
+
 const Picker = {
   name: 'Picker',
+  inheritAttrs: false,
   props: {
     animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     disabled: PropTypes.bool,
@@ -40,11 +46,13 @@ const Picker = {
     align: PropTypes.object.def(() => ({})),
     dropdownClassName: PropTypes.string,
     dateRender: PropTypes.func,
+    children: PropTypes.func.isRequired,
   },
   mixins: [BaseMixin],
 
   data() {
     const props = this.$props;
+    this.saveCalendarRef = refFn.bind(this, 'calendarInstance');
     let open;
     if (hasProp(this, 'open')) {
       open = props.open;
@@ -140,18 +148,14 @@ const Picker = {
       const { sValue: value } = this;
       const defaultValue = value;
       const extraProps = {
-        ref: 'calendarInstance',
-        props: {
-          defaultValue: defaultValue || calendarProps.defaultValue,
-          selectedValue: value,
-        },
-        on: {
-          keydown: this.onCalendarKeyDown,
-          ok: createChainedFunction(calendarEvents.ok, this.onCalendarOk),
-          select: createChainedFunction(calendarEvents.select, this.onCalendarSelect),
-          clear: createChainedFunction(calendarEvents.clear, this.onCalendarClear),
-          blur: createChainedFunction(calendarEvents.blur, this.onCalendarBlur),
-        },
+        ref: this.saveCalendarRef,
+        defaultValue: defaultValue || calendarProps.defaultValue,
+        selectedValue: value,
+        onKeydown: this.onCalendarKeyDown,
+        onOk: createChainedFunction(calendarEvents.onOk, this.onCalendarOk),
+        onSelect: createChainedFunction(calendarEvents.onSelect, this.onCalendarSelect),
+        onClear: createChainedFunction(calendarEvents.onClear, this.onCalendarClear),
+        onBlur: createChainedFunction(calendarEvents.onBlur, this.onCalendarBlur),
       };
 
       return cloneElement(props.calendar, extraProps);
@@ -181,20 +185,19 @@ const Picker = {
 
     focus() {
       if (!this.sOpen) {
-        this.$el.focus();
+        findDOMNode(this).focus();
       }
     },
 
     focusCalendar() {
-      if (this.sOpen && this.calendarInstance && this.calendarInstance.componentInstance) {
-        this.calendarInstance.componentInstance.focus();
+      if (this.sOpen && !!this.calendarInstance) {
+        this.calendarInstance.focus();
       }
     },
   },
 
   render() {
     const props = getOptionProps(this);
-    const style = getStyle(this);
     const {
       prefixCls,
       placement,
@@ -206,13 +209,13 @@ const Picker = {
       transitionName,
     } = props;
     const { sValue, sOpen } = this;
-    const children = this.$scopedSlots.default;
     const childrenState = {
       value: sValue,
       open: sOpen,
     };
-    if (this.sOpen || !this.calendarInstance) {
-      this.calendarInstance = this.getCalendarElement();
+    const children = this.children(childrenState, props);
+    if (this.sOpen || !this.calendarElement) {
+      this.calendarElement = this.getCalendarElement();
     }
 
     return (
@@ -223,16 +226,16 @@ const Picker = {
         action={disabled && !sOpen ? [] : ['click']}
         destroyPopupOnHide
         getPopupContainer={getCalendarContainer}
-        popupStyle={style}
+        popupStyle={this.$attrs.style || {}}
         popupAnimation={animation}
         popupTransitionName={transitionName}
         popupVisible={sOpen}
         onPopupVisibleChange={this.onVisibleChange}
         prefixCls={prefixCls}
         popupClassName={dropdownClassName}
+        popup={this.calendarElement}
       >
-        <template slot="popup">{this.calendarInstance}</template>
-        {cloneElement(children(childrenState, props), { on: { keydown: this.onKeyDown } })}
+        {cloneElement(children, { onKeydown: this.onKeyDown })}
       </Trigger>
     );
   },
diff --git a/components/vc-calendar/src/RangeCalendar.jsx b/components/vc-calendar/src/RangeCalendar.jsx
index 7922d691a..41baa648c 100644
--- a/components/vc-calendar/src/RangeCalendar.jsx
+++ b/components/vc-calendar/src/RangeCalendar.jsx
@@ -1,12 +1,6 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import {
-  getOptionProps,
-  hasProp,
-  mergeProps,
-  getComponent,
-  getListeners,
-} from '../../_util/props-util';
+import { getOptionProps, hasProp, getComponent } from '../../_util/props-util';
 import moment from 'moment';
 import KeyCode from '../../_util/KeyCode';
 import CalendarPart from './range-calendar/CalendarPart';
@@ -86,6 +80,8 @@ function onInputSelect(direction, value, cause) {
 }
 
 const RangeCalendar = {
+  name: 'RangeCalendar',
+  inheritAttrs: false,
   props: {
     locale: PropTypes.object.def(enUs),
     visible: PropTypes.bool.def(true),
@@ -672,6 +668,7 @@ const RangeCalendar = {
     const clearIcon = getComponent(this, 'clearIcon');
     const { sHoverValue, sSelectedValue, sMode: mode, sShowTimePicker, sValue } = this;
     const className = {
+      [this.$attrs.class]: !!this.$attrs.class,
       [prefixCls]: 1,
       [`${prefixCls}-hidden`]: !props.visible,
       [`${prefixCls}-range`]: 1,
@@ -679,22 +676,18 @@ const RangeCalendar = {
       [`${prefixCls}-week-number`]: props.showWeekNumber,
     };
     const baseProps = {
-      props,
-      on: getListeners(this),
+      ...props,
+      ...this.$attrs,
     };
     const newProps = {
-      props: {
-        selectedValue: sSelectedValue,
-      },
-      on: {
-        select: this.onSelect,
-        dayHover:
-          (type === 'start' && sSelectedValue[1]) ||
-          (type === 'end' && sSelectedValue[0]) ||
-          !!sHoverValue.length
-            ? this.onDayHover
-            : noop,
-      },
+      selectedValue: sSelectedValue,
+      onSelect: this.onSelect,
+      onDayHover:
+        (type === 'start' && sSelectedValue[1]) ||
+        (type === 'end' && sSelectedValue[0]) ||
+        !!sHoverValue.length
+          ? this.onDayHover
+          : noop,
     };
 
     let placeholder1;
@@ -725,98 +718,85 @@ const RangeCalendar = {
     const nextMonthOfStart = startValue.clone().add(1, 'months');
     const isClosestMonths =
       nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month();
-    const leftPartProps = mergeProps(baseProps, newProps, {
-      props: {
-        hoverValue: sHoverValue,
-        direction: 'left',
-        disabledTime: this.disabledStartTime,
-        disabledMonth: this.disabledStartMonth,
-        format: this.getFormat(),
-        value: startValue,
-        mode: mode[0],
-        placeholder: placeholder1,
-        showDateInput: this.showDateInput,
-        timePicker,
-        showTimePicker: sShowTimePicker || mode[0] === 'time',
-        enablePrev: true,
-        enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]),
-        clearIcon,
-      },
-      on: {
-        inputChange: this.onStartInputChange,
-        inputSelect: this.onStartInputSelect,
-        valueChange: this.onStartValueChange,
-        panelChange: this.onStartPanelChange,
-      },
-    });
-    const rightPartProps = mergeProps(baseProps, newProps, {
-      props: {
-        hoverValue: sHoverValue,
-        direction: 'right',
-        format: this.getFormat(),
-        timePickerDisabledTime: this.getEndDisableTime(),
-        placeholder: placeholder2,
-        value: endValue,
-        mode: mode[1],
-        showDateInput: this.showDateInput,
-        timePicker,
-        showTimePicker: sShowTimePicker || mode[1] === 'time',
-        disabledTime: this.disabledEndTime,
-        disabledMonth: this.disabledEndMonth,
-        enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]),
-        enableNext: true,
-        clearIcon,
-      },
-      on: {
-        inputChange: this.onEndInputChange,
-        inputSelect: this.onEndInputSelect,
-        valueChange: this.onEndValueChange,
-        panelChange: this.onEndPanelChange,
-      },
-    });
+    const leftPartProps = {
+      ...baseProps,
+      ...newProps,
+      hoverValue: sHoverValue,
+      direction: 'left',
+      disabledTime: this.disabledStartTime,
+      disabledMonth: this.disabledStartMonth,
+      format: this.getFormat(),
+      value: startValue,
+      mode: mode[0],
+      placeholder: placeholder1,
+      showDateInput: this.showDateInput,
+      timePicker,
+      showTimePicker: sShowTimePicker || mode[0] === 'time',
+      enablePrev: true,
+      enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]),
+      clearIcon,
+      onInputChange: this.onStartInputChange,
+      onInputSelect: this.onStartInputSelect,
+      onValueChange: this.onStartValueChange,
+      onPanelChange: this.onStartPanelChange,
+    };
+    const rightPartProps = {
+      ...baseProps,
+      ...newProps,
+      hoverValue: sHoverValue,
+      direction: 'right',
+      format: this.getFormat(),
+      timePickerDisabledTime: this.getEndDisableTime(),
+      placeholder: placeholder2,
+      value: endValue,
+      mode: mode[1],
+      showDateInput: this.showDateInput,
+      timePicker,
+      showTimePicker: sShowTimePicker || mode[1] === 'time',
+      disabledTime: this.disabledEndTime,
+      disabledMonth: this.disabledEndMonth,
+      enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]),
+      enableNext: true,
+      clearIcon,
+      onInputChange: this.onEndInputChange,
+      onInputSelect: this.onEndInputSelect,
+      onValueChange: this.onEndValueChange,
+      onPanelChange: this.onEndPanelChange,
+    };
     let TodayButtonNode = null;
     if (showToday) {
-      const todayButtonProps = mergeProps(baseProps, {
-        props: {
-          disabled: isTodayInView,
-          value: sValue[0],
-          text: locale.backToToday,
-        },
-        on: {
-          today: this.onToday,
-        },
-      });
+      const todayButtonProps = {
+        ...baseProps,
+        disabled: isTodayInView,
+        value: sValue[0],
+        text: locale.backToToday,
+        onToday: this.onToday,
+      };
       TodayButtonNode = <TodayButton key="todayButton" {...todayButtonProps} />;
     }
 
     let TimePickerButtonNode = null;
     if (props.timePicker) {
-      const timePickerButtonProps = mergeProps(baseProps, {
-        props: {
-          showTimePicker: sShowTimePicker || (mode[0] === 'time' && mode[1] === 'time'),
-          timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length,
-        },
-        on: {
-          openTimePicker: this.onOpenTimePicker,
-          closeTimePicker: this.onCloseTimePicker,
-        },
-      });
+      const timePickerButtonProps = {
+        ...baseProps,
+        showTimePicker: sShowTimePicker || (mode[0] === 'time' && mode[1] === 'time'),
+        timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length,
+        onOpenTimePicker: this.onOpenTimePicker,
+        onCloseTimePicker: this.onCloseTimePicker,
+      };
       TimePickerButtonNode = <TimePickerButton key="timePickerButton" {...timePickerButtonProps} />;
     }
 
     let OkButtonNode = null;
     if (showOkButton) {
-      const okButtonProps = mergeProps(baseProps, {
-        props: {
-          okDisabled:
-            !this.isAllowedDateAndTime(sSelectedValue) ||
-            !this.hasSelectedValue() ||
-            sHoverValue.length,
-        },
-        on: {
-          ok: this.onOk,
-        },
-      });
+      const okButtonProps = {
+        ...baseProps,
+        okDisabled:
+          !this.isAllowedDateAndTime(sSelectedValue) ||
+          !this.hasSelectedValue() ||
+          sHoverValue.length,
+        onOk: this.onOk,
+      };
       OkButtonNode = <OkButton key="okButtonNode" {...okButtonProps} />;
     }
     const extraFooter = this.renderFooter(mode);
diff --git a/components/vc-calendar/src/date/DateTable.jsx b/components/vc-calendar/src/date/DateTable.jsx
index e1e5c5d93..7c7408b34 100644
--- a/components/vc-calendar/src/date/DateTable.jsx
+++ b/components/vc-calendar/src/date/DateTable.jsx
@@ -4,7 +4,7 @@ import DateTBody from './DateTBody';
 const DateTable = (_, { attrs }) => {
   const prefixCls = attrs.prefixCls;
   return (
-    <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+    <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
       <DateTHead {...attrs} />
       <DateTBody {...attrs} />
     </table>
diff --git a/components/vc-calendar/src/decade/DecadePanel.jsx b/components/vc-calendar/src/decade/DecadePanel.jsx
index e4627444e..2bf35c104 100644
--- a/components/vc-calendar/src/decade/DecadePanel.jsx
+++ b/components/vc-calendar/src/decade/DecadePanel.jsx
@@ -122,7 +122,7 @@ export default {
           />
         </div>
         <div class={`${prefixCls}-body`}>
-          <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+          <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
             <tbody class={`${prefixCls}-tbody`}>{decadesEls}</tbody>
           </table>
         </div>
diff --git a/components/vc-calendar/src/month/MonthPanel.jsx b/components/vc-calendar/src/month/MonthPanel.jsx
index 47d3eedfc..d2aab8e18 100644
--- a/components/vc-calendar/src/month/MonthPanel.jsx
+++ b/components/vc-calendar/src/month/MonthPanel.jsx
@@ -11,6 +11,7 @@ function noop() {}
 
 const MonthPanel = {
   name: 'MonthPanel',
+  inheritAttrs: false,
   mixins: [BaseMixin],
   props: {
     value: PropTypes.any,
diff --git a/components/vc-calendar/src/month/MonthTable.jsx b/components/vc-calendar/src/month/MonthTable.jsx
index ca1b943a8..5058cab69 100644
--- a/components/vc-calendar/src/month/MonthTable.jsx
+++ b/components/vc-calendar/src/month/MonthTable.jsx
@@ -9,6 +9,7 @@ function noop() {}
 
 const MonthTable = {
   name: 'MonthTable',
+  inheritAttrs: false,
   mixins: [BaseMixin],
   props: {
     cellRender: PropTypes.func,
@@ -122,7 +123,7 @@ const MonthTable = {
     });
 
     return (
-      <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+      <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
         <tbody class={`${prefixCls}-tbody`}>{monthsEls}</tbody>
       </table>
     );
diff --git a/components/vc-calendar/src/range-calendar/CalendarPart.jsx b/components/vc-calendar/src/range-calendar/CalendarPart.jsx
index e289b34f3..6f45122bb 100644
--- a/components/vc-calendar/src/range-calendar/CalendarPart.jsx
+++ b/components/vc-calendar/src/range-calendar/CalendarPart.jsx
@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps, getComponent, getListeners } from '../../../_util/props-util';
+import { getOptionProps, getComponent } from '../../../_util/props-util';
 import { cloneElement } from '../../../_util/vnode';
 import CalendarHeader from '../calendar/CalendarHeader';
 import DateTable from '../date/DateTable';
@@ -8,6 +8,8 @@ import DateInput from '../date/DateInput';
 import { getTimeConfig } from '../util/index';
 function noop() {}
 const CalendarPart = {
+  name: 'CalendarPart',
+  inheritAttrs: false,
   mixins: [BaseMixin],
   props: {
     prefixCls: PropTypes.string,
@@ -64,13 +66,13 @@ const CalendarPart = {
     } = props;
     const clearIcon = getComponent(this, 'clearIcon');
     const {
-      inputChange = noop,
-      inputSelect = noop,
-      valueChange = noop,
-      panelChange = noop,
-      select = noop,
-      dayHover = noop,
-    } = getListeners(this);
+      onInputChange = noop,
+      onInputSelect = noop,
+      onValueChange = noop,
+      onPanelChange = noop,
+      onSelect = noop,
+      onDayHover = noop,
+    } = this.$attrs;
     const shouldShowTimePicker = showTimePicker && timePicker;
     const disabledTimeConfig =
       shouldShowTimePicker && disabledTime ? getTimeConfig(selectedValue, disabledTime) : null;
@@ -86,19 +88,15 @@ const CalendarPart = {
     if (shouldShowTimePicker) {
       const timePickerProps = getOptionProps(timePicker);
       timePickerEle = cloneElement(timePicker, {
-        props: {
-          showHour: true,
-          showMinute: true,
-          showSecond: true,
-          ...timePickerProps,
-          ...disabledTimeConfig,
-          ...timePickerDisabledTime,
-          defaultOpenValue: value,
-          value: selectedValue[index],
-        },
-        on: {
-          change: inputChange,
-        },
+        showHour: true,
+        showMinute: true,
+        showSecond: true,
+        ...timePickerProps,
+        ...disabledTimeConfig,
+        ...timePickerDisabledTime,
+        defaultOpenValue: value,
+        value: selectedValue[index],
+        onChange: onInputChange,
       });
     }
 
@@ -114,39 +112,31 @@ const CalendarPart = {
         value={value}
         showClear={showClear || false}
         selectedValue={selectedValue[index]}
-        onChange={inputChange}
-        onSelect={inputSelect}
+        onChange={onInputChange}
+        onSelect={onInputSelect}
         clearIcon={clearIcon}
         inputMode={inputMode}
         inputReadOnly={inputReadOnly}
       />
     );
     const headerProps = {
-      props: {
-        ...newProps,
-        mode,
-        enableNext,
-        enablePrev,
-        disabledMonth,
-      },
-      on: {
-        valueChange,
-        panelChange,
-      },
+      ...newProps,
+      mode,
+      enableNext,
+      enablePrev,
+      disabledMonth,
+      onValueChange,
+      onPanelChange,
     };
     const tableProps = {
-      props: {
-        ...newProps,
-        hoverValue,
-        selectedValue,
-        dateRender,
-        disabledDate,
-        showWeekNumber,
-      },
-      on: {
-        select,
-        dayHover,
-      },
+      ...newProps,
+      hoverValue,
+      selectedValue,
+      dateRender,
+      disabledDate,
+      showWeekNumber,
+      onSelect,
+      onDayHover,
     };
     return (
       <div class={`${rangeClassName}-part ${rangeClassName}-${direction}`}>
diff --git a/components/vc-calendar/src/year/YearPanel.jsx b/components/vc-calendar/src/year/YearPanel.jsx
index 0ca3931bf..e4d2ecb21 100644
--- a/components/vc-calendar/src/year/YearPanel.jsx
+++ b/components/vc-calendar/src/year/YearPanel.jsx
@@ -1,6 +1,5 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getListeners } from '../../../_util/props-util';
 const ROW = 4;
 const COL = 3;
 function noop() {}
@@ -21,7 +20,9 @@ function chooseYear(year) {
 }
 
 export default {
+  name: 'YearPanel',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     rootPrefixCls: PropTypes.string,
     value: PropTypes.object,
@@ -68,7 +69,7 @@ export default {
 
   render() {
     const { sValue: value, locale, renderFooter } = this;
-    const decadePanelShow = getListeners(this).decadePanelShow || noop;
+    const onDecadePanelShow = this.$attrs.onDecadePanelShow || noop;
     const years = this.years();
     const currentYear = value.year();
     const startYear = parseInt(currentYear / 10, 10) * 10;
@@ -123,7 +124,7 @@ export default {
             <a
               class={`${prefixCls}-decade-select`}
               role="button"
-              onClick={decadePanelShow}
+              onClick={onDecadePanelShow}
               title={locale.decadeSelect}
             >
               <span class={`${prefixCls}-decade-select-content`}>
@@ -140,7 +141,7 @@ export default {
             />
           </div>
           <div class={`${prefixCls}-body`}>
-            <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+            <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
               <tbody class={`${prefixCls}-tbody`}>{yeasEls}</tbody>
             </table>
           </div>