修改日历组件

components/calendar.md

@@ -6,9 +6,17 @@
 |events|Array|-|是|日历上的事件|
 |useDraft|Boolean|true|否|是否启用拖拽事件|
 |useEvent|Boolean|true|否|是否启用点击事件的事件|
+|selfBtn|Object|{}|否|添加自定义按钮,下面说明|
 
 ##### events:
 |事件名|说明|参数|参数说明|
 |:-:|:-:|:-:|:-:|
 |draft|拖拽事件|object|包含start=>开始时间 Date类型;end=>结束时间 Date类型;startStr=>开始时间字符串形式(年-月-日 0补位);end=>结束时间字符串;allDay:是否全日 Boolean|
-|eventClick|事件点击事件|object|jsview=>回调函数(暂时用不到);event:()=>事件|
+|eventClick|事件点击事件|object|jsview=>回调函数(暂时用不到);event:()=>事件|
+
+##### selfBtn:
+|参数|类型|默认值|是否必填|说明|
+|:-:|:-:|:-:|:-:|:-:|
+|text|String|-|是|按钮的文本|
+|click|Function|-|是|按钮的事件|
+|position|String|right|否|按钮的位置.可写值:left/right|

components/calendar.vue

@@ -6,11 +6,8 @@
       firstDay="1"
       :defaultDate="defaultDate"
       weekNumberCalculation="ISO"
-      :header="{
-        left: 'prev',
-        center: 'title',
-        right: 'today ,next',
-      }"
+      :customButtons="btn"
+      :header="headers"
       :button-text="{
         today: '今天',
       }"
@@ -41,6 +38,7 @@ export default {
     events: { type: Array, default: () => [] },
     useDraft: { type: Boolean, default: true },
     useEvent: { type: Boolean, default: true },
+    selfBtn: { type: Object, default: () => {} },
   },
   components: {
     FullCalendar, // make the <FullCalendar> tag available
@@ -58,6 +56,12 @@ export default {
       // calendarEvents: [],
       planList: [],
       addTitle: '',
+      headers: {
+        left: 'prev',
+        center: 'title',
+        right: 'today ,next',
+      },
+      btn: {},
     };
   },
   methods: {
@@ -70,6 +74,17 @@ export default {
     clickEvent(arg) {
       if (this.useEvent) this.$emit('eventClick', arg);
     },
+    setBtn() {
+      let selfBtn = _.cloneDeep(this.selfBtn);
+      let keys = Object.keys(selfBtn);
+      for (const key of keys) {
+        let { position, ...info } = selfBtn[key];
+        selfBtn[key] = { ...info };
+        if (position === 'left') this.headers.left = `${this.headers.left}, ${key}`;
+        else this.headers.right = `${this.headers.right}, ${key}`;
+      }
+      this.$set(this, `btn`, selfBtn);
+    },
   },
   computed: {
     defaultDate() {
@@ -82,6 +97,14 @@ export default {
       return `${this.year}-12-31`;
     },
   },
+  watch: {
+    selfBtn: {
+      immediate: true,
+      handler(val) {
+        if (val) this.setBtn();
+      },
+    },
+  },
 };
 </script>
 <style lang="less">