diff --git a/src/calendar/components/Day.js b/src/calendar/components/Day.js
new file mode 100644
index 000000000..e7e6fa14c
--- /dev/null
+++ b/src/calendar/components/Day.js
@@ -0,0 +1,103 @@
+import { createNamespace } from '../../utils';
+import { bem } from '../utils';
+import { computed } from 'vue';
+
+const [createComponent] = createNamespace('calendar-day');
+
+export default createComponent({
+  props: {
+    item: Object,
+    color: String,
+    index: Number,
+    offset: Number,
+    rowHeight: String,
+  },
+
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    const style = computed(() => {
+      const { type, index, color, offset, rowHeight } = props;
+      const style = {
+        height: rowHeight,
+      };
+
+      if (index === 0) {
+        style.marginLeft = `${(100 * offset) / 7}%`;
+      }
+
+      if (color) {
+        switch (type) {
+          case 'end':
+          case 'start':
+          case 'start-end':
+          case 'multiple-middle':
+          case 'multiple-selected':
+            style.background = color;
+            break;
+          case 'middle':
+            style.color = color;
+            break;
+        }
+      }
+
+      return style;
+    });
+
+    const onClick = () => {
+      if (props.type !== 'disabled') {
+        emit('click', props.item);
+      }
+    };
+
+    return () => {
+      const { item, color, rowHeight } = props;
+      const { type, topInfo, bottomInfo } = item;
+
+      const TopInfo = topInfo && <div class={bem('top-info')}>{topInfo}</div>;
+
+      const BottomInfo = bottomInfo && (
+        <div class={bem('bottom-info')}>{bottomInfo}</div>
+      );
+
+      if (type === 'selected') {
+        return (
+          <div
+            role="gridcell"
+            style={style.value}
+            class={[bem('day'), item.className]}
+            tabindex={-1}
+            onClick={onClick}
+          >
+            <div
+              class={bem('selected-day')}
+              style={{
+                width: rowHeight,
+                height: rowHeight,
+                background: color,
+              }}
+            >
+              {TopInfo}
+              {item.text}
+              {BottomInfo}
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          role="gridcell"
+          style={style.value}
+          class={[bem('day', type), item.className]}
+          tabindex={type === 'disabled' ? null : -1}
+          onClick={onClick}
+        >
+          {TopInfo}
+          {item.text}
+          {BottomInfo}
+        </div>
+      );
+    };
+  },
+});
diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js
index eff781bbc..06c7f4197 100644
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@@ -12,6 +12,7 @@ import {
   formatMonthTitle,
 } from '../utils';
 import { getMonthEndDay } from '../../datetime-picker/utils';
+import Day from './Day';
 
 const [createComponent] = createNamespace('calendar-month');
 
@@ -173,44 +174,17 @@ export default createComponent({
       }
     };
 
-    const getBottomInfo = (type) => {
+    const getBottomInfo = (dayType) => {
       if (props.type === 'range') {
-        if (type === 'start' || type === 'end') {
-          return t(type);
+        if (dayType === 'start' || dayType === 'end') {
+          return t(dayType);
         }
-        if (type === 'start-end') {
+        if (dayType === 'start-end') {
           return t('startEnd');
         }
       }
     };
 
-    const getDayStyle = (type, index) => {
-      const { color } = props;
-      const style = {
-        height: rowHeight.value,
-      };
-
-      if (index === 0) {
-        style.marginLeft = `${(100 * offset.value) / 7}%`;
-      }
-
-      if (color) {
-        if (
-          type === 'start' ||
-          type === 'end' ||
-          type === 'start-end' ||
-          type === 'multiple-selected' ||
-          type === 'multiple-middle'
-        ) {
-          style.background = color;
-        } else if (type === 'middle') {
-          style.color = color;
-        }
-      }
-
-      return style;
-    };
-
     const renderTitle = () => {
       if (props.showMonthTitle) {
         return <div class={bem('month-title')}>{title.value}</div>;
@@ -223,63 +197,6 @@ export default createComponent({
       }
     };
 
-    const renderDay = (item, index) => {
-      const { type, topInfo, bottomInfo } = item;
-      const style = getDayStyle(type, index);
-      const disabled = type === 'disabled';
-
-      const onClick = () => {
-        if (!disabled) {
-          emit('click', item);
-        }
-      };
-
-      const TopInfo = topInfo && <div class={bem('top-info')}>{topInfo}</div>;
-
-      const BottomInfo = bottomInfo && (
-        <div class={bem('bottom-info')}>{bottomInfo}</div>
-      );
-
-      if (type === 'selected') {
-        return (
-          <div
-            role="gridcell"
-            style={style}
-            class={[bem('day'), item.className]}
-            tabindex={-1}
-            onClick={onClick}
-          >
-            <div
-              class={bem('selected-day')}
-              style={{
-                width: rowHeight.value,
-                height: rowHeight.value,
-                background: props.color,
-              }}
-            >
-              {TopInfo}
-              {item.text}
-              {BottomInfo}
-            </div>
-          </div>
-        );
-      }
-
-      return (
-        <div
-          role="gridcell"
-          style={style}
-          class={[bem('day', type), item.className]}
-          tabindex={disabled ? null : -1}
-          onClick={onClick}
-        >
-          {TopInfo}
-          {item.text}
-          {BottomInfo}
-        </div>
-      );
-    };
-
     const days = computed(() => {
       const days = [];
       const year = props.date.getFullYear();
@@ -306,6 +223,19 @@ export default createComponent({
       return days;
     });
 
+    const renderDay = (item, index) => (
+      <Day
+        item={item}
+        index={index}
+        color={props.color}
+        offset={offset.value}
+        rowHeight={rowHeight.value}
+        onClick={(item) => {
+          emit('click', item);
+        }}
+      />
+    );
+
     const renderDays = () => {
       if (shouldRender.value) {
         return (