我们的需求是显示当前月和下个月的排班表
引入 uniapp 日历组件 uni-calendar
做法有两种，一种是直接去修改组件，还有就是文档中提供的 selected 方法
修改组件的就不写了
<uni-calendar :lunar="true" :selected="selected" :insert="true" :start-date="'2015-1-1'" :end-date="'2090-12-31'" @change="change" @monthSwitch="monthSwitch"></uni-calendar>
onLoad() {
// 进入页面获取年月
this.year = Moment().year()
this.month = Moment().format('MM')
// 获取这个月和下个月的天数
this.daysInatMonth = this.getMonthDay(0); // 获取这个月的天数
this.daysInNextMonth = this.getMonthDay(1); // 获取下个月的天数
this.dataInit(this.year, this.month, this.daysInatMonth, this.daysInNextMonth)
},
methods: {
dataInit(year, month, at, next) {
var randomType = [
{ type: 'night', info: '夜班' },
{ type: 'rest', info: '休息' },
{ type: 'daytime', info: '白班' },
]
var arr1 = this.getNewArray(year, month, at, randomType)
var arr2 = this.getNewArray(year, (Number(month) + 1), next, randomType)
this.selected = [...arr1, ...arr2];
},
// 目前排班表是写死的
getNewArray(year, month, day, randomType) {
// 我们根据这个月多少天 生成多少条数据然后填充
var list = new Array(day).fill('').map((item, index) => {
// 让 randomType 这个数组中数据随机到这个月每天中
const randomNum = Math.floor(Math.random() * randomType.length);
const obj = { date: year + '-' + month + '-' + Number(index + 1).toString().padStart(2, '0'), info: randomType[randomNum].info, data: { type: randomType[randomNum].type } }
return obj
})
return list
},
getMonthDay(type) {
// 获取下个月的日期 0 是当月 1 下个月
return Moment().add(type, 'month').daysInMonth();
},
change(res) {},
monthSwitch(res) {
this.dataInit(this.year, this.month, this.daysInatMonth, this.daysInNextMonth)
},
}如果想给每月都添加下面的东西，在monthSwitch 方法下传的月和年修改即可，同时还需要去修改组件
