92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<script>
|
|
let id = 0
|
|
// 获取今日的日期信息
|
|
const date = new Date()
|
|
const year = date.getFullYear()
|
|
// 这个月几月 0 - 11
|
|
const month = date.getMonth() + 1
|
|
// 今天是第几天
|
|
const nowDay = date.getDate()
|
|
// 星期几
|
|
const week = date.getDay()
|
|
// 今天的日期
|
|
const nowDate = `${year}年${month}月${nowDay}日`
|
|
const daysInMonth = new Date(year, month, 0).getDate()
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
nowDate,
|
|
calendarElement: "calendar-element",
|
|
calendar: "calendar",
|
|
calendarCurrentDate: "calendar-current-date",
|
|
calendarWeek: "calendar-week",
|
|
calendarWeekDay: "calendar-week-day",
|
|
calendarAllDay: "calendar-all-day",
|
|
calendarDay: "calendar-day",
|
|
calendarDayRow: "calendar-day-row",
|
|
weeks: [
|
|
{ id: id++, text: "Sun" },
|
|
{ id: id++, text: "Mon" },
|
|
{ id: id++, text: "Tue" },
|
|
{ id: id++, text: "Wed" },
|
|
{ id: id++, text: "Thu" },
|
|
{ id: id++, text: "Fri" },
|
|
{ id: id++, text: "Sat" },
|
|
],
|
|
daysInMonth,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="calendarElement">
|
|
<div :class="calendar">
|
|
<div :class="calendarCurrentDate">{{ nowDate }}</div>
|
|
<div :class="calendarWeek">
|
|
<div v-for="week in weeks" :class="calendarWeekDay" :key="week.id">{{ week.text }}</div>
|
|
</div>
|
|
<div :class="calendarAllDay">
|
|
<div v-for="day in daysInMonth" :class="calendarDay">
|
|
<div :class="calendarDayRow">{{ day }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.calendar {
|
|
width: 280px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.calendar-week,
|
|
.calendar-all-day {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.calendar-week {
|
|
border-bottom: 1px solid saddlebrown;
|
|
}
|
|
|
|
.calendar-current-date,
|
|
.calendar-week-day,
|
|
.calendar-all-day {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.calendar-week-day {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
width: calc(100%/7);
|
|
}
|
|
|
|
.calendar-day {
|
|
width: calc(100%/7);
|
|
}
|
|
</style>
|