原生微信小程序的日历功能

实现出来的日历是这个样子的
主要功能：
1、点击月份两边的箭头，用来切换月份，当每个月的某天有事，可显示不同的颜色
2、点击日期

wxml:

日历年月

<view class='calendar_title flex_nowrap'>
	<view class='icon' bindtap='lastMonth'>
		<image src='https://www.coolgua.net/match_img/img/tou.png' />
	</view>
	<view class="calendar_title_riqi">{{year}}年{{month}}月</view>
	<view class='icon' bindtap='nextMonth'>
		<image src='https://www.coolgua.net/match_img/img/jian.png' />
	</view>
</view>

日历主体

<view class='calendar'>
	//星期
	<view class='header'>
		<view wx:for='{{date}}' wx:key='' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}
			<view></view>
		</view>
	</view>
	//日期
	<view class='date-box'>
		<view wx:for='{{dateArr}}' wx:key=''>
			//这里的item.isshow是在方法中循环，如果需要哪天有事，就把那个item里的isshow变成true，让他显示不同的样式（首先要循环这个dataArr数组，往里添加一个isshow:false属性）
			<view class='{{item.isshow ? "nowDay" : ""}}'>
				<view class='date-head' bindtap='lookHuoDong' data-year='{{year}}' data-month='{{month}}' data-datenum='{{item.dateNum}}'>
					<view>{{item.dateNum}}</view>
				</view>
			</view>
		</view>
	</view>
</view>

wxss

//ui框架用的是weui
@import "../../../../../dist/style/weui.wxss"; 
.calendar_title{
	margin: 10rpx auto; 
	justify-content: space-between;
	font-size: 20pt;
	color: #333333;
	overflow: hidden;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
}
.calendar_title_riqi{
	float: left;
	color: #333333;
	font-size: 34rpx;
	margin-top: 10rpx;
}
.calendar_title .icon{
	float: left;
}
.calendar_title .icon image{
	width: 60rpx; 
	height: 60rpx;
	margin: 5rpx auto;
}

/* 日历 */
.calendar{
	width: 100%;
	margin-top: 75rpx;
	background: #fff;
	border-bottom-right-radius: 20rpx;
	border-bottom-left-radius: 20rpx;
	padding: 0 0 20rpx;
	font-family: FZZhunYuan-M02S;
}
.header{
	font-size: 0;
	width: 80%;
	margin: 0 auto;
}
.header>view{
	display: inline-block;
	width: 14.285%;
	color: #666;
	font-size: 30rpx;
	text-align: center;
	border-bottom: 1px solid #D0D0D0;
	padding: 20rpx 0;
}
.weekMark{
	position: relative;
	width: 80%;
	margin: 0 auto;
}
.weekMark view{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-bottom: 2px solid #69f;
}
.date-box{
	font-size: 0;
	padding: 10rpx 0;
	width: 80%;
	margin: 0 auto;
}
.date-box>view{
	position: relative;
	display: inline-block;
	width: 14.285%;
	color: #666;
	text-align: center;
	vertical-align: middle;
}
.date-head{
	height: 60rpx;
	line-height: 60rpx;
	font-size: 12pt; 
	color: #666;
}
.nowDay .date-head{
	width: 60rpx;
	border-radius: 50%;
	text-align: center;
	color: #666;
	background-color: #fff;
	margin: 0 auto;
}

js

date: ['日', '一', '二', '三', '四', '五', '六'],//星期列表
year: 0,//日历头部的年
month: 0,//日历头部的月
isTodayWeek: false,
todayIndex: 0,//这两个参数用于判断今天是星期几
dateArr:[],//日期的列表

//方法

//页面刚加载时
onload（）{
	let now = new Date();
	let year = now.getFullYear();
	let month = now.getMonth() + 1;
	let day=now.getDate();
	
	//加载日期的方法
	this.dateInit();
	
	//存值
	this.setData({
		year: year,
		month: month,
		isToday: '' + year + month + now.getDate(),
		day:day
	})

	// 计算出今天为星期几
	let nowDate = new Date();
	this.setData({
		week:this.week_Method(nowDate),
	})
}

// 计算星期几的方法---nowDate---2001-02-01
week_Method(nowDate){
	let nowWeek = nowDate.getDay();
	let arr=['周日','周一','周二','周三','周四','周五','周六']
	let week_one=arr[nowWeek]
	return week_one //返回的是周几
},

dateInit: function (setYear, setMonth) {
	//全部时间的月份都是按0~11基准，显示月份才+1
	let dateArr = []; //需要遍历的日历数组数据
	let arrLen = 0; //dateArr的数组长度
	let now = setYear ? new Date(setYear, setMonth) : new Date();//格式化日期
	let year = setYear || now.getFullYear();
	let nextYear = 0;
	let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
	let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
	let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay();//目标月1号对应的星期
	let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
	let obj = {};
	let num = 0;
	if (month + 1 > 11) {
		nextYear = year + 1;
		dayNums = new Date(nextYear, nextMonth, 0).getDate();
	}
	arrLen = startWeek + dayNums;
	for (let i = 0; i < arrLen; i++) {
		if (i >= startWeek) {
			num = i - startWeek + 1;
			if(month+1<10){
				obj = {
					isToday: '' + year+'0' + (month + 1)+'0' + num,
					dateNum: num,
					weight: 5
				}
			}
			else if(num<10){
				obj = {
					isToday: '' + year + (month + 1)+'0' + num,
					dateNum: num,
					weight: 5
				}
			}
			else if(num<10 && month+1<10){
				obj = {
					isToday: '' + year+'0' + (month + 1)+'0' + num,
					dateNum: num,
					weight: 5
				}
			}	
		} 
		else {
			obj = {};
		}
		dateArr[i] = obj;
	}
	this.setData({
		dateArr: dateArr
	})
	let nowDate = new Date();
	let nowYear = nowDate.getFullYear();
	let nowMonth = nowDate.getMonth() + 1;
	let nowWeek = nowDate.getDay();
	let getYear = setYear || nowYear;
	let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
	if (nowYear == getYear && nowMonth == getMonth) {
		this.setData({
			isTodayWeek: true,
			todayIndex: nowWeek
		})
	} else {
		this.setData({
			isTodayWeek: false,
			todayIndex: -1
		})
	}
},
//点击左箭头
lastMonth: function () {
	//全部时间的月份都是按0~11基准，显示月份才+1
	let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
	let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
	this.setData({
		year: year,
		month: (month + 1)
	})
	this.dateInit(year, month);
},

//点击右箭头
nextMonth: function () {
	//全部时间的月份都是按0~11基准，显示月份才+1
	let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
	let month = this.data.month > 11 ? 0 : this.data.month;
	this.setData({
		year: year,
		month: (month + 1)
	})
	this.dateInit(year, month);	
},

//点击日期
lookHuoDong(event){
	//年   event.currentTarget.dataset.year
	//月   event.currentTarget.dataset.month
	//日   event.currentTarget.dataset.datenum
}