本文实例为大家分享了微信小程序日历效果的具体代码，供大家参考，具体内容如下

源码下载地址

项目需要一个日历功能，花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文件icon.wxss,该字体已经bootstrap字体图标需要的字体)看起来有80k,出去icon.wxss整个只有几k，有问题欢迎指正

如图：

index.wxml

{{currentDate}}

一

二

三

四

五

六

日

{{vo}}

{{vo}}

index.wxss @import '../../dist/css/icon.wxss';

page {

background-color: #2a8cef;

background:-webkit-gradient(linear, 0 0, 0 bottom, from(#2a8cef), to(#8A2BE2));

display: flex;

flex-direction: column;

width: 100%;

height: 100%;

flex-wrap: nowrap;

justify-content: flex-start;

align-items: stretch;

font-size: 14px;

}

.box {

display: block;

margin: 10px;

}

.box-flex {

display: -webkit-box;

display: -webkit-flex;

display: flex;

flex-wrap: wrap;

}

.flex-item {

flex-flow: nowrap;

flex-grow: 1;

flex-shrink: 1;

width: 14.2%;

}

.item-content {

margin: 5px;

padding: 0 10px;

text-align: center;

background-color: #000;

height: 2rem;

line-height: 2rem;

color: #fff;

}

.bk-color-day {

background-color: #8A2BE2;

}

.item-content-current-day {

flex-grow: 2;

}

index.js var app = getApp();

Page({

data: {

currentDate: "2017年05月03日",

dayList: '',

currentDayList: '',

currentObj: '',

currentDay: ''

},

onLoad: function (options) {

var currentObj = this.getCurrentDayString()

this.setData({

currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日',

currentDay: currentObj.getDate(),

currentObj: currentObj

})

this.setSchedule(currentObj)

},

doDay: function (e) {

var that = this

var currentObj = that.data.currentObj

var Y = currentObj.getFullYear();

var m = currentObj.getMonth() + 1;

var d = currentObj.getDate();

var str = ''

if (e.currentTarget.dataset.key == 'left') {

m -= 1

if (m <= 0) {

str = (Y - 1) + '/' + 12 + '/' + d

} else {

str = Y + '/' + m + '/' + d

}

} else {

m += 1

if (m <= 12) {

str = Y + '/' + m + '/' + d

} else {

str = (Y + 1) + '/' + 1 + '/' + d

}

}

currentObj = new Date(str)

this.setData({

currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日',

currentObj: currentObj

})

this.setSchedule(currentObj);

},

getCurrentDayString: function () {

var objDate = this.data.currentObj

if (objDate != '') {

return objDate

} else {

var c_obj = new Date()

var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()

return new Date(a)

}

},

setSchedule: function (currentObj) {

var that = this

var m = currentObj.getMonth() + 1

var Y = currentObj.getFullYear()

var d = currentObj.getDate();

var dayString = Y + '/' + m + '/' + currentObj.getDate()

var currentDayNum = new Date(Y, m, 0).getDate()

var currentDayWeek = currentObj.getUTCDay() + 1

var result = currentDayWeek - (d % 7 - 1);

var firstKey = result <= 0 ? 7 + result : result;

var currentDayList = []

var f = 0

for (var i = 0; i < 42; i++) {

let data =[]

if (i < firstKey - 1) {

currentDayList[i] = ''

} else {

if (f < currentDayNum) {

currentDayList[i] = f + 1

f = currentDayList[i]

} else if (f >= currentDayNum) {

currentDayList[i] = ''

}

}

}

that.setData({

currentDayList: currentDayList

})

}

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持聚米学院。