diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx
index a3c17f7ba..06af0a63b 100644
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -151,16 +151,16 @@ export interface CalendarHeaderProps<DateType> {
 
 export default defineComponent<CalendarHeaderProps<any>>({
   name: 'CalendarHeader',
-  setup(props) {
+  setup(_props, { attrs }) {
     const divRef = ref<HTMLDivElement>(null);
     return () => {
-      const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;
+      const { prefixCls, fullscreen, mode, onChange, onModeChange } = attrs;
       const sharedProps = {
-        ...props,
+        ...attrs,
         onChange,
         fullscreen,
         divRef,
-      };
+      } as any;
 
       return (
         <div class={`${prefixCls}-header`} ref={divRef}>
diff --git a/components/calendar/date-fns.tsx b/components/calendar/date-fns.tsx
new file mode 100644
index 000000000..d5496d151
--- /dev/null
+++ b/components/calendar/date-fns.tsx
@@ -0,0 +1,8 @@
+import generateConfig from '../vc-picker/generate/dateFns';
+import { withInstall } from '../_util/type';
+import generateCalendar, { CalendarProps } from './generateCalendar';
+
+const Calendar = generateCalendar<Date>(generateConfig);
+
+export { CalendarProps };
+export default withInstall(Calendar);
diff --git a/components/calendar/dayjs.tsx b/components/calendar/dayjs.tsx
new file mode 100644
index 000000000..009d8c4c4
--- /dev/null
+++ b/components/calendar/dayjs.tsx
@@ -0,0 +1,9 @@
+import { Dayjs } from 'dayjs';
+import generateConfig from '../vc-picker/generate/dayjs';
+import { withInstall } from '../_util/type';
+import generateCalendar, { CalendarProps } from './generateCalendar';
+
+const Calendar = generateCalendar<Dayjs>(generateConfig);
+
+export { CalendarProps };
+export default withInstall(Calendar);
diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
index 1e8e4fea8..64219740d 100644
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -12,7 +12,7 @@ import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
 import enUS from './locale/en_US';
 import CalendarHeader from './Header';
 import { VueNode } from '../_util/type';
-import { computed, defineComponent, toRef } from 'vue';
+import { App, computed, defineComponent, toRef } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 
@@ -303,7 +303,10 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
       };
     },
   });
-
+  Calendar.install = function (app: App) {
+    app.component(Calendar.name, Calendar);
+    return app;
+  };
   return Calendar;
 }
 
diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx
index 93e166aff..1d35db234 100644
--- a/components/calendar/index.tsx
+++ b/components/calendar/index.tsx
@@ -1,8 +1,4 @@
-import { Moment } from 'moment';
-import momentGenerateConfig from '../vc-picker/generate/moment';
-import generateCalendar, { CalendarProps } from './generateCalendar';
+import Calendar from './dayjs';
+export * from './dayjs';
 
-const Calendar = generateCalendar<Moment>(momentGenerateConfig);
-
-export { CalendarProps };
 export default Calendar;
diff --git a/components/calendar/moment.tsx b/components/calendar/moment.tsx
new file mode 100644
index 000000000..f93d033f8
--- /dev/null
+++ b/components/calendar/moment.tsx
@@ -0,0 +1,9 @@
+import { Moment } from 'moment';
+import generateConfig from '../vc-picker/generate/moment';
+import { withInstall } from '../_util/type';
+import generateCalendar, { CalendarProps } from './generateCalendar';
+
+const Calendar = generateCalendar<Moment>(generateConfig);
+
+export { CalendarProps };
+export default withInstall(Calendar);