legend.png
主要逻辑：
//目标月1号对应的星期
let startWeek = new Date(year, month, 1).getDay();
//获取某年某月的天数（最后一天即天数
const dayNums = new Date(year, month+1, 0).getDate();
组件使用
其他的没啥好讲的，只是一些事件的显示，直接上代码，需要拿走
// components/calendar.js
Component({
properties: {
// 是否显示前后月预览日期
preview: {
type: Boolean,
value: true
},
/**
* 日期事件
* [{date, type}]
* date
* type "green" "olive"
*/
events: {
type: [Object, Array],
observer(value, old) {
let events = []
if (this.toType(value) === "array") {
if (value.length == 0) return
for (let i = 0; i < value.length; i++) {
const date = (new Date(value[i].date)).getTime() ? new Date(value[i].date) : new Date(parseInt(value[i].date))
if (!date.getTime()) continue
const event = {
date: date.toLocaleDateString(),
type: value[i].type || "green"
}
events.push(event)
}
} else {
const date = (new Date(value.date)).getTime() ? new Date(value.date) : new Date(parseInt(value.date))
if (!date.getTime()) return
const event = {
date: date.toLocaleDateString(),
type: value.type || "green"
}
events.push(event)
}
console.log(events)
this.setData({ _events: events })
this.dateInit();
}
}
},
data: {
year: 0,
month: 0,
date: ['日', '一', '二', '三', '四', '五', '六'],
dateArr: [],
isTodayWeek: false,
todayIndex: 0,
_events: []
},
attached() {
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
this.dateInit();
this.setData({
year: year,
month: month
})
},
methods: {
dateInit(setYear, setMonth) {
//全部时间的月份都是按0~11基准，显示月份才+1
let dateArr = []; //需要遍历的日历数组数据
let now = setYear ? new Date(setYear, setMonth) : new Date();
let year = now.getFullYear();
let month = now.getMonth();
let nextYear = (month + 1) > 11 ? (year + 1) : year;
let nextMonth = (month + 1) > 11 ? 0 : (month + 1);
//目标月1号对应的星期
let startWeek = new Date(year, month, 1).getDay();
//获取目标月有多少天
let dayNums = new Date(nextYear, nextMonth, 0).getDate();
let obj = {}
const nextDays = 6 * 7 - startWeek - dayNums
const today = new Date().toLocaleDateString()
for (let i = 0; i < (startWeek + dayNums); i++) {
const num = i - startWeek + 1;
const curDay = new Date(year, month, num).toLocaleDateString()
if (num > 0) {
obj = {
curDay,
dateNum: new Date(curDay).getDate(),
event: today === curDay && 'blue'
}
} else {
if (this.data.preview) {
obj = {
curDay,
dateNum: new Date(curDay).getDate(),
event: "preview"
};
} else {
obj = {}
}
}
dateArr[i] = obj;
}
if (this.data.preview) {
for (let i = 0; i < nextDays; i++) {
const curDay = new Date(year, month + 1, i + 1).toLocaleDateString()
dateArr[startWeek + dayNums + i] = {
curDay,
dateNum: new Date(curDay).getDate(),
event: "preview"
};
}
}
// 添加事件
dateArr.forEach(value => {
this.data._events.forEach(event => {
if (event.date === value.curDay) {
value.event = event.type
}
})
})
this.setData({
dateArr: dateArr
})
// console.log(dateArr)
let nowDate = new Date();
let nowYear = nowDate.getFullYear();
let nowMonth = nowDate.getMonth();
let nowWeek = nowDate.getDay();
let getYear = setYear || nowYear;
let getMonth = setMonth >= 0 ? setMonth : nowMonth;
if (nowYear == getYear && nowMonth == getMonth) {
this.setData({
isTodayWeek: true,
todayIndex: nowWeek
})
} else {
this.setData({
isTodayWeek: false,
todayIndex: -1
})
}
},
lastMonth() {
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month <= 1 ? this.data.year - 1 : this.data.year;
let month = this.data.month <= 1 ? 12 : this.data.month - 1;
this.setData({
year: year,
month: month
})
this.dateInit(year, month - 1);
},
nextMonth() {
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
let month = this.data.month > 11 ? 1 : this.data.month + 1;
this.setData({
year: year,
month: month
})
this.dateInit(year, month - 1);
},
click(e) {
const idx = e.currentTarget.dataset.idx
const item = this.data.dateArr[idx];
this.triggerEvent("click", item)
},
toType(obj) {
return Object.prototype.toString
.call(obj)
.match(/\s([a-zA-Z]+)/)[1]
.toLowerCase();
}
}
})
{{year}}年{{month}}月
{{item}}
{{item.dateNum}}
.date_show{
position: relative;
width: 90vw;
display: flex;
align-items: center;
font-size: 30rpx;
color: #282828;
margin: 0 auto;
}
.show_arrow {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 0;
}
.show_title {
flex: 2.5;
text-align: center;
}
.arrow {
width: 20rpx;
height: 20rpx;
border-top: 2px solid #666;
border-right: 2px solid #666;
}
.arrow.left {
transform: rotate(-135deg);
}
.arrow.right {
transform: rotate(45deg);
}
.content_box{
display: flex;
flex-wrap: wrap;
padding: 0 24rpx;
min-width: 600rpx;
max-width: 840rpx;
}
.content_box .header {
width: calc(100% / 7);
color: #333;
font-size: 30rpx;
text-align: center;
border-bottom: 1px solid #D0D0D0;
padding: 30rpx 0;
}
.weekMark{
position: relative;
top: -2px;
border-bottom: 2px solid #22A7F6 !important;
}
.content_box .content{
position: relative;
width: calc(100% / 7);
font-size: 26rpx;
text-align: center;
vertical-align: middle;
margin: 15rpx 0;
}
.date-head{
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
margin: 0 auto;
text-align: center;
border-radius: 50%;
}
.preview .date-head {
color: #c0c4cc;
}
.blue .date-head{
color: #fff;
background-color: #22A7F6;
}
.olive .date-head{
color: #fff;
background-color: olive;
}
.green .date-head{
color: #fff;
background-color: green;
}