親自動(dòng)手實(shí)現(xiàn)vue日歷控件

/**
 * 獲取日歷header內(nèi)容 格式為：****年 **月
 * @param {*} date
 */
export const getHeaderContent = function (date) {
 let _date = new Date(date)
 
 return dateFormat(_date, 'yyyy年 MM月')
}

var date = new Date()
date.setDate(date.getDate() - date.getDay() + 1) // 獲取當(dāng)前月的第一天為2019-01-28

date.setDate(date.getDate() - date.getDay() + x)

/**
 * 獲取當(dāng)前月日歷的第一天
 * @param {*} date
 */
export const getFirstDayOfCalendar = function (date, weekLabelIndex) {
 let _date = new Date(date)
 _date = new Date(_date.setDate(_date.getDate() - _date.getDay() + weekLabelIndex))
 // 如果當(dāng)前日期大于當(dāng)前月第一天，則需要減去7天
 if (_date > date) {
 _date = new Date(_date.setDate(_date.getDate() - 7))
 }
 
 return _date
}

/**
 * 以傳入?yún)?shù)作為基準(zhǔn)獲取下個(gè)月的第一天日期
 * @param {*} firstDayOfCurrentMonth
 */
export const getFirstDayOfNextMonth = function (firstDayOfCurrentMonth) {
 return new Date(firstDayOfCurrentMonth.getFullYear(), firstDayOfCurrentMonth.getMonth() + 1, 1)
}
 
/**
 * 以傳入?yún)?shù)作為基準(zhǔn)獲取上個(gè)月的第一天日期
 * @param {*} firstDayOfCurrentMonth
 */
export const getFirstDayOfPrevMonth = function (firstDayOfCurrentMonth) {
 return new Date(firstDayOfCurrentMonth.getFullYear(), firstDayOfCurrentMonth.getMonth() - 1, 1)
}

/*
 * Subject
 * 內(nèi)部創(chuàng)建了三個(gè)方法，內(nèi)部維護(hù)了一個(gè)ObserverList。
 */
 
// contructor function
export const Subject = function () {
 this.observers = new ObserverList()
}
 
// addObserver: 調(diào)用內(nèi)部維護(hù)的ObserverList的add方法
Subject.prototype.addObserver = function (observer) {
 this.observers.add(observer)
}
 
// removeObserver: 調(diào)用內(nèi)部維護(hù)的ObserverList的removeat方法
Subject.prototype.removeObserver = function (observer) {
 this.observers.removeAt(this.observers.indexOf(observer, 0))
}
 
// notify: 通知函數(shù)，用于通知觀察者并且執(zhí)行update函數(shù)，update是一個(gè)實(shí)現(xiàn)接口的方法，是一個(gè)通知的觸發(fā)方法。
Subject.prototype.notify = function (context) {
 let observerCount = this.observers.count()
 for (let i = 0; i < observerCount; i++) {
 this.observers.get(i).update(context)
 }
}
 
/*
 * ObserverList
 * 內(nèi)部維護(hù)了一個(gè)數(shù)組，4個(gè)方法用于數(shù)組的操作，這里相關(guān)的內(nèi)容還是屬于subject，因?yàn)镺bserverList的存在是為了將subject和內(nèi)部維護(hù)的observers分離開來，清晰明了的作用。
 */
function ObserverList () {
 this.observerList = []
}
 
ObserverList.prototype.add = function (obj) {
 return this.observerList.push(obj)
}
 
ObserverList.prototype.count = function () {
 return this.observerList.length
}
 
ObserverList.prototype.get = function (index) {
 if (index > -1 && index < this.observerList.length) {
 return this.observerList[index]
 }
}
 
ObserverList.prototype.indexOf = function (obj, startIndex) {
 let i = startIndex
 
 while (i < this.observerList.length) {
 if (this.observerList[i] === obj) {
  return i
 }
 i++
 }
 
 return -1
}
 
ObserverList.prototype.removeAt = function (index) {
 this.observerList.splice(index, 1)
}
 
/*
 * The Observer
 * 提供更新接口，為想要得到通知消息的主體提供接口。
 */
export const Observer = function () {
 this.update = function () {
 // ...
 }
}

VueCalendar
 
 Component
 
 CalendarBody.vue
 CalendarHeader.vue
 
 lib
 
 Subject.js 
 Util.js
 index.vue