溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何實現vue日歷組件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
最近做項目遇到一個需求，需要制作一個定制化的日歷組件（項目使用的UI框架不能滿足需求，算了，我直說了吧，ant design vue的日歷組件是真的丑，所以就自己寫了一個），如下圖所示，需求大致如下：
（2）日歷可以按照月份進行上下月的切換。
（2）按照月份展示周一到周日的排班信息。
（3）排班信息分為早班和晚班。
（4）按照日期對排班進行顏色區分：當前月份排班信息正常顏色，今天顯示深色，其他月份顯示淺色。
（5）點擊編輯按鈕，日歷進入編輯模式。簡單點說就是，今天和今天之后的排班右側都顯示一個選擇按鈕，點擊后可彈框編輯當日的排班人員。
如果只需要日歷組件部分，可以直接看2.2部分，只需要傳遞當前時間（一個包含當前年份和月份的對象），即可展示完整的當前月日歷。
因為項目使用的是ant desgin vue框架，所以會有a-row、a-col、a-card等標簽，如果是使用elementUI，將標簽替換成對應的el-row、el-col、el-card等標簽即可。
效果示意圖：
按照需求，我們首先需要制作一個月份選擇器，用于提供月份的切換，默認顯示當前月。點擊左側箭頭向前一個月，點擊右側箭頭向后一個月，并且每次點擊都會向外拋出changeMonth函數，攜帶對象time，包含當前月份選擇器的年份和月份。
<template>
<!-- 月份選擇器，支持左右箭頭修改月份 -->
<div class="month-con">
<a-icon type="left" @click="reduceMonth()" />
<span class="month"
>{{ time.year }}年{{
time.month + 1 > 9 ? time.month + 1 : '0' + (time.month + 1)
}}月</span
>
<a-icon type="right" @click="addMonth()" />
</div>
</template>
<script>
export default {
data() {
return {
time: {
year: new Date().getFullYear(),
month: new Date().getMonth()
}
}
},
created() {},
methods: {
reduceMonth() {
if (this.time.month > 0) {
this.time.month = this.time.month - 1
} else {
this.time.month = 11
this.time.year = this.time.year - 1
}
this.$emit('changeMonth', this.time)
},
addMonth() {
if (this.time.month < 11) {
this.time.month = this.time.month + 1
} else {
this.time.month = 0
this.time.year = this.time.year + 1
}
this.$emit('changeMonth', this.time)
}
}
}
</script>
<style lang="less" scoped>
.month-con {
font-weight: 700;
font-size: 18px;
.month {
margin: 0 10px;
}
}
</style>在制作日歷之前，我們可以先觀察下電腦自帶的日歷。經過觀察，我們可以發現以下幾個規律：
（1）雖然每個月的日總數不同，但是都統一顯示6行，一共42天。
（2）當前月的第一天在第一行，并且當1號不在周一時，會使用上個月的日期補全周一到1號的時間。
（3）第五行和第六行不屬于當前月部分，會使用下個月的日期補全。
因此參照以上規律，獲取當前月所需要展示的日期時，可以按照以下幾個步驟：
（1）獲取當前月第一天所在的日期和星期幾
（2）當前月第一天星期幾減1就是之前要補足的天數，將當前月第一天減去這個天數，就是日歷所要展示的起始日期。比如上面日歷的起始日期就是1月31日。
（3）循環42次，從起始日期開始，每次時間加上一天，將這42天的日期存到一個數組里，就是日歷所要展示的當前月所有日期。
（4）因為每次切換月份都會重新刷新一次日歷，因此可以直接將日歷數組寫成computed屬性。
computed: {
// 獲取當前月份顯示日歷,共42天
visibleCalendar: function() {
const calendarArr = []
// 獲取當前月份第一天
const currentFirstDay = new Date(this.time.year, this.time.month, 1)
// 獲取第一天是周幾
const weekDay = currentFirstDay.getDay()
// 用當前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
// 我們統一用42天來顯示當前顯示日歷
for (let i = 0; i < 42; i++) {
const date = new Date(startDay + i * 24 * 3600 * 1000)
calendarArr.push({
date: new Date(startDay + i * 24 * 3600 * 1000),
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDate()
})
}
return calendarArr
}
}效果示意圖：
按照需求，我們需要給不同的日期添加不同的樣式：
（1）當前月份排班信息正常顏色
（2）今天顯示深色
（3）其他月份顯示淺色
因此我們獲取當前月日歷數組的時候，就可以把每一天和今天的日期進行比較，從而添加不同的屬性，用于獲取添加不同的樣式：
（1）如果是當前月，則thisMonth屬性為thisMonth，否則為空；
（2）如果是當天，則isToday屬性為isToday，否則為空；
（3）如果是當前月，則afterToday屬性為afterToday，否則為空；
computed: {
// 獲取當前月份顯示日歷,共42天
visibleCalendar: function() {
// 獲取今天的年月日
const today = new Date()
today.setHours(0)
today.setMinutes(0)
today.setSeconds(0)
today.setMilliseconds(0)
const calendarArr = []
// 獲取當前月份第一天
const currentFirstDay = new Date(this.time.year, this.time.month, 1)
// 獲取第一天是周幾
const weekDay = currentFirstDay.getDay()
// 用當前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
// 我們統一用42天來顯示當前顯示日歷
for (let i = 0; i < 42; i++) {
const date = new Date(startDay + i * 24 * 3600 * 1000)
calendarArr.push({
date: new Date(startDay + i * 24 * 3600 * 1000),
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDate(),
// 是否在當月
thisMonth:
date.getFullYear() === today.getFullYear() &&
date.getMonth() === today.getMonth()
? 'thisMonth'
: '',
// 是否是今天
isToday:
date.getFullYear() === today.getFullYear() &&
date.getMonth() === today.getMonth() &&
date.getDate() === today.getDate()
? 'isToday'
: '',
// 是否在今天之后
afterToday: date.getTime() >= today.getTime() ? 'afterToday' : ''
})
}
return calendarArr
}
}日歷組件vue代碼如下，在進行測試時，可以先將time的默認值設置為當前月：
<template>
<div>
<a-row>
<!-- 左側，提示早班、晚班或者上午、下午 -->
<a-col :span="2">
<div class="date-con tip-con">
<a-col
v-for="item in 6"
:key="item"
class="date thisMonth tip"
:span="1"
>
<div class="morning">早班</div>
<div class="evening">晚班</div>
</a-col>
</div>
</a-col>
<!-- 右側，周一到周五具體內容 -->
<a-col :span="22">
<!-- 第一行表頭，周一到周日 -->
<div class="top-con">
<div class="top" v-for="item in top" :key="item">星期{{ item }}</div>
</div>
<!-- 日歷號 -->
<div class="date-con">
<div
class="date"
:class="[item.thisMonth, item.isToday, item.afterToday]"
v-for="(item, index) in visibleCalendar"
:key="index"
>
<div>{{ item.day }}</div>
<div class="morning">張三，李四</div>
<div class="evening">王五，趙六</div>
</div>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
// import utils from './utils.js'
export default {
props: {
time: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
top: ['一', '二', '三', '四', '五', '六', '日']
}
},
created() {
console.log('123', this.time)
},
methods: {
// 獲取
},
computed: {
// 獲取當前月份顯示日歷,共42天
visibleCalendar: function() {
// 獲取今天的年月日
const today = new Date()
today.setHours(0)
today.setMinutes(0)
today.setSeconds(0)
today.setMilliseconds(0)
const calendarArr = []
// 獲取當前月份第一天
const currentFirstDay = new Date(this.time.year, this.time.month, 1)
// 獲取第一天是周幾
const weekDay = currentFirstDay.getDay()
// 用當前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
// 我們統一用42天來顯示當前顯示日歷
for (let i = 0; i < 42; i++) {
const date = new Date(startDay + i * 24 * 3600 * 1000)
calendarArr.push({
date: new Date(startDay + i * 24 * 3600 * 1000),
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDate(),
// 是否在當月
thisMonth:
date.getFullYear() === today.getFullYear() &&
date.getMonth() === today.getMonth()
? 'thisMonth'
: '',
// 是否是今天
isToday:
date.getFullYear() === today.getFullYear() &&
date.getMonth() === today.getMonth() &&
date.getDate() === today.getDate()
? 'isToday'
: '',
// 是否在今天之后
afterToday: date.getTime() >= today.getTime() ? 'afterToday' : ''
})
}
return calendarArr
}
}
}
</script>
<style lang="less" scoped>
.top-con {
display: flex;
align-items: center;
.top {
width: 14.285%;
background-color: rgb(242, 242, 242);
padding: 10px 0;
margin: 5px;
text-align: center;
}
}
.date-con {
display: flex;
flex-wrap: wrap;
.date {
width: 14.285%;
text-align: center;
padding: 5px;
.morning {
padding: 10px 0;
background-color: rgba(220, 245, 253, 0.3);
}
.evening {
padding: 10px 0;
background-color: rgba(220, 244, 209, 0.3);
}
}
.thisMonth {
.morning {
background-color: rgb(220, 245, 253);
}
.evening {
background-color: rgb(220, 244, 209);
}
}
.isToday {
font-weight: 700;
.morning {
background-color: rgb(169, 225, 243);
}
.evening {
background-color: rgb(193, 233, 175);
}
}
}
.tip-con {
margin-top: 51px;
.tip {
margin-top: 21px;
width: 100%;
}
}
</style>效果示意圖：
組合代碼如下：
<template>
<div>
<a-card>
<!-- 操作欄 -->
<a-row type="flex" justify="space-around">
<a-col :span="12">
<!-- 月份選擇器 -->
<monthpicker @changeMonth="changeMonth"></monthpicker>
</a-col>
<a-col :span="12"></a-col>
</a-row>
<!-- 日歷欄 -->
<a-row class="calendar-con">
<calendar :time="time"></calendar>
</a-row>
</a-card>
</div>
</template>
<script>
// 月份選擇器
import Monthpicker from './components/Monthpicker.vue'
// 日歷組件
import Calendar from './components/Calendar.vue'
export default {
components: {
monthpicker: Monthpicker,
calendar: Calendar
},
data() {
return {
time: {
year: new Date().getFullYear(),
month: new Date().getMonth()
}
}
},
created() {},
methods: {
// 修改月份
changeMonth(time) {
console.log('time', time)
this.time = time
}
}
}
</script>
<style lang="less" scoped>
.month-con {
font-weight: 700;
font-size: 18px;
.month {
margin: 0 10px;
}
}
.calendar-con {
margin-top: 20px;
}
</style>通過changeMonth事件，將月份選擇器的月份傳遞給日歷組件，這樣就完成了一個簡單的能夠修改月份的日歷組件了。
效果示意圖：
根據需求，我們還需要對日歷的內容具有編輯能力。具體需求為在日歷上方添加一個編輯按鈕，點擊后將日歷切換為編輯模式，其實就是每個格子的值班信息后顯示一個選擇按鈕，點擊后彈出彈框或者跳轉至編輯頁，用于修改當前格子的值班信息。完成修改后點擊保存，關閉彈框或者返回日歷頁，重新查詢當前日歷值班信息。
當然：以上只是編輯功能的其中一種實現思路，如果格子內只是文本信息，不涉及任何復雜的綁定，亦可以通過點擊編輯按鈕將每個格子轉換成input輸入框，右側加上一個保存按鈕（也可以在日歷上方加上一個總的保存按鈕），編輯完畢后，點擊保存，再恢復至文本形式即可。
注意：通常只有今天和今天之后的值班信息可以編輯，因此之前的日歷數組中的每個日期對象我們都保存了一個afterToday屬性，可以用于判斷是否渲染選擇按鈕。 因為編輯功能過于簡單，就不寫代碼演示了。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何實現vue日歷組件”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
