Look at the small effect

First of all, all we need to get is the data in each cell.

Get the month first, then click on the month to switch to another month, when you reach the boundary line to the up/next year can be.

So, how do we get the data for the month, you can see that the first day of the month starts at 1, and then xx days, like January 31, let’s enumerate it.

But the month is affected by the year, so the calculation is done.

Get this month’s 7*5 list

let getMothList = (year, month) => {
    var star = new Date(Date.UTC(year, month - 1, 1)).getDay()
    let mn = getMothNum(year)[month - 1]
    var res = []
    var row = []
    new Array(35)
        .fill(' ')
        .map((_, i) => i - star + 1)
        .map(e => 
            (e > 0 && e <= mn)
            ? ({
                date: `${year}/${month}/${e}`,
                number: e 
            })
            : (null)
        )
        .forEach((item, i) => {
            row.push(JSON.parse(JSON.stringify(item)))
            if((i + 1) % 7 == 0){
                res.push(row)
                row = []
            }
        })
    return res
}
Copy the code

And then get the month

var getMaxY = y => Boolean( y % 4 ==0 && y % 100 ! = 0 || y % 400==0 ) var getAugNum = n => getMaxY(n) ? Var getMothNum = y => ([31, getAugNum(y), 31, 30, 31, 30, 30, 31,31, 31, 30, 31,31])Copy the code

This is all the JS I have on top (still poor next month switch did not say ha)

However, if the month in Chinese is missing, the one in need can be matched again

var mothZh = ['一'.'二'.'三'.'four'.'five'.'六'.'seven'.'eight'.'九'.'ten'.'十一'.'十二'].map(e => e + 'month')
Copy the code

And then the month before last


  up(e){
    var data = e.currentTarget.dataset
    if(data.data == 'on') {if(this.data.dateM > 1){
        var dateM = this.data.dateM
        var dateY = this.data.dateY
        this.setDate(dateY, dateM - 1)
      }else{
        var dateY = this.data.dateY
        this.setDate(dateY - 1, 12)
      }
    }
  },
  down(e){
    var data = e.currentTarget.dataset
    if(data.data == 'next') {if(this.data.dateM < 12){
        var dateM = this.data.dateM
        var dateY = this.data.dateY
        this.setDate(dateY, dateM + 1)
      }else{
        var dateY = this.data.dateY
        this.setDate(dateY + 1, 1)
      }
    }
  },
Copy the code

Last month, the operation is to update the data, update the data, because the small program can not write logic in view, so we operate in MPA (this is my business logic, you do not care about it, I put it out for everyone to see).

  setDate(dateY, dateM){ var date_list = getMothList(dateY, dateM) .map(e => ! e ? e : e.map(day => { var cat_date = this.data.cat_datereturn! day ? day : { ... day, className: this.data.chckin_list.indexOf(day.date) ! = 1?'checkin' : ' ',
        sign: day.date == [cat_date.y, cat_date.m, cat_date.d].join('/'),
        maxToday: +(Date.UTC(day.date.split('/')[0], day.date.split('/')[1] - 1, +(day.date.split('/')[2]))) > Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), } })) this.setData(({ dateY, This.setsign (dateY, dateM) // console.log(date_list)},Copy the code

And then you’ll notice that there’s a chckin_list, and that’s what’s going to be rendered. view

<view class="week">
            <view class="flex" wx:for="{{date_list}}" wx:key="index" wx:for-item="row">
                <view 
                class="day {{day.maxToday ? 'maxToday' : ''}}" 
                wx:for="{{row}}" wx:for-index="row_idx" wx:for-item="day" wx:key="row_idx"
                bind:tap="tapDay"
                data-day="{{day.date}}"
                >
                    <block wx:if="{{day}}">
                        <text class="block to_day_block {{day.sign ? 'select_date' : ''}}" wx:if="{{toDay == day.date}}">今</text>
                        <text class="block {{day.sign ? 'select_date' : ''}}" wx:else>{{day.number}}</text>
                    </block>
                    <view wx:if="{{day.className}}" class="{{day.className}}"</view> </view> </view> </view>Copy the code

So here’s my business logic, and all I really need is if, day, because everything except empty needs to be rendered. But the general business also has whether to check in or not, after today, the gray is not clickable.

other

The reason why THERE is no CSS, CSS or write your own, if you really need to comment below.

Oh, if you want to see the effect, go to the small program inside search 🔍, “nine back words”, click the calendar (one is home to complete today’s task, one is my -> back words days)

(I can talk about how the background check-in works if you want, nodejs)

— –

That’s it. Good night

— Update part —

(Someone downstairs reminded (Maomaofan) that the last one on March 31 was missing. I checked and found that it was cut, because 5 * 7 could not be fully displayed.)

Image after repair

The change is to dynamically load the row.

Based on the code above, add a judgment

So let’s do the 35 out front and let’s do 6 times 7. Because I added one more row. Judge whether to have spare position again next, take out can. row.map(e => e || ”).join(”) ! = = ‘ ‘

– the –