微信小程序日历

源码下载地址：https://github.com/lengyue1084/wxapp-calendar

小程序开发群：478374409 欢迎交流

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

如图：

朋友圈每日日历怎么制作？index.wxml

<view class="page"><view class="box"><view class="box-flex"><view class="flex-item"><view class="item-content" bindtap="doDay" data-key='left'><view class="glyphicon glyphicon-triangle-left"></view></view></view><view class="flex-item item-content-current-day"><view class="item-content">{{currentDate}}</view></view><view class="flex-item"><view class="item-content" bindtap="doDay" data-key="right"><view class="glyphicon glyphicon-triangle-right"></view></view></view></view><view class="box-flex"><view class="flex-item"><view class="item-content">一</view></view><view class="flex-item"><view class="item-content">二</view></view><view class="flex-item"><view class="item-content">三</view></view><view class="flex-item"><view class="item-content">四</view></view><view class="flex-item"><view class="item-content">五</view></view><view class="flex-item"><view class="item-content">六</view></view><view class="flex-item"><view class="item-content">日</view></view></view><view class="box-flex"><view class="flex-item" wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}"><view class="item-content" wx:if="{{currentDay != vo}}">{{vo}}</view><view class="item-content bk-color-day" wx:else>{{vo}}</view></view></view></view>
</view>

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 = thisvar currentObj = that.data.currentObjvar Y = currentObj.getFullYear();var m = currentObj.getMonth() + 1;var d = currentObj.getDate();var str = ''if (e.currentTarget.dataset.key == 'left') {m -= 1if (m <= 0) {str = (Y - 1) + '/' + 12 + '/' + d} else {str = Y + '/' + m + '/' + d}} else {m += 1if (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.currentObjif (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 = thisvar m = currentObj.getMonth() + 1var 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() + 1var result = currentDayWeek - (d % 7 - 1);var firstKey = result <= 0 ? 7 + result : result;var currentDayList = []var f = 0for (var i = 0; i < 42; i++) {let data =[]if (i < firstKey - 1) {currentDayList[i] = ''} else {if (f < currentDayNum) {currentDayList[i] = f + 1f = currentDayList[i]} else if (f >= currentDayNum) {currentDayList[i] = ''}}}that.setData({currentDayList: currentDayList})}
})