先上一张联动日历的效果图
222.gif
此组件包含了两个控件，一个是默认显示当月日期数据的WebCalendar还有一个是默认显示本周可以滚动的CalendarCompoent。
CalendarCompoent默认加载数据三周的数据，即上周，本周，下周的数据。并在滚动时进行了数据的判断。如果要滚动的数据时加载数据中的最后一条它会根据你选中的日期默认加载出上一周或者下一周的数据。对应日历的选择日期，如果选中的日期数据列表中不存在，他会加载到选中的数据和它前一周或者后一周的数据，根据是选择当前日期之前还是日期之后的数据。
WebCalendar实现参考 https://www.cnblogs.com/slongs/p/10174659.html 在其基础上加载了注释。
WebCalendar加载数据代码
// 初始化日历
initCalendar(currentDate) {
indexi = -1;
console.log(' this.changeMonthIndex', this.changeMonthIndex, 'this.clickiindex', this.clickIndex);
const nowDate = currentDate ? currentDate : new Date();
const nowMonthFirstDate = this.getMonthFirstDate(nowDate); // 获取当月1号日期
const nowWeek = new Date(nowMonthFirstDate).getDay() ? new Date(nowMonthFirstDate).getDay() : 7; // 获取星期几 为0表示星期日手动至为7
const newDateList = []; // 创建日期数组
const startDay = 2 - nowWeek; // 开始日期的下标 因为 setDate(0)是上个月最后一天 所以是2-nowWeek 用来表示向前需要取几天的数据 setDate0 负数 都是把日期变为上个月
const showDayLength = nowWeek < 6 ? 35 : 42; // 如果5行能显示下一个月 就只显示5行
// 循环处理 获取日历上应该显示的日期
for (let i = startDay; i < startDay + showDayLength; i++) {
indexi = indexi + 1;
const date = new Date(new Date(nowMonthFirstDate).setDate(i)); // 获取时间对象
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); // 小于9的数字前面加0
const dayObject = {
date: this.getDateString(date),
day,
index:indexi, // 设置角标
className: '',
status:indexi === this.clickIndex && this.changeMonthIndex === this.clickGroupIndex ? 1 : 0,
isdefault:0, // 是否是当天 1是当天
// currMonth:nowDate.getMonth() === date.getMonth() ? 1 : 0 // 是否是当月
};
// new Date(str).toDateString() === new Date().toDateString()
if (date.toDateString() === new Date().toDateString()) {
// dayObject.className = 'today';
dayObject.isdefault = 1;
}
const showDate = this.props.showDate;
if(showDate) {
// 滚动的选中了日期 大日历也需要修改数据
if(dayObject.date === showDate) {
dayObject.status = 1;
}
}
newDateList.push(dayObject);
}
// console.log('newDateList', newDateList);
this.setState(() => ({
dayList: newDateList,
currentDay: nowDate.getDate(),
currentMonth: nowDate.getMonth() + 1 >= 10 ? nowDate.getMonth() + 1 : '0' + (nowDate.getMonth() + 1),
currentYear: nowDate.getFullYear(),
}));
}
CalendarCompoent联动数据代码
judgeInnerisCurr(calDate) {
// 判断在数据之中时是否在当前的页面 calDate 大日历选中的日期
const data = this.state.data;
const innerWidth = window.innerWidth;
const smallstr = this.state.data[this.index].num[0].str;
const smDate = new Date(smallstr);
const dastr = this.state.data[this.index].num[6].str;
const bigDate = new Date(dastr);
if(calDate.getTime() >= smDate.getTime() && calDate.getTime() <= bigDate.getTime()) {
// 此时在当前的页面
this.changeCurrView(calDate.getDay());
}else {
// 在数组中但是不在当前页面中
for(let i = 0; i < data.length; i++) {
const dastrs = data[i].num[6].str;
const daDate = new Date(dastrs);
const xiaostr = data[i].num[0].str;
const xiaoDate = new Date(xiaostr);
if(calDate.getTime() >= xiaoDate.getTime() && calDate.getTime() <= daDate.getTime()) {
// 此时在这里屏幕上面
const number = Math.abs(this.index - i);// 此时index需要偏离的位置
if(i === 0) {
// 此时选择的第一条 需要前面加载一条
this.changeOtherView(calDate.getDay(), 0, 0);
}else if(i === data.length - 1) {
// 此时是最后一条 需要加载
this.changeOtherView(calDate.getDay(), 0, 1);
}else {
if(this.index > i) {
// 此时要减去number
this.index -= number;
}else {
// 此时要加上number
this.index += number;
}
if (calDate.getDay() === 0) {
this.rootBar.scrollLeft = innerWidth * (this.index);
this.innerCompoentClickThings(this.index, 6);
} else if (calDate.getDay() === 1) {
this.rootBar.scrollLeft = innerWidth * (this.index);
this.innerCompoentClickThings(this.index, 0);
} else if (calDate.getDay() === 2) {
this.rootBar.scrollLeft = innerWidth * (this.index);
this.innerCompoentClickThings(this.index, 1);
} else if (calDate.getDay() === 3) {
this.rootBar.scrollLeft = innerWidth * (this.index);
this.innerCompoentClickThings(this.index, 2);
} else if (calDate.getDay() === 4) {
this.rootBar.scrollLeft = innerWidth * (this.index);
this.innerCompoentClickThings(this.index, 3);
} else if (calDate.getDay() === 5) {
this.rootBar.scrollLeft = innerWidth * (this.index);
this.innerCompoentClickThings(this.index, 4);
} else if (calDate.getDay() === 6) {
this.rootBar.scrollLeft = innerWidth * (this.index);
this.innerCompoentClickThings(this.index, 5);
}
}
}
}
}
}
此组件已开源项目地址
https://github.com/xgAnd/XgCalendar
有帮助的话，帮忙点个star啊。
DB287FB2A35FC0570D8A3775D5E8F5D6.gif
网友评论