這個日歷應該是網頁中常見的小功能了，這個也是window下的時間顯示器，這篇文章，就來實現下這個效果的小程序版本，哈哈，求個贊~~~這個可以當做小程序學習的一個很好的實例啦，底部有下載鏈接，有需要的可以下載查看源碼去我個人網站瀏覽效果更好一些哈傳送門zhengyepan.com

image
一、實現的思路

寫js的時候，最重要的就是思路了，先有思路在用思路去做細節實現。首先呢，我來說下我的思路，不同人寫同種效果可能有不同思路，不能說誰的思路厲害，但是有句話說的好，不管黑貓白貓，能抓到老鼠的就是好貓，同樣道理。當然了，嚴謹的思路更加容易維護代碼啦

思路：

當月有多少天

當月第一天星期幾

日歷一行有七個格子，對應周日到周六（周日算一周的開始），每月最多31天，最少28天，根據前兩個條件來決定要顯示多少行，如果當月第一天不是周日的話，則第一排前面的格子有上月天數的填滿，如果當月最后一天不是周六，則剩下的格子有下月天數補上。

4.我需要是我只要傳入一個年份月份參數給一個函數，它就會自動渲染日歷格子 例如：calendar(year,month)

根據上面的思路我們來具體實現它。

wxml

<view class="calendar">
      <view class="flex calendar-choose">
            <view class="tc mouth-wrap">
                  <view class="fl prev-mouth" data-handle="prev" bindtap="handleMonth">
                        <text class="iconfont icon-zuoyouqiehuan">text>
                  view>
                  <view class="mouth-picker">
                         <picker value="{{cur_month}}" range="{{monthList}}" bindchange="chooseMonth">
                              <view class="picker">{{cur_month+1}}月view>
                        picker> 
                  view>
                  <view class="fr next-mouth"  data-handle="next" bindtap="handleMonth">
                        <text class="iconfont icon-zuoyouqiehuan1">text>
                  view>
            view>
            <view class="year-wrap">
                   <picker class="tr" value="{{itemIndex}}" range="{{yearList}}" style="width:200rpx;" bindchange="chooseYear">
                         <view class="picker">{{yearList[itemIndex]}}年view>
                   picker>
                  <view class="iconfont icon-xia">view>
            view>
      view>
       <view>
            <view class="flex week-list">
                  <view class="week-itm" wx:for="{{weeklist}}">{{item}}view>
            view>
            <view class="flex days-list">
                  <view class="day lm" wx:for="{{lastMonthDaysList}}" data-handle="prev" bindtap="handleMonth">
                        <text>{{item}}text>
                  view>
                  <block  wx:for="{{currentMonthDaysList}}">
                        <view class="day">
                              <text>{{item}}text>
                        view>
                  block>
                  <view class="day nm" wx:for="{{nextMonthDaysList}}" data-handle="next" bindtap="handleMonth">
                        <text>{{item}}text>
                  view>
            view> 
      view>  
view>

wxss

/**app.wxss**/
.calendar{overflow-x:hidden;}
.calendar-choose{height:100rpx;line-height:100rpx;background:#fefefe;padding:0 30rpx;
font-size:34rpx;