Vue Calendar是一個(gè)基于Vue.js的可重用日歷組件，它可以使用Javascript Date對(duì)象，Moment.js或處理時(shí)間和日期的其他庫(kù)進(jìn)行渲染。它還提供了API來(lái)自定義樣式和行為，使它成為一個(gè)非常靈活的工具。

以下是Vue Calendar的一些API：

<template>
<calendar
v-model="selectedDate"
:events="events"
:disabledDates="disabledDates"
:min="min"
:max="max"
:locale="locale"
:weekStart="weekStart"
:dayCellContent="dayCellContent"
:hasEvent="hasEvent"
:customClass="customClass"
:contentClass="contentClass"
:nextIcon="nextIcon"
:prevIcon="prevIcon"
:todayIcon="todayIcon"
:disabledIcon="disabledIcon"
:highlightedIcon="highlightedIcon"
:tag="tag"
/>
</template>
<script>
import Calendar from 'vue2-calendar';
export default {
components: { Calendar },
data() {
return {
selectedDate: new Date(),
events: [
{ start: new Date('2022-01-02'), end: new Date('2022-01-04'), title: 'Event 1' },
{ start: new Date('2022-01-08'), end: new Date('2022-01-08'), title: 'Event 2' },
{ start: new Date('2022-01-15'), end: new Date('2022-01-16'), title: 'Event 3' }
],
disabledDates: {
from: new Date('2022-01-10'),
to: new Date('2022-01-20')
},
min: new Date('2022-01-01'),
max: new Date('2022-01-31'),
locale: 'en',
weekStart: 0,
dayCellContent: null,
hasEvent: null,
customClass: null,
contentClass: null,
nextIcon: '>',
prevIcon: '<',
todayIcon: 'T',
disabledIcon: '-',
highlightedIcon: '*',
tag: 'div'
};
}
};
</script>

上面的代碼演示了如何使用Vue Calendar，設(shè)置了一些基本的選項(xiàng)和事件。您可以根據(jù)需要進(jìn)行自定義，例如更改日期范圍、語(yǔ)言或添加自定義類(lèi)以應(yīng)用樣式。