76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<div class="columns mx-0">
|
|
<EventSummary />
|
|
<div
|
|
class="column is-narrow"
|
|
v-if="1 < 0"
|
|
></div>
|
|
<div class="column">
|
|
<div class="mb-4">
|
|
<span class="fsb-17 mr-4">{{ `T${vmonth}/${vyear}` }}</span>
|
|
<a
|
|
class="mr-2"
|
|
@click="previous()"
|
|
>
|
|
<Icon
|
|
name="material-symbols:arrow-back-ios-new-rounded"
|
|
:size="18"
|
|
/>
|
|
</a>
|
|
<a
|
|
class="mr-3"
|
|
@click="next()"
|
|
>
|
|
<Icon
|
|
name="material-symbols:arrow-forward-ios-rounded"
|
|
:size="18"
|
|
/>
|
|
</a>
|
|
<a @click="refresh()">
|
|
<Icon
|
|
name="material-symbols:refresh-rounded"
|
|
:size="18"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<EventDetail v-bind="{ events, vyear, vmonth }" />
|
|
</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>
|