Initial commit

app/components/datepicker/EventOneMonth.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="columns mx-0">
+    <div class="column is-narrow" v-if="1<0">
+      <EventSummary></EventSummary>
+    </div>
+     <div class="column">
+      <div class="mb-4">
+        <span class="fsb-17 mr-4">{{ `T${vmonth}/${vyear}` }}</span>
+        <a class="mr-2" @click="previous()"><SvgIcon v-bind="{name: 'left1.svg', type: 'dark', size: 18}"></SvgIcon></a>
+        <a class="mr-3" @click="next()"><SvgIcon v-bind="{name: 'right.svg', type: 'dark', size: 18}"></SvgIcon></a>
+        <a @click="refresh()"><SvgIcon v-bind="{name: 'refresh.svg', type: 'dark', size: 18}"></SvgIcon></a>
+      </div>
+      <EventDetail v-bind="{events: events, vyear: vyear, vmonth: vmonth}"></EventDetail>
+     </div>
+  </div>
+</template>
+<script setup>
+import EventSummary from '@/components/datepicker/EventSummary'
+import EventDetail from '@/components/datepicker/EventDetail'
+</script>
+<script>
+export default {
+  props: ['events', 'year', 'month'],
+  data() {
+    return {
+      vyear: this.year? this.$copy(this.year) : undefined,
+      vmonth: this.month? this.$copy(this.month) : undefined
+    }
+  },
+  methods: {
+    next() {
+      let month = this.vmonth + 1
+      if(month>12) {
+        month = 1
+        this.vyear += 1
+      }
+      this.vmonth = month
+    },
+    previous() {
+      let month = this.vmonth - 1
+      if(month===0) {
+        month = 12
+        this.vyear -= 1
+      }
+      this.vmonth = month
+    },
+    refresh() {
+      this.$emit('refresh')
+    }
+  }
+}
+</script>