diff --git a/packages/calendar/calendar.wxml b/packages/calendar/calendar.wxml
index 09a60b3e..26938c1a 100644
--- a/packages/calendar/calendar.wxml
+++ b/packages/calendar/calendar.wxml
@@ -1,57 +1,65 @@
-<wxs src="./index.wxs" module="computed"></wxs>
+<view class="van-calendar">
+  <header
+    title="{{ title }}"
+    showTitle="{{ showTitle }}"
+    subtitle="{{ subtitle }}"
+    showSubtitle="{{ showSubtitle }}"
+  >
+    <slot name="title" slot="title"></slot>
+  </header>
 
-<template name="calendar">
-  <view class="van-calendar">
-    <header
-      title="{{ title }}"
-      showTitle="{{ showTitle }}"
-      subtitle="{{ subtitle }}"
+  <scroll-view
+    class="van-calendar__body"
+    scroll-y
+    scroll-into-view="{{ scrollIntoView }}"
+  >
+    <month
+      wx:for="{{ computed.getMonths(minDate, maxDate) }}"
+      wx:key="index"
+      id="month{{ index }}"
+      class="month"
+      data-date="{{ item }}"
+      date="{{ item }}"
+      type="{{ type }}"
+      color="{{ color }}"
+      minDate="{{ minDate }}"
+      maxDate="{{ maxDate }}"
+      showMark="{{ showMark }}"
+      formatter="{{ formatter }}"
+      rowHeight="{{ rowHeight }}"
+      currentDate="{{ currentDate }}"
       showSubtitle="{{ showSubtitle }}"
-    >
-      <slot name="title" slot="title"></slot>
-    </header>
+      allowSameDay="{{ allowSameDay }}"
+      showMonthTitle="{{ index !== 0 || !showSubtitle }}"
+      bind:click="onClickDay"
+    />
+  </scroll-view>
 
-    <scroll-view class="van-calendar__body" scroll-y scroll-into-view="{{ scrollIntoView }}">
-      <month
-        wx:for="{{ computed.getMonths(minDate, maxDate) }}"
-        wx:key="index"
-        id="month{{ index }}"
-        class="month"
-        data-date="{{ item }}"
-        date="{{ item }}"
-        type="{{ type }}"
-        color="{{ color }}"
-        minDate="{{ minDate }}"
-        maxDate="{{ maxDate }}"
-        showMark="{{ showMark }}"
-        formatter="{{ formatter }}"
-        rowHeight="{{ rowHeight }}"
-        currentDate="{{ currentDate }}"
-        showSubtitle="{{ showSubtitle }}"
-        allowSameDay="{{ allowSameDay }}"
-        showMonthTitle="{{ index !== 0 || !showSubtitle }}"
-        bind:click="onClickDay"
-      />
-    </scroll-view>
-
-    <view class="van-calendar__footer {{ safeAreaInsetBottom ? 'van-calendar__footer--safe-area-inset-bottom' : '' }}">
-      <slot name="footer"></slot>
-    </view>
-
-    <view class="van-calendar__footer {{ safeAreaInsetBottom ? 'van-calendar__footer--safe-area-inset-bottom' : '' }}">
-      <van-button
-        wx:if="{{ showConfirm }}"
-        round
-        block
-        type="danger"
-        color="{{ color }}"
-        custom-class="van-calendar__confirm"
-        disabled="{{ computed.getButtonDisabled(type, currentDate) }}"
-        nativeType="text"
-        bind:click="onConfirm"
-      >
-        {{ computed.getButtonDisabled(type, currentDate) ? confirmDisabledText : confirmText }}
-      </van-button>
-    </view>
+  <view
+    class="{{ utils.bem('calendar__footer', { safeAreaInsetBottom }) }}"
+  >
+    <slot name="footer"></slot>
   </view>
-</template>
+
+  <view
+    class="{{ utils.bem('calendar__footer', { safeAreaInsetBottom }) }}"
+  >
+    <van-button
+      wx:if="{{ showConfirm }}"
+      round
+      block
+      type="danger"
+      color="{{ color }}"
+      custom-class="van-calendar__confirm"
+      disabled="{{ computed.getButtonDisabled(type, currentDate) }}"
+      nativeType="text"
+      bind:click="onConfirm"
+    >
+      {{
+        computed.getButtonDisabled(type, currentDate)
+          ? confirmDisabledText
+          : confirmText
+      }}
+    </van-button>
+  </view>
+</view>
diff --git a/packages/calendar/index.wxml b/packages/calendar/index.wxml
index d4849cc7..7df0b980 100644
--- a/packages/calendar/index.wxml
+++ b/packages/calendar/index.wxml
@@ -1,4 +1,5 @@
 <wxs src="./index.wxs" module="computed" />
+<wxs src="../wxs/utils.wxs" module="utils" />
 
 <import src="./calendar.wxml" />
 
@@ -16,16 +17,9 @@
   bind:after-enter="onOpened"
   bind:after-leave="onClosed"
 >
-  <template
-    is="calendar"
-    data="{{ title, subtitle, showTitle, showSubtitle, minDate, maxDate, type, color, showMark, formatter, rowHeight, currentDate, safeAreaInsetBottom, showConfirm, confirmDisabledText, confirmText, scrollIntoView, allowSameDay }}"
-  />
+  <include src="calendar.wxml" />
 </van-popup>
 
-<template
-  wx:else
-  is="calendar"
-  data="{{ title, subtitle, showTitle, showSubtitle, minDate, maxDate, type, color, showMark, formatter, rowHeight, currentDate, safeAreaInsetBottom, showConfirm, confirmDisabledText, confirmText, scrollIntoView, allowSameDay }}"
-/>
+<include wx:else src="calendar.wxml" />
 
 <van-toast id="van-toast" />