微信小程序日历基础版（可以自行修改想要的其它效果）

先看效果

下面是html代码

<view class="calendar">
    <view class="calendarTop">
      <text class="calendarTopL" catchtap="prev">{{'<'}}</text>
      <text class="calendarTopC">{{nowYear}}年{{nowMonthStr}}月</text>
      <text class="calendarTopR" catchtap="next">{{'>'}}</text>
    </view>
    <view class="calendarWeek">
      <text class="calendarWeekItem" wx:for="{{weekList}}" wx:key="item">{{item}}</text>
    </view>
    <view class="calendarDate">
      <text class="calendarDateItem {{item.now ? 'dateItemNow' : ''}} {{item.gray ? 'dateItemGray' : ''}}" wx:for="{{month}}" wx:key="index">{{item.text}}</text>
    </view>
  </view>

下面是js代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    weekList: ['一','二','三','四','五','六','日'], //一周
    month:[
      {
        // text   此值为日期值，类型为number
        // now    此值为今天，在本月的周末为false，其它时候为true，类型为布尔
        // gray   此值为日期置灰，本月中的上月和下月日期以及本月的周末，类型为布尔
      }
    ],//一个月所有数据
    nowYear: 0,//选择的年
    nowMonth: 0,//选择的月
    nowMonthStr: '',//转换格式的月
    today: 0,//今天
  },

  ready(){
    this.gainDate();
    this.dateInit()
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 获取当前年月日
    gainDate(){
      let d = Reflect.construct(Date,[]);
      this.setData({
        nowYear: d.getFullYear(),
        nowMonth: d.getMonth() + 1,
        today: d.getDate(),
        nowMonthStr: (d.getMonth() + 1).toString().padStart(2,'0')
      })
    },
    // 上个月
    prev(){
      if(this.data.nowMonth > 1){
        this.setData({
          nowMonth: this.data.nowMonth  - 1,
          nowMonthStr: (this.data.nowMonth  - 1).toString().padStart(2,'0')
        })
      }else{
        this.setData({
          nowYear: this.data.nowYear - 1,
          nowMonth: 12,
          nowMonthStr: "12"
        })
      };
      this.todayProminent()
      this.dateInit()
    },
    // 下个月
    next(){
      if(this.data.nowMonth < 12){
        this.setData({
          nowMonth: this.data.nowMonth  + 1,
          nowMonthStr: (this.data.nowMonth  + 1).toString().padStart(2,'0')
        })
      }else{
        this.setData({
          nowYear: this.data.nowYear + 1,
          nowMonth: 1,
          nowMonthStr: "01"
        })
      }
      this.todayProminent()
      this.dateInit()
    },
    //今天日期凸显
    todayProminent(){
      // 将今天置为0
      this.setData({
        today: 0
      })
      let d = Reflect.construct(Date,[]);
      if(d.getFullYear() == this.data.nowYear && d.getMonth() + 1 == this.data.nowMonth){
        this.setData({
          today: d.getMonth() + 1 > this.data.nowMonth + 1 ? 0 : d.getDate()
        })
      }
    },
    // 日历主体
    dateInit(){
      let now = Reflect.construct(Date,[this.data.nowYear,this.data.nowMonth -1]); //当前月份的一号
      let startWeekNow = now.getDay(); //当前月份的一号对应的星期
      let end = Reflect.construct(Date,[Reflect.construct(Date,[this.data.nowYear,this.data.nowMonth]) -10]);// 当前月份的最后一号
      let endWeekNow = end.getDay(); //当前月份的最后一天对应的星期
      let dayNumNow = Reflect.construct(Date,[this.data.nowYear,this.data.nowMonth,0]).getDate(); //当前月有多少天
      let dayNumPrev = Reflect.construct(Date,[this.data.nowMonth - 1 ? this.data.nowYear : this.data.nowYear -1,this.data.nowMonth - 1 ? this.data.nowMonth - 1 : 12,0]).getDate(); //上个月有多少天
      
      let prevMonthShow = []; //上个月日期展示的数据
      let nowMonthShow = []; //本月日期展示的数据
      let nextMonthShow = []; //下个月日期展示的数据
      for(let i = 1; i < (startWeekNow ? startWeekNow : 7); i++){
        prevMonthShow.unshift(
          {
            text: dayNumPrev - i + 1,
            now: false,
            gray: true
          }
        )
      };
      for(let i = 1; i <= dayNumNow; i++){
        if(this.data.today == i){
          nowMonthShow.push(
            {
              text: i,
              now: true,
              gray: false

              // 下面代码是将周末置灰以及周末不显示今天的样式
              // now: ((startWeekNow + i - 1) % 7 == 6 || (startWeekNow + i - 1) % 7 == 0) ? false : true,
              // gray: ((startWeekNow + i - 1) % 7 == 6 || (startWeekNow + i - 1) % 7 == 0) ? true : false
            }
          )
        }else{
          nowMonthShow.push(
            {
              text: i,
              now: false,
              gray: false

              // 下面代码是将周末置灰
              // gray: ((startWeekNow + i - 1) % 7 == 6 || (startWeekNow + i - 1) % 7 == 0) ? true : false
            }
          )
        }
      };
      for(let i = 1; i <= (endWeekNow ? 7 - endWeekNow : 0); i++){
        nextMonthShow.push(
          {
            text: i,
            now: false,
            gray: true
          }
        )
      };
      this.setData({
        month: [...prevMonthShow,...nowMonthShow,...nextMonthShow]
      })
    }
  }
})

下面是css代码

.calendar{
  width: 690rpx;
  border-top: 1rpx solid #00000005;
  background-color: #FFFFFF;
  margin: 0 auto;
}
.calendarTop{
  padding-top: 22rpx;
  display: flex;
  justify-content: center;
  position: relative;
}
.calendarTopL{
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: #333333;
  height: 36rpx;
  line-height: 36rpx;
  position: absolute;
  left: 34rpx;
  top: 22rpx;
}
.calendarTopC{
  font-size: 26rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  height: 36rpx;
  line-height: 36rpx;
}
.calendarTopR{
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: #333333;
  height: 36rpx;
  line-height: 36rpx;
  position: absolute;
  right: 34rpx;
  top: 22rpx;
}
.calendarWeek{
  display: flex;
  flex-direction: row;
  padding-top: 24rpx;
}
.calendarWeekItem{
  width: 60rpx;
  height: 60rpx;
  font-size: 20rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 60rpx;
  text-align: center;
  margin-left: 35rpx;
}
.calendarDate{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.calendarDateItem{
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 60rpx;
  text-align: center;
  margin-left: 35rpx;
  margin-top: 20rpx;
}
.dateItemNow{
  background: #2E8CFF;
  color: #FFFFFF;
}
.dateItemGray{
  color: #CCCCCC;
}

这是基础版，可以在此基础上添加自己想要的效果