日历插件

package.json

@@ -31,6 +31,7 @@
     "recorder-core": "^1.0.20040700",
     "register-service-worker": "^1.6.2",
     "rxjs": "^6.5.4",
+    "v-calendar": "^1.0.8",
     "vant": "^2.5.6",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.2",

src/app-register.ts

@@ -56,7 +56,7 @@ export const AppComponents = {
         v.component('app-mob-textarea',() => import('./components/app-mob-textarea/app-mob-textarea.vue'));
         // 日历组件
         v.component('app-calendar',() => import('@/components/app-calendar/app-calendar.vue'));
-
+        v.component('app-vcalendar',() => import('@/components/app-vcalendar/app-vcalendar.vue'));
         // 编辑器 BEGIN
         // 图片选择
         v.component('app-mob-picture', () => import('@/components/app-mob-picture/app-mob-picture.vue'));

src/components/app-vcalendar/app-vcalendar.vue

+<template>
+  <div>
+    <v-calendar class="calendar" is-expanded :attributes="config" @dayclick="dayclick" @update:to-page="changeMonth"/>
+    <div v-if="illustrations" class="illustration">
+      <div v-for="(il,index) in illustrations" :key="index" class="illustration-item">
+          <div :style="{'background-color': il.color}" class="illustration-color"></div>
+          <div class="illustration-text">{{il.text}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
+import { Util } from "@/ibiz-core/utils";
+@Component({})
+export default class AppLaydateCalendar extends Vue {
+  public config: Array<any> = [
+    {
+      key: "today",
+      highlight: true,
+      dates: new Date(),
+    },
+  ];
+
+  @Prop() protected signs?: any;
+
+  @Prop() protected illustrations?: any;
+
+  public dotClassList: Array<any> = [];
+
+  public dayclick(day: any) {
+    let dateArray = [day.year, day.month, day.day];
+    this.$emit("select", dateArray);
+  }
+
+  public changeMonth(page: any) {
+    this.$emit("next", page.year, page.month);
+    this.$emit("selectMonth", page.month, page.year);
+  }
+}
+</script>
+
+<style>
+.illustration {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 30px;
+    background-color: white;
+}
+.illustration .illustration-item {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.illustration-item .illustration-color {
+    height: 10px;
+    width: 10px;
+}
+</style>
\ No newline at end of file

src/shims-vue.d.ts

@@ -3,4 +3,5 @@ declare module '*.vue' {
   export default Vue;
 }
 declare module 'vue-quill-editor';
-declare module 'weixin-js-sdk';
\ No newline at end of file
+declare module 'weixin-js-sdk';
+declare module 'v-calendar/lib/components/calendar.umd';
\ No newline at end of file