forked from opentiny/tiny-vue
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<tiny-calendar-view
|
|
ref="calendar"
|
|
v-model="selectedDates"
|
|
:multi-select="true"
|
|
:year="2023"
|
|
:month="5"
|
|
:modes="[]"
|
|
:set-day-bg-color="setDayBgColor"
|
|
@selected-date-change="selectedDateChange"
|
|
>
|
|
<template #tool>
|
|
<tiny-button type="primary" @click="setDays('workingDays')" class="mr-2">工作日</tiny-button>
|
|
<tiny-button type="success" @click="setDays('offDays')" class="mr-2">休息日</tiny-button>
|
|
<tiny-button type="warning" @click="setDays('holidays')">节假日</tiny-button>
|
|
</template>
|
|
</tiny-calendar-view>
|
|
</template>
|
|
|
|
<script>
|
|
import { CalendarView, Button, Modal } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyCalendarView: CalendarView,
|
|
TinyButton: Button
|
|
},
|
|
data() {
|
|
return {
|
|
selectedDates: [],
|
|
workingDays: [],
|
|
offDays: [],
|
|
holidays: [],
|
|
selectedDate: []
|
|
}
|
|
},
|
|
methods: {
|
|
setDays(type) {
|
|
if (!this.selectedDate.length) {
|
|
Modal.message({ message: '请选择日期', status: 'info' })
|
|
return
|
|
}
|
|
this[type].push(...this.selectedDate)
|
|
this.selectedDates = []
|
|
this.selectedDate = []
|
|
},
|
|
setDayBgColor(date) {
|
|
if (this.workingDays.includes(date)) {
|
|
return 'blue'
|
|
}
|
|
if (this.offDays.includes(date)) {
|
|
return 'green'
|
|
}
|
|
if (this.holidays.includes(date)) {
|
|
return 'yellow'
|
|
}
|
|
|
|
return ''
|
|
},
|
|
selectedDateChange(date) {
|
|
this.selectedDate = date
|
|
}
|
|
}
|
|
}
|
|
</script>
|