從零寫vue日歷組件
1. 前言
最近做項(xiàng)目遇到一個需求，需要制作一個定制化的日歷組件（項(xiàng)目使用的UI框架不能滿足需求，算了，我直說了吧，ant design vue的日歷組件是真的丑，所以就自己寫了一個），如下圖所示，需求大致如下：
（2）日歷可以按照月份進(jìn)行上下月的切換。
（2）按照月份展示周一到周日的排班信息。
（3）排班信息分為早班和晚班。
（4）按照日期對排班進(jìn)行顏色區(qū)分：當(dāng)前月份排班信息正常顏色，今天顯示深色，其他月份顯示淺色。
（5）點(diǎn)擊編輯按鈕，日歷進(jìn)入編輯模式。簡單點(diǎn)說就是，今天和今天之后的排班右側(cè)都顯示一個選擇按鈕，點(diǎn)擊后可彈框編輯當(dāng)日的排班人員。
如果只需要日歷組件部分，可以直接看2.2部分，只需要傳遞當(dāng)前時間（一個包含當(dāng)前年份和月份的對象），即可展示完整的當(dāng)前月日歷。
2. vue日歷制作
因?yàn)轫?xiàng)目使用的是ant desgin vue框架，所以會有a-row、a-col、a-card等標(biāo)簽，如果是使用elementUI，將標(biāo)簽替換成對應(yīng)的el-row、el-col、el-card等標(biāo)簽即可。
2.1 制作月份選擇器
效果示意圖：
按照需求，我們首先需要制作一個月份選擇器，用于提供月份的切換，默認(rèn)顯示當(dāng)前月。點(diǎn)擊左側(cè)箭頭向前一個月，點(diǎn)擊右側(cè)箭頭向后一個月，并且每次點(diǎn)擊都會向外拋出changeMonth函數(shù)，攜帶對象time，包含當(dāng)前月份選擇器的年份和月份。
<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>
2.2 制作日歷
2.2.1 獲取當(dāng)前月所要顯示的日期
在制作日歷之前，我們可以先觀察下電腦自帶的日歷。經(jīng)過觀察，我們可以發(fā)現(xiàn)以下幾個規(guī)律：
（1）雖然每個月的日總數(shù)不同，但是都統(tǒng)一顯示6行，一共42天。
（2）當(dāng)前月的第一天在第一行，并且當(dāng)1號不在周一時，會使用上個月的日期補(bǔ)全周一到1號的時間。
（3）第五行和第六行不屬于當(dāng)前月部分，會使用下個月的日期補(bǔ)全。
因此參照以上規(guī)律，獲取當(dāng)前月所需要展示的日期時，可以按照以下幾個步驟：
（1）獲取當(dāng)前月第一天所在的日期和星期幾
（2）當(dāng)前月第一天星期幾減1就是之前要補(bǔ)足的天數(shù)，將當(dāng)前月第一天減去這個天數(shù)，就是日歷所要展示的起始日期。比如上面日歷的起始日期就是1月31日。
（3）循環(huán)42次，從起始日期開始，每次時間加上一天，將這42天的日期存到一個數(shù)組里，就是日歷所要展示的當(dāng)前月所有日期。
（4）因?yàn)槊看吻袚Q月份都會重新刷新一次日歷，因此可以直接將日歷數(shù)組寫成computed屬性。
computed: {
// 獲取當(dāng)前月份顯示日歷,共42天
visibleCalendar: function() {
const calendarArr = []
// 獲取當(dāng)前月份第一天
const currentFirstDay = new Date(this.time.year, this.time.month, 1)
// 獲取第一天是周幾
const weekDay = currentFirstDay.getDay()
// 用當(dāng)前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
// 我們統(tǒng)一用42天來顯示當(dāng)前顯示日歷
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
}
}
2.2.2 給不同的日期添加不同的樣式
效果示意圖：
按照需求，我們需要給不同的日期添加不同的樣式：
（1）當(dāng)前月份排班信息正常顏色
（2）今天顯示深色
（3）其他月份顯示淺色
因此我們獲取當(dāng)前月日歷數(shù)組的時候，就可以把每一天和今天的日期進(jìn)行比較，從而添加不同的屬性，用于獲取添加不同的樣式：
（1）如果是當(dāng)前月，則thisMonth屬性為thisMonth，否則為空；
（2）如果是當(dāng)天，則isToday屬性為isToday，否則為空；
（3）如果是當(dāng)前月，則afterToday屬性為afterToday，否則為空；
computed: {
// 獲取當(dāng)前月份顯示日歷,共42天
visibleCalendar: function() {
// 獲取今天的年月日
const today = new Date()
today.setHours(0)
today.setMinutes(0)
today.setSeconds(0)
today.setMilliseconds(0)
const calendarArr = []
// 獲取當(dāng)前月份第一天
const currentFirstDay = new Date(this.time.year, this.time.month, 1)
// 獲取第一天是周幾
const weekDay = currentFirstDay.getDay()
// 用當(dāng)前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
// 我們統(tǒng)一用42天來顯示當(dāng)前顯示日歷
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(),
// 是否在當(dāng)月
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代碼如下，在進(jìn)行測試時，可以先將time的默認(rèn)值設(shè)置為當(dāng)前月：
<template>
<div>
<a-row>
<!-- 左側(cè)，提示早班、晚班或者上午、下午 -->
<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>
<!-- 右側(cè)，周一到周五具體內(nèi)容 -->
<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: {
// 獲取當(dāng)前月份顯示日歷,共42天
visibleCalendar: function() {
// 獲取今天的年月日
const today = new Date()
today.setHours(0)
today.setMinutes(0)
today.setSeconds(0)
today.setMilliseconds(0)
const calendarArr = []
// 獲取當(dāng)前月份第一天
const currentFirstDay = new Date(this.time.year, this.time.month, 1)
// 獲取第一天是周幾
const weekDay = currentFirstDay.getDay()
// 用當(dāng)前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
// 我們統(tǒng)一用42天來顯示當(dāng)前顯示日歷
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(),
// 是否在當(dāng)月
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>
2.3 將月份選擇器和日歷組件組合使用
效果示意圖：
組合代碼如下：
<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事件，將月份選擇器的月份傳遞給日歷組件，這樣就完成了一個簡單的能夠修改月份的日歷組件了。
2.4 編輯功能
效果示意圖：
根據(jù)需求，我們還需要對日歷的內(nèi)容具有編輯能力。具體需求為在日歷上方添加一個編輯按鈕，點(diǎn)擊后將日歷切換為編輯模式，其實(shí)就是每個格子的值班信息后顯示一個選擇按鈕，點(diǎn)擊后彈出彈框或者跳轉(zhuǎn)至編輯頁，用于修改當(dāng)前格子的值班信息。完成修改后點(diǎn)擊保存，關(guān)閉彈框或者返回日歷頁，重新查詢當(dāng)前日歷值班信息。
當(dāng)然：以上只是編輯功能的其中一種實(shí)現(xiàn)思路，如果格子內(nèi)只是文本信息，不涉及任何復(fù)雜的綁定，亦可以通過點(diǎn)擊編輯按鈕將每個格子轉(zhuǎn)換成input輸入框，右側(cè)加上一個保存按鈕（也可以在日歷上方加上一個總的保存按鈕），編輯完畢后，點(diǎn)擊保存，再恢復(fù)至文本形式即可。
注意：通常只有今天和今天之后的值班信息可以編輯，因此之前的日歷數(shù)組中的每個日期對象我們都保存了一個afterToday屬性，可以用于判斷是否渲染選擇按鈕。 因?yàn)榫庉嫻δ苓^于簡單，就不寫代碼演示了。
到此這篇關(guān)于從零寫vue日歷組件的文章就介紹到這了,更多相關(guān)vue日歷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了Vue3路由頁面切換動畫animate.css效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
Vue實(shí)現(xiàn)搜索 和新聞列表功能簡單范例
本文通過實(shí)例代碼給大家介紹了Vue實(shí)現(xiàn)搜索 和新聞列表功能簡單范例，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2018-03-03
Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))
Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實(shí)例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用
這篇文章主要教大家如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Vue3使用富文本框(wangeditor)的方法總結(jié)
項(xiàng)目中用到了富文本,選來選去選擇了wangeditor,下面這篇文章主要給大家介紹了關(guān)于Vue3使用富文本框(wangeditor)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue ECharts簡易實(shí)現(xiàn)雷達(dá)圖
這篇文章主要介紹了基于Vue ECharts簡易實(shí)現(xiàn)雷達(dá)圖,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
基于Vue 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說明介紹
今天小編就為大家分享一篇基于Vue 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說明介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式
路由權(quán)限控制常用于后臺管理系統(tǒng)中，對不同業(yè)務(wù)人員能夠訪問的頁面進(jìn)行一個權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制，具有一定的參考價值，感興趣的可以了解一下2021-10-10