vue实现日历方案
vue实现日历方案
使用第三方库（推荐方案）
推荐使用成熟的日历组件库，如v-calendar或fullcalendar-vue，它们提供丰富的功能和定制选项。
安装v-calendar：
npm install v-calendar基础使用示例：
<template>
<v-calendar :attributes="attrs" />
</template>
<script>
import { ref } from 'vue'
import VCalendar from 'v-calendar'
export default {
components: { VCalendar },
setup() {
const attrs = ref([
{
key: 'today',
highlight: true,
dates: new Date()
}
])
return { attrs }
}
}
</script>自定义日历组件
如需完全自定义，可以手动实现基础日历逻辑：
<template>
<div class="calendar">
<div class="header">
<button @click="prevMonth">←</button>
<h3>{{ currentMonth }}</h3>
<button @click="nextMonth">→</button>
</div>
<div class="days">
<div v-for="day in dayNames" :key="day" class="day-name">{{ day }}</div>
</div>
<div class="dates">
<div
v-for="date in visibleDates"
:key="date.date"
:class="['date', { today: date.isToday }]"
>
{{ date.day }}
</div>
</div>
</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
setup() {
const currentDate = ref(new Date())
const dayNames = ['日', '一', '二', '三', '四', '五', '六']
const currentMonth = computed(() => {
return currentDate.value.toLocaleString('default', {
month: 'long',
year: 'numeric'
})
})
const visibleDates = computed(() => {
const year = currentDate.value.getFullYear()
const month = currentDate.value.getMonth()
const firstDay = new Date(year, month, 1)
const lastDay = new Date(year, month + 1, 0)
const dates = []
const today = new Date()
// 上月最后几天
for (let i = firstDay.getDay(); i > 0; i--) {
const date = new Date(year, month, -i + 1)
dates.push({
date: date.toISOString(),
day: date.getDate(),
isToday: false
})
}
// 当月日期
for (let i = 1; i <= lastDay.getDate(); i++) {
const date = new Date(year, month, i)
dates.push({
date: date.toISOString(),
day: date.getDate(),
isToday: date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear()
})
}
// 下月前几天
const remaining = 42 - dates.length
for (let i = 1; i <= remaining; i++) {
const date = new Date(year, month + 1, i)
dates.push({
date: date.toISOString(),
day: date.getDate(),
isToday: false
})
}
return dates
})
function prevMonth() {
currentDate.value = new Date(
currentDate.value.getFullYear(),
currentDate.value.getMonth() - 1,
1
)
}
function nextMonth() {
currentDate.value = new Date(
currentDate.value.getFullYear(),
currentDate.value.getMonth() + 1,
1
)
}
return {
currentDate,
currentMonth,
dayNames,
visibleDates,
prevMonth,
nextMonth
}
}
}
</script>
<style>
.calendar {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
}
.dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem;
}
.date {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.date.today {
background: #3490dc;
color: white;
}
.day-name {
font-weight: bold;
}
</style>功能扩展建议
- 添加日期选择功能，通过v-model绑定选中日期
- 支持事件标记，在特定日期显示标记点
- 添加周视图/月视图切换功能
- 支持国际化，显示不同语言的月份和星期
- 添加日期范围选择功能
性能优化
对于复杂日历应用，建议：
- 使用虚拟滚动处理大量日期数据
- 对日期计算进行缓存
- 避免在模板中进行复杂计算
- 使用CSS变量实现主题切换
两种方案各有优势，第三方库适合快速实现功能完备的日历，自定义组件则更适合需要特殊设计或轻量级的场景。
