微信小程序日历

来源：互联网发布：三维图片制作软件编辑：程序博客网时间：2024/06/16 20:09

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

项目需要一个日历功能，花了一天时间实现的微信小程序日历,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 = 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        })    }})

0 0