微信小程序-实现日历功能

< view class= "calendar" >

< view class= "selectDate" >

< view class= "goleft iconfont icon-jianzuo" bindtap= "prevMonth" ></ view >

< view class= "date-wrap" >

{{year}}年{{month}}月

</ view >

< view class= "goright iconfont icon-jianzuo" bindtap= "nextMonth" ></ view >

</ view >

< view class= "week" >

< view wx:for= "{{weekArr}}" wx:for-index= "index" wx:for-item= "item" wx:key= "key" style= "width:{{param}}px;height:{{param-17}}px;line-height:{{param-17}}px" >{{item}} </ view >

</ view >

< view class= "date" style= 'width: {{ param * 7 }}px;' >

< block wx:for= "{{dateArr}}" wx:for-index= "index" wx:for-item= "item" wx:key= "key" >

< view style= "{{index ==0?'margin-left:'+ param *firstDay +'px;':''}}width:{{param}}px;height:{{param-10}}px;line-height:{{param-10}}px;" class= "{{index+1==day?'today':''}} {{index+1==day&&isClock?'clockOn':''}}" >< view class= "day" >{{item}} </ view ></ view >

</ block >

</ view >

</ view > <!--end calendar-->

data : {

year : '' ,

month : '' ,

day : '' ,

weekArr : [ '日' , '一' , '二' , '三' , '四' , '五' , '六' ],

dateArr :[],

firstDay : '' ,

lastDay : '' ,

param : null ,

clockNum : 3 ,

},

getDate : function () { //获取当月日期

var mydate = new Date ();

var year = mydate .getFullYear ();

var month = mydate .getMonth ();

var months = month + 1 ;

this .data .year = year ;

this .data .month = months ;

this .data .day = mydate .getDate ();

var fist = new Date (year , month , 1 );

this .data .firstDay = fist .getDay ();

var last = new Date (year , months , 0 );

this .data .lastDay = last .getDate ();

this .setData ({

year : this .data .year ,

month : this .data .month ,

day : this .data .day ,

firstDay : this .data .firstDay ,

lastDay : this .data .lastDay

})

console .log ( "今天：" + this .data .day );

},

setDate : function () {

for ( var i = 1 ; i < this .data .lastDay + 1 ; i ++) {

this .data .dateArr .push (i );

}

this .setData ({

dateArr : this .data .dateArr ,

firstDay : this .data .firstDay

})

},

prevMonth : function (){ //上一月

var months = "" ;

var years = "" ;

if ( this .data .month == 1 ){

years = this .data .year - 1

this .data .month = 12 ;

months = this .data .month ;

} else {

years = this .data .year ;

months = this .data .month - 1 ;

}

var first = new Date (years , months - 1 , 1 );

this .data .firstDay = first .getDay ();

var last = new Date (years , months , 0 );

this .data .lastDay = last .getDate ();

this .setData ({

month : months ,

year :years ,

firstDay : this .data .firstDay ,

lastDay : this .data .lastDay

})

this .data .dateArr = [];

for ( var i = 1 ; i < this .data .lastDay + 1 ; i ++) {

this .data .dateArr .push (i );

}

this .setData ({

dateArr : this .data .dateArr

})

},

nextMonth : function (){ //下一月

var months = "" ;

var years = "" ;

if ( this .data .month == 12 ){

this .data .month = 0 ;

months = this .data .month ;

years = this .data .year + 1 ;

} else {

months = this .data .month + 1 ;

years = this .data .year ;

}

var months = this .data .month + 1 ;

var first = new Date (years , months - 1 , 1 );

this .data .firstDay = first .getDay ();

var last = new Date (years ,months , 0 );

this .data .lastDay = last .getDate ();

this .setData ({

month : months ,

year :years ,

firstDay : this .data .firstDay ,

lastDay : this .data .lastDay

})

this .data .dateArr = [];

for ( var i = 1 ; i < this .data .lastDay + 1 ; i ++) {

this .data .dateArr .push (i );

}

this .setData ({

dateArr : this .data .dateArr

})

},

onLoad : function (options ) {

this .getDate ();

this .setDate ();

var res = wx .getSystemInfoSync ();

this .setData ({

param :res .windowHeight / 12 ,

})

},