时间捉急,先写一个简单的用着,过几天写个插件
wxml
<view class="canlendarBgView">
<view class="canlendarView">
<view class="canlendarTopView">
<view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
<view class="leftView"></view>
</view>
<view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
<view class="rightBgView" bindtap="handleCalendar" data-handle="next">
<view class="rightView"></view>
</view>
</view>
<view class="weekBgView">
<view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class="dateBgView">
<view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
</view>
<view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
<view class="datesView {{index == todayIndex ? 'dateSelectView' : index == nowTodayIndex?'orange':''}}">{{item.name}}</view>
<view class='spot' wx:if='{{item.spot}}'></view>
</view>
</view>
</view>
</view>
wxss
.canlendarBgView {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.canlendarView {
color: #6666CC;
display: flex;
flex-direction: column;
background:rgba(255,255,255,1);
box-shadow:0px 0px 6px rgba(0,0,0,0.16);
opacity:1;
border-radius:0px 0px 5px 5px;
padding-bottom: 32rpx;
}
.canlendarTopView {
height: 124rpx;
font-size: 32rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: #2F2F2F;
}
.leftBgView {
text-align: right;
height: 80rpx;
display: flex;
flex-direction: row-reverse;
}
.leftBgView,.rightBgView {
width: 80rpx;
height: 100%;
}
.leftView {
width: 18rpx;
height: 20rpx;
border-top: 2rpx solid #666666;
border-right: 2rpx solid #666666;
transform: rotate(-135deg);
margin-top: 54rpx;
}
.centerView {
width: 50%;
height: 80rpx;
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.rightView {
width: 18rpx;
height: 20rpx;
border-top: 2rpx solid #666666;
border-right: 2rpx solid #666666;
transform: rotate(45deg);
margin-top: 54rpx;
}
.weekBgView {
height: 60rpx;
line-height: 60rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-left: 8%;
padding-right: 8%;
background-color: rgba(255,172,48,0.16);
color: #FFAC30;
font-size: 28rpx;
margin-bottom: 46rpx;
}
.weekView {
flex-grow: 1;
text-align: center;
font-size: 28rpx;
}
.dateBgView {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-left: 7.7%;
padding-right: 7.2%;
}
.dateEmptyView {
width: 14.2%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.dateView {
width: 14.2%;
color: #fff;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
margin-bottom: 20rpx;
}
.datesView {
width: 60rpx;
height: 60rpx;
color: #444444;
font-size: 28rpx;
font-weight: 200;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.spot {
left: 46%;
bottom: 5rpx;
width: 6rpx;
height: 6rpx;
border-radius: 50%;
margin: 0 auto;
text-align: center;
background-color: red;
position: absolute;
}
.dateSelectView {
border-radius: 50%;
position: relative;
left: 0;
top: 0;
color: #fff;
background-color: #FFAC30;
}
.orange {
color: #FFAC30;
}
.noClass {
font-size: 30rpx;
color: #666;
text-align: center;
}
.noClass image{
width: 200rpx;
height: 164rpx;
margin: 110rpx auto 48rpx auto;
}
.list {
width: 90%;
margin: 20rpx auto auto auto;
background-color: #FFF;
padding-left: 20rpx;
padding-right: 20rpx;
border-radius: 20rpx;
color: #666;
}
.list>.top {
border-bottom: solid 2rpx #F3F3F3;
height: 62rpx;
line-height: 62rpx;
display: flex;
justify-content: space-between;
}
.list>.top>.time {
color: #6E6E6E;
}
.list>.top view text {
color: #FFAC30;
}
.bottom>view {
display: flex;
justify-content: space-between;
height: 66rpx;
line-height: 66rpx;
}
.bottom>view>.className {
color: #444444;
font-size: 28rpx;
}
.bottom .childrenName {
color: #999;
font-size: 26rpx;
}
js
const App = getApp();
import Path from "../../etc/config.js";
Page({
/**
* 页面的初始数据
*/
data: {
picAddress: Path.picAddress+'homePageSearch/',
hasEmptyGrid: false,
cur_year: '',
cur_month: '',
clickToday: '',
daysArr: [1,2,3]
},
onLoad(options) {
this.setNowDate();
const date = new Date();
const cur_year = date.getFullYear();
this.setData({
nowTodayIndex: date.getDate() - 1,
clickToday: date.getDate() -1
})
this.spotShow()
},
// 点击当前日期
dateSelectAction: function (e) {
let month = this.data.cur_month
if (month<10) {
month = '0'+month
}
let day = cur_day+1
if (day<10) {
day = '0'+day
}
let year = this.data.cur_year
var cur_day = e.currentTarget.dataset.idx;
this.setData({
todayIndex: cur_day,
clickToday: cur_day,
clickMonth: month,
clickYear: year
})
console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
},
// 课程列表
getMySchedule: function (scheduleDate) {
let that = this;
wx.request({
url: Path.basePath+'event/onlineClass/course/get-my-schedule-ajax',
header: {
'token': wx.getStorageSync('token'),
'content-type': 'application/json'
},
method: "POST",
data:{
scheduleDate: scheduleDate
},
success (res) {
console.log(res);
if (res.statusCode === 200) {
if (res.data.errorCode == 710000) {
var data = res.data.data.list;
that.setData({
list: data
})
console.log(data)
}
}else {
App.showModal(res.data.msg);
}
wx.hideLoading();
}
});
},
setNowDate: function () {
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const now_year = date.getFullYear();
const now_month = date.getMonth() + 1;
const todayIndex = date.getDate() - 1;
const now_day = date.getDate() - 1;
console.log(`日期:${todayIndex}`)
const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
this.calculateEmptyGrids(cur_year, cur_month);
this.calculateDays(cur_year, cur_month);
this.setData({
cur_year: cur_year,
cur_month: cur_month,
now_year: now_year,
now_month: now_month,
now_day: now_day,
clickMonth: now_month,
clickYear: now_year,
weeks_ch,
todayIndex,
})
},
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
},
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
calculateEmptyGrids(year, month) {
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
let empytGrids = [];
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
empytGrids.push(i);
}
this.setData({
hasEmptyGrid: true,
empytGrids
});
} else {
this.setData({
hasEmptyGrid: false,
empytGrids: []
});
}
},
// 展示日期
calculateDays(year, month) {
let days = [];
let daysObj = {};
const thisMonthDays = this.getThisMonthDays(year, month);
let daysArr = this.data.daysArr
for (let i = 1; i <= thisMonthDays; i++) {
daysObj = { name: i, spot: false };
days.push(daysObj);
}
this.setData({
days
});
},
// 控制有课的点点的显示
spotShow: function () {
let days = [];
let daysObj = {};
const thisMonthDays = this.getThisMonthDays(this.data.cur_year,this.data.cur_month);
let daysArr = this.data.daysArr
for (let i = 1; i <= thisMonthDays; i++) {
daysObj = { name: i, spot: false };
for (let v in daysArr) {
if (daysArr[v] == i) {
daysObj = { name: i, spot: true };
}
}
days.push(daysObj);
}
this.setData({
days
});
},
// 点击上下个月
handleCalendar(e) {
const date = new Date();
const handle = e.currentTarget.dataset.handle;
const cur_year = this.data.cur_year;
const cur_month = this.data.cur_month;
if (handle === 'prev') {
let newMonth = cur_month - 1;
let newYear = cur_year;
if (this.data.now_month == newMonth && this.data.now_year == newYear) {
this.setData({
nowTodayIndex: date.getDate() - 1
})
} else {
this.setData({
nowTodayIndex: 100
})
}
// 显示选中的日期
if (this.data.clickMonth == newMonth && this.data.clickYear == newYear) {
this.setData({
todayIndex: this.data.clickToday,
})
} else {
this.setData({
todayIndex:100,
})
}
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
this.calculateDays(newYear, newMonth);
this.calculateEmptyGrids(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth
})
} else {
let newMonth = cur_month + 1;
let newYear = cur_year;
if (this.data.now_month == newMonth && this.data.now_year == newYear) {
this.setData({
nowTodayIndex: date.getDate() - 1
})
} else {
this.setData({
nowTodayIndex: 100
})
}
// 显示选中的日期
if (this.data.clickMonth == newMonth && this.data.clickYear == newYear) {
this.setData({
todayIndex: this.data.clickToday,
})
} else {
this.setData({
todayIndex:100,
})
}
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
this.calculateDays(newYear, newMonth);
this.calculateEmptyGrids(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth
})
}
this.spotShow()
}
})