微信小程序原生实现日历功能

1.实现效果图：

当前日期底部显示一个点，其他状态可根据自己的需求自定义。

2.完整代码

码云链接：susu-mini-tem: 微信小程序封装组件，覆盖常用需求：包括轮播组件（堆叠轮播等）、canvas（圆环、海报、裁图，绘画等）、map、echarts各类图表、css3动画，步骤条、日历组件、自定义tabbar+导航栏、loading加载动画、css渐变、雪碧图、瀑布流、关键词高亮、搜索历史、图片懒加载、节流防抖、索引选择（如城市）、微信拆红包、红包雨、菜单弹出动画、3d云、按钮拖拽、营销组件（九宫格等）

3.部分代码

<!-- 日历 -->
<view class="calendar">
    <view class="cale_month flex-row j_b">
        <view catchtap="toLastMon">
            <image src="/img/de_icon3.png" class="cale_img"></image>
        </view>
        <view>{{year}}.{{months[monthIndex]}}</view>
        <view catchtap="toNextMon">
            <image src="/img/de_icon2.png" class="cale_img"></image>
        </view>
    </view>
    <view class="cale_week flex-row j_b ">
        <block wx:for="{{weekArr}}">
            <view>{{item}}</view>
        </block>
    </view>
    <view class='box1' style='width: {{ sysW * 7 }}rpx'>
        <block wx:for='{{ arr }}'>
            <view class="isrela flex-column" style='{{ index == 0 ? "margin-left:" + sysW * marLet + "rpx;" : "" }}width: {{ sysW }}rpx; height: {{ sysW }}rpx; line-height: {{ sysW }}rpx;' key="{{item}}">
                <view  wx:if="{{item.isbook==1}}" class='book isbook'>{{ item.day }}</view>
                <view  wx:if="{{item.isbook==0}}">{{ item.day }}</view>
                <view  wx:if="{{item.isbook==2}}" class=' book waitbook'>{{ item.day }}</view>
                <view  wx:if="{{item.isbook==3}}" class='book stopbook'>{{ item.day }}</view>
                <!-- 当前日期 -->
                <view  wx:if="{{item.day===getToday}}" class='dot'></view>
            </view>
        </block>
    </view>
</view>

 

 

.top{
  margin-bottom: 30rpx;
}
/*  */
.calendar{
  margin: 20rpx 24rpx 26rpx 24rpx;
  width: 700rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 25rpx 24rpx 54rpx;
}
.cale_month{
  text-align: center;
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
}
.cale_img{
  width: 14rpx;
  height: 23rpx;
}

.cale_week{
  margin: 32rpx auto;
  width: 651rpx;
  height: 65rpx;
  background: rgba(103, 32, 116, 0.1);
  border-radius: 36rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #672074;
  box-sizing: border-box;
  padding: 0 38rpx;
}

.box1 {
  display: flex;
  flex-wrap: wrap;
  margin: 15rpx auto 0;
  font-size: 26rpx;
  font-weight: 400;
  color: #333333;
}

.isbook {
  background: #672074;
}
.isrela {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.book{
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  text-align: center;
  line-height:48rpx;
  color: #FFFFFF;
}
.waitbook{
  background: rgba(103, 32, 116, 0.25);
}
.stopbook{
  background: #D3D3D3;
}
.dot{
  position: absolute;
  width: 15rpx;
  height: 15rpx;
  border-radius: 50%;
  background: #672074;
  top: 72rpx;
}

Page({
  data: {
      getToday:'',//当前日期
      chosedMonth:'',
      arr: [],
      sysW: 92,
      marLet:'',//左边边距
      weekArr: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      monthIndex:'',
      months:['January','February','March','April','May','June',
      'July','August','September','October','November','December '],
      booklist: ["5","12"],//状态一
      waitList:['19'],//状态二
      stopList:['26'],//状态三
  },
  //上个月
  toLastMon(){
    let date=this.data.chosedMonth;

    date.setMonth(date.getMonth()-1);

    let getToday='';
    if((new Date()).getMonth()==(date.getMonth())){
      getToday=(new Date()).getDate()
    }

    this.getTime(date)
    this.setData({
        chosedMonth:date,
        getToday:getToday
    })
  },
  //下个月
  toNextMon(){
    let date=this.data.chosedMonth;
   
    date.setMonth(date.getMonth()+1);

    let getToday='';
    if((new Date()).getMonth()==(date.getMonth())){
      // -11
      getToday=(new Date()).getDate()
    }
    this.getTime(date)
    this.setData({
        chosedMonth:date,
        getToday:getToday
    })
  },
  //获取日历相关参数
  dataTime: function (date) {
    //   var date = new Date('2021-7-2');
      var year = date.getFullYear();
    
      var month = date.getMonth();  //0（一月） 到 11（十二月） 
      var months = date.getMonth() + 1;//这个是当前的月份

      this.data.year=year //当前的年份
      this.data.monthIndex=month;//当前月份的索引
      this.data.getToday = date.getDate();//获取当前的日期 8号

      var d = new Date(year, months, 0);//Wed Jun 30 2021 00:00:00 GMT+0800 (中国标准时间)  2021年6月30日 周三
      this.data.lastDay = d.getDate();//这是当前月份的所有天数 30

    
      let firstDay = new Date(year, month, 1);//Tue Jun 01 2021 00:00:00 GMT+0800 (中国标准时间)
      this.data.firstDay = firstDay.getDay();// 第一天开始前的位置
  },

  onShow: function (options) {
      var date = new Date();
      this.getTime(date);//获取时间
      this.setData({
        chosedMonth:date
      })
  },
  getTime(date){
    this.dataTime(date);
    //先清空数组，根据得到今月的最后一天日期遍历 得到所有日期
    if (this.data.arr) {
        this.data.arr = [];
    }
    for (var i = 0; i < this.data.lastDay; i++) {
        var obj = {};
        obj.day = i + 1;
        obj.isbook=0//无状态
        this.data.arr.push(obj);
        this.data.booklist.forEach(item=>{
            if(this.data.arr[i].day==item){
              this.data.arr[i].isbook = 1//状态一
            }
        })
        this.data.waitList.forEach(item=>{
          if(this.data.arr[i].day==item){
            this.data.arr[i].isbook = 2//状态2
          }
        })
        this.data.stopList.forEach(item=>{
          if(this.data.arr[i].day==item){
            this.data.arr[i].isbook = 3//状态3
          }
        })
    }
    this.setData({
        marLet: this.data.firstDay,
        arr: this.data.arr,
        monthIndex: this.data.monthIndex,
        getToday:this.data.getToday,
        year:this.data.year
    });
  },

});