微信小程序日历组件开发

效果图：

    由于微信小程序特性的限制，js文件不能直接操作wxml文件，即不能进行dom操作，所以在此创建组件必须先把组件结构定义好，即在wxml文件中先定义好组件结构，然后再绑定数据，根据js文件中的数据进行动态渲染。这里的日历由两部分组成，一是上部红色，而是下面主要日历部分。上部直接绑定数据。

    下部分实现方式：

        第一行星期的显示，此处为固定显示，无需js操作。然后下面的日历body部分，由于每周七天，绑定的数据可根据此生成，根据当前日期生成每行的数据。

    日期生成：

        取当前月第一天，得到星期，计算上月在第一行的日期，如下图红色框中的部分：

      以当前日期为例，本月一号位周六，当前月份可显示上个月6天；计算当前月(或指定月份)最后一天的星期天数，取得下个月可在本月显示日期。最后合并本月日期，并按每行七日排列，即可生成当前月分的日历数据。以下贴出代码：

wxml代码：

<view class="calendar" bindtap="tap">
    <view class="calendar-panel">
        <view class="day">{{canlender.date}}日</view>
        <view class="month">{{canlender.month}}月</view>
    </view>
    <view class="calendar-header">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
    </view>
    <view class="calendar-body">
        <block wx:for="{{canlender.weeks}}" wx:for-item="weeks">
            <view class="calender-body-date-week">
                <block wx:for="{{weeks}}" wx:for-item="day">
                    <view class="date {{canlender.month == day.month? '' : 'placeholder'}} {{day.date==canlender.date?'date-current': ''}}">{{day.date}}</view>
                </block>
            </view>
        </block>
    </view>
</view>

js文件：

Page({
  data:{
    canlender:{
    	'month': new Date().getMonth()+1,
    	'date': new Date().getDate(),
    	"day": new Date().getDay(),
    	'year': new Date().getFullYear(),
      	"weeks":[]
    }
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数

    var canlender = [];
    var _date = new Date()
    var year = _date.getFullYear()  //年
    var month = _date.getMonth()+1  //月
    var date = _date.getDate()    //日

    console.info(year+"-"+month+"-"+date)
    var day = _date.getDay()

    var firstDay = new Date(year, month-1, 1).getDay();
    console.warn('first day of this month :'+firstDay)

    var lastMonthDays = [];
    for(var i=firstDay - 1; i>0; i--){
      console.warn(new Date(year, month,-i).getDate())
      lastMonthDays.push({
        'date':new Date(year, month,-i).getDate()+'',
        'month': month-1
      })
    }
    var currentMonthDys = [];
    for(var i=1;i<=new Date(year,month,0).getDate();i++){
      currentMonthDys.push({
        'date': i+"",
        'month': month
      })

      
    }
    var nextMonthDays = []
      var endDay = new Date(year,month,0).getDay();
      console.log('end day:'+endDay)
      for(var i=1;i<7-endDay;i++){
        nextMonthDays.push({
          'date': i+'',
          'month': month+1
        })
     }

    canlender = canlender.concat(lastMonthDays,currentMonthDys,nextMonthDays)
  	var weeks = []

    for(var i=0;i<canlender.length;i++){
    	if(i%7==0){
    		weeks[parseInt(i/7)]=new Array(7);
    	}
    	weeks[parseInt(i/7)][i%7] = canlender[i]
    }
    
    console.info(weeks)
      this.setData({
      	"canlender.weeks": weeks
      })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  tap: function(e){
      console.info(e)
  }
})

    样式文件此处就不贴出来了，样式可自行定制。提示每行可用flex布局。js文件相关算法自行优化。

转载于:https://my.oschina.net/AARONWB/blog/761861