64 lines
1.6 KiB
Vue
64 lines
1.6 KiB
Vue
<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>
|