diff --git a/packages/calendar/src/main.vue b/packages/calendar/src/main.vue
index 9423ed4118f..268b1674d39 100644
--- a/packages/calendar/src/main.vue
+++ b/packages/calendar/src/main.vue
@@ -59,6 +59,8 @@
 <script>
 import Locale from 'element-ui/src/mixins/locale';
 import fecha from 'element-ui/src/utils/date';
+import ElButton from 'element-ui/packages/button';
+import ElButtonGroup from 'element-ui/packages/button-group';
 import DateTable from './date-table';
 import { validateRangeInOneMonth } from 'element-ui/src/utils/date-util';
 
@@ -72,7 +74,9 @@ export default {
   mixins: [Locale],
 
   components: {
-    DateTable
+    DateTable,
+    ElButton,
+    ElButtonGroup
   },
 
   props: {
diff --git a/packages/theme-chalk/src/calendar.scss b/packages/theme-chalk/src/calendar.scss
index f33254d381a..1364861017b 100644
--- a/packages/theme-chalk/src/calendar.scss
+++ b/packages/theme-chalk/src/calendar.scss
@@ -1,5 +1,7 @@
 @import "mixins/mixins";
 @import "common/var";
+@import "button";
+@import "button-group";
 
 @include b(calendar) {
   background-color:#fff;