能不能提供一份工厂日历的vue前端代码
时间: 2024-05-10 22:20:24 浏览: 17
以下是一个简单的工厂日历的Vue前端代码:
```
<template>
<div class="calendar">
<div class="header">
<div class="month">{{ month }}</div>
<div class="year">{{ year }}</div>
</div>
<div class="days">
<div class="day" v-for="day in days" :class="{ today: day.isToday, weekend: day.isWeekend }">{{ day.number }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
month: '',
year: '',
days: [],
}
},
mounted() {
this.getCalendarData()
},
methods: {
getCalendarData() {
// 获取当前月份和年份
const now = new Date()
const month = now.toLocaleString('default', { month: 'long' })
const year = now.getFullYear()
// 获取当前月的天数和第一天星期几
const daysInMonth = new Date(year, now.getMonth() + 1, 0).getDate()
const firstDayOfWeek = new Date(year, now.getMonth(), 1).getDay()
// 构建日历数据
const days = []
for (let i = 1; i <= daysInMonth; i++) {
days.push({
number: i,
isToday: i === now.getDate(),
isWeekend: (firstDayOfWeek + i) % 7 === 0 || (firstDayOfWeek + i) % 7 === 6,
})
}
// 更新数据
this.month = month
this.year = year
this.days = days
},
},
}
</script>
<style scoped>
.calendar {
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.month {
font-weight: bold;
}
.days {
display: flex;
flex-wrap: wrap;
}
.day {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
.today {
background-color: #38c172;
color: #fff;
}
.weekend {
background-color: #f5f5f5;
}
</style>
```
这个代码会生成一个简单的日历,包括当前月份和年份的标题,以及每个日期的方块。方块上会显示日期,如果是今天的日期,方块会用绿色背景标记出来;如果是周末,方块会用灰色背景标记出来。