小程序日历组件

微信、飞书小程序日历组件，支持做排期标记

index.ttml 页面引用

<!-- 日历 -->
<my-component
 daDts="{{date1}}"
 monThs="{{month1}}"
 dayAing="{{daybg}}"
 dayBing="{{daybg1}}"
 dayCing="{{daybg2}}"
 dayDing="{{daybg3}}"
 dayBor="{{daybor}}"
 leisureShow="{{leisureShow}}"
 bindmyevent="onMyEvent"/>

index.json 页面引用

"usingComponents": {
  	"my-component" : "/components/calendar/calendar"
  },
"component": true
    

index.js 回调事件

Page({
  data: {
    date1:'2020',//当前年
    month1:'9',//当前月
    daybg:['2','3'], //日历标记 只能传1-31 数字 蓝色
    daybg1:['5','6'], //日历标记 2 绿色
    daybg2:['8','9'], //日历标记 3 黄色
    daybg3:['12','13'], //日历标记 3 灰色
    daybor:'', //日历点击加边框
    leisureShow:'96'//日历收缩
  },
  //点击日历触发回调事件
  onMyEvent(e) {
    // 自定义组件触发事件时提供的detail对象
    if(e.detail){
      this.setData({
        daybor:e.detail.bor
      })
    }
  },
})

组件页面 calendar.ttml

<view class="cles">
    <!-- 头部 -->
    <view class="cle-head">
        <picker mode="date" value="{{date1}}" start="2015-09-01" end="2030-09-01"
            bindchange="bindDateChange" fields="year">
        <view class="picker">
            {{date1}} <image src="../../pages/assets/qualityReview/xiala.png" style="width:36rpx;height:36rpx;"/>
        </view>
        </picker>
        <view class="head-rights">
           <image src="../../pages/assets/home/zuo.png" bindtap="handleMont" data-in="left" style="width:36rpx;height:36rpx; cursor: pointer;"/>
            <view class="right-tle">{{ month1 }}</view>
           <image src="../../pages/assets/home/you.png" bindtap="handleMont" data-in="right" style="width:36rpx;height:36rpx; cursor: pointer;"/>
        </view>
    </view>
    <!-- 周几 -->
    <view class="cle-week">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
    </view>
    <!-- 日期排版 -->
    <view class="{{ cleShow === '576' ? 'cra-main' : 'cra-main1'}}" >
        <!-- 上个月 -->
        <view class="cra-list" tt:for="{{dayUp}}">
            <view class="cra-lists">
                <text class="list-rq">{{item}}</text>
                <text class="list-bj"></text>
            </view>
        </view>
        <!-- 本月 -->
        <view class="cra-list cra-list1" tt:for="{{dayTime}}">
            <view class="cra-lists">
                <view class="{{ item == daybor ? 'list-rq list-rq1 btn-bor' : 'list-rq list-rq1 btn-bor1' }}" bindtap="onTap" data-bor="{{item}}">
                    <!-- <view class="list-bg" tt:if="{{ item === daybg[0] || daybg[1] || daybg[2] || daybg[3]}}" >{{item}}</view> -->
                    <view
                        data-bor="{{item}}"
                        class="list-bg list-bg1"
                        tt:if="{{ item == daybg[0] || item == daybg[1] || item == daybg[2] || item == daybg[3] || item == daybg[4] || item == daybg[5] || item == daybg[6]|| item == daybg[7]|| item == daybg[8]|| item == daybg[9] || item == daybg[10]|| item == daybg[11]|| item == daybg[12]|| item == daybg[13]|| item == daybg[14]|| item == daybg[15]|| item == daybg[16]|| item == daybg[17]|| item == daybg[18]|| item == daybg[19]|| item == daybg[20]|| item == daybg[21]|| item == daybg[22]|| item == daybg[23]|| item == daybg[24]|| item == daybg[25]|| item == daybg[26]|| item == daybg[27]|| item == daybg[28]|| item == daybg[29]|| item == daybg[30]|| item == daybg[31]}}" 
                    >
                        {{item}}
                    </view>
                    <view
                        data-bor="{{item}}"
                        class="list-bg list-bg2"
                        tt:elif="{{ item == daybg1[0] || item == daybg1[1] || item == daybg1[2] || item == daybg1[3] || item == daybg1[4] || item == daybg1[5] || item == daybg1[6]|| item == daybg1[7]|| item == daybg1[8]|| item == daybg1[9] || item == daybg1[10]|| item == daybg1[11]|| item == daybg1[12]|| item == daybg1[13]|| item == daybg1[14]|| item == daybg1[15]|| item == daybg1[16]|| item == daybg1[17]|| item == daybg1[18]|| item == daybg1[19]|| item == daybg1[20]|| item == daybg1[21]|| item == daybg1[22]|| item == daybg1[23]|| item == daybg1[24]|| item == daybg1[25]|| item == daybg1[26]|| item == daybg1[27]|| item == daybg1[28]|| item == daybg1[29]|| item == daybg1[30]|| item == daybg1[31]}}" 
                    >
                        {{item}}
                    </view>
                    <view
                        data-bor="{{item}}"
                        class="list-bg list-bg3"
                        tt:elif="{{ item == daybg2[0] || item == daybg2[1] || item == daybg2[2] || item == daybg2[3] || item == daybg2[4] || item == daybg2[5] || item == daybg2[6]|| item == daybg2[7]|| item == daybg2[8]|| item == daybg2[9] || item == daybg2[10]|| item == daybg2[11]|| item == daybg2[12]|| item == daybg2[13]|| item == daybg2[14]|| item == daybg2[15]|| item == daybg2[16]|| item == daybg2[17]|| item == daybg2[18]|| item == daybg2[19]|| item == daybg2[20]|| item == daybg2[21]|| item == daybg2[22]|| item == daybg2[23]|| item == daybg2[24]|| item == daybg2[25]|| item == daybg2[26]|| item == daybg2[27]|| item == daybg2[28]|| item == daybg2[29]|| item == daybg2[30]|| item == daybg2[31]}}" 
                    >
                        {{item}}
                    </view>
                    <view
                        data-bor="{{item}}"
                        class="list-bg list-bg4"
                        tt:elif="{{ item == daybg3[0] || item == daybg3[1] || item == daybg3[2] || item == daybg3[3] || item == daybg3[4] || item == daybg3[5] || item == daybg3[6]|| item == daybg3[7]|| item == daybg3[8]|| item == daybg3[9] || item == daybg3[10]|| item == daybg3[11]|| item == daybg3[12]|| item == daybg3[13]|| item == daybg3[14]|| item == daybg3[15]|| item == daybg3[16]|| item == daybg3[17]|| item == daybg3[18]|| item == daybg3[19]|| item == daybg3[20]|| item == daybg3[21]|| item == daybg3[22]|| item == daybg3[23]|| item == daybg3[24]|| item == daybg3[25]|| item == daybg3[26]|| item == daybg3[27]|| item == daybg3[28]|| item == daybg3[29]|| item == daybg3[30]|| item == daybg3[31]}}" 
                    >
                        {{item}}
                    </view>
                    <view data-bor="{{item}}" tt:else>{{item}}</view>
                </view>
                <!-- <text 
                    class="list-bj" 
                    tt:if="{{ item == daybg[0] || item == daybg[1] || item == daybg[2] || item == daybg[3] || item == daybg[4] || item == daybg[5] || item == daybg[6]|| item == daybg[7]|| item == daybg[8]|| item == daybg[9] || item == daybg[10]|| item == daybg[11]|| item == daybg[12]|| item == daybg[13]|| item == daybg[14]|| item == daybg[15]|| item == daybg[16]|| item == daybg[17]|| item == daybg[18]|| item == daybg[19]|| item == daybg[20]|| item == daybg[21]|| item == daybg[22]|| item == daybg[23]|| item == daybg[24]|| item == daybg[25]|| item == daybg[26]|| item == daybg[27]|| item == daybg[28]|| item == daybg[29]|| item == daybg[30]|| item == daybg[31]}}" 
                >A1</text> -->
                <text class="list-bj" tt:else></text>
            </view>
        </view>
        <!-- 下个月 -->
        <view class="cra-list" tt:for="{{dayRear}}">
            <view class="cra-lists">
                <text class="list-rq">{{item}}</text>
                <text class="list-bj"></text>
            </view>
        </view>
    </view>
    <!-- 展开 -->
    <view class="unfold" tt:if="{{cleShow=== '576'}}">
        <image src="../../pages/assets/home/zk.png" bindtap="handleUnfold" data-up="96" style="width:48rpx;height:48rpx; cursor: pointer;"/>
    </view>
    <view class="pack" tt:else>
        <image src="../../pages/assets/home/sq.png" bindtap="handleUnfold" data-up="576" style="width:48rpx;height:48rpx; cursor: pointer;"/>
    </view>
</view>

组件 calendar.js

Component({
  behaviors: [],

  properties: {
    daDts:String,//当前年
    monThs:String, //当前月
    dayAing:Array, //标记的日期
    dayBing:Array, //标记的日期
    dayCing:Array, //标记的日期
    dayDing:Array, //标记的日期
    leisureShow:{
      type: String,
      observer: function(newVal, oldVal, changedPath) {
         // 通常 newVal 就是新设置的数据， oldVal 是旧数据
         this.setData({
           cleShow:newVal,
         })
      }
    },//日历缩放
    dayBor:{
      type: String,
      observer: function(newVal, oldVal, changedPath) {
         // 通常 newVal 就是新设置的数据， oldVal 是旧数据
         this.setData({
           daybor:newVal,
         })
      }
    },

  },

  // 私有数据，可用于模版渲染
  data: {
    date1:'',//当前年
    month1:'',//当前月
    date:new Date(),//当前时间
    dayTime:[],//当月天数
    weeks:'',//当月1号周几

    dayUp:[],//上个补多少天

    dayRear:[],//下个月补几天

    daybg:[], //日历标记 1 蓝色
    daybg1:[], //日历标记 1 绿色
    daybg2:[], //日历标记 1 黄色
    daybg3:[], //日历标记 1 灰色
    daybor:'', //日历点击时的颜色
    cleShow: '', //日历展开收起
    
  },

  // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
   attached: function () { 
    // this.selectComponent('.class-name', function(res) {
    //   console.log(res)
    // })
  },
  ready: function() {
    this.setData({
      date1:this.data.daDts,
      month1:this.data.monThs,
      daybg:this.data.dayAing,
      daybg1:this.data.dayBing,
      daybg2:this.data.dayCing,
      daybg3:this.data.dayDing,
      cleShow:this.data.leisureShow,
    })
    
    this.handle() //初始化
    // console.log(this.data.daybg)
   },

  // 组件自定义方法
  methods: {
    onLoad() {
      
    },
    onTap(e) {
      var myEventDetail = e.target.dataset // detail对象，提供给事件监听函数
      // var myEventOption = {} // 触发事件的选项
      this.triggerEvent(
        'myevent',
        myEventDetail,
        // myEventOption
      )
    },
    //月份选择
    onMyEvent: function(e){
      let t = e.target.dataset.in
      if (t === 'left'){
        if(this.data.month1 == 1) {
          let ye= parseInt(this.data.date1)
          this.setData({ month1:13 })
          this.setData({
            date1:parseInt(this.data.date1)-1
          })
        }
        this.setData({
          month1:parseInt(this.data.month1)-1
        })
        this.handle()
      }
      if (t === 'right'){
        if(this.data.month1 == 12) {
          this.setData({ month1:0 })
          this.setData({
            date1:parseInt(this.data.date1)+1
          })
        }
        this.setData({
          month1:parseInt(this.data.month1)+1
        })
        this.handle()
      }
    },
    //日历初始化
    handle: function(){
      let sme =  this.data.date1+'-'+this.data.month1+'-1'
    let  myDate = new Date(sme);
    let year = myDate.getFullYear();//获取年
    let month = myDate.getMonth()+ 1;//获取月，默认从0开始，所以要加一

    // 当前月份的 1 号 星期几
    let s1 =   year+'-'+month+'-1' //当前月份的 1 号
    let myDate2 = new Date(s1); 
    let dayOne = myDate2.getDay(); //当前月份的 1 号 星期几
    let arr1=[]
    for( let i=1;i <= this.severalDays(month,year); i++ ){
        
        arr1.push(i)
      }
    this.setData({ dayTime:arr1 }) //本月天数
    

    //上一个月有多少天 补加多少天
    let daybu = [null,'1','2','3','4','5','6'] //一周
    let arr2=[]
    let days= this.severalDays(month-1,year)
    if(daybu != null){
        for( let i=0;i < daybu[dayOne]; i++ ){
          
          arr2.push(days-i)
        }
        arr2.reverse()
    }
    this.setData({ dayUp:arr2 }) //上个月天数


    //下一个月 补加多少天
    let dayts = 42 - daybu[dayOne] - this.severalDays(month,year)
    let arr3=[]
    
      for( let i=1;i <= dayts; i++ ){
          
          arr3.push(i)
        }
       
    this.setData({ dayRear:arr3 }) // 下个月天数
    //  console.log(arr3,this.dayRear)
    },
    //展开
    handleUnfold: function(e){
      let wdh = e.target.dataset.up
      // console.log(wdh)
      this.setData({
        cleShow:wdh
      })
    },
    severalDays: function(datas,year){
      switch (datas) {
          case 1:
          case 3:
          case 5:
          case 7:
          case 8:
          case 10:
          case 12:
            dayNum = 31;
            break;
          case 4:
          case 6:
          case 9:
          case 11:
            dayNum = 30;
            break;
          case 2:
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
              dayNum = 29;
            } else {
              dayNum = 28;
            }
            break;
        }
      return dayNum
    },
    // 当前年
    bindDateChange: function (e) {
        // console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            date1: e.detail.value
        })
        this.handle()
    },
    // 当前月
    handleMont: function(e) {
        let t = e.target.dataset.in
      if (t === 'left'){
        if(this.data.month1 == 1) {
          let ye= parseInt(this.data.date1)
          this.setData({ month1:13 })
          this.setData({
            date1:parseInt(this.data.date1)-1
          })
        }
        this.setData({
          month1:parseInt(this.data.month1)-1
        })
        this.handle()
      }
      if (t === 'right'){
        if(this.data.month1 == 12) {
          this.setData({ month1:0 })
          this.setData({
            date1:parseInt(this.data.date1)+1
          })
        }
        this.setData({
          month1:parseInt(this.data.month1)+1
        })
        this.handle()
      }
    }
  }
})

组件 calendar.josn

{
    "component": true
}

组件 calendar.ttss

.cles{
    
    border-radius: 0px 0px 20px 20px;
    padding:  0 20px;
    background: #FFFFFF;
}

.cle-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
}
.head-rights{
    display: flex;
    align-items: center;
}
.right-tle{
    margin: 0 40rpx;
}
.cle-week{
    display: flex;
    justify-content: space-around;
    height: 24px;
    font-size: 14px;
    font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
    font-weight: 400;
    color: #AAB4C6;
    line-height: 24px;
    margin-bottom: 20px;
    }
.cra-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 576rpx;
    overflow: hidden;
}
.cra-main1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 96rpx;
    overflow: hidden;
}
.cra-list{
    width: 90rpx;
}
.cra-lists{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.list-bj{
    display: inline-block;
    width: 24rpx;
    height: 24rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #2C68FF;
    line-height: 32rpx;
}
.list-bg{
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.list-bg1{
    background: #2C68FF;
}
.list-bg2{
    background: #46B882;
}
.list-bg3{
    background: #FAAD15;
}
.list-bg4{
    background: #B8B8B8;
}
.list-rq{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #B8B8B8;
    width: 72rpx;
    height: 72rpx;
    

}
.list-rq1{
    font-size: 28rpx;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #333333;
}
.unfold, 
.pack {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20rpx 20rpx;
}
.btn-bor{
    border: 2rpx solid #ccc;
    border-radius: 50%;
}
.btn-bor1{
    border: 2rpx solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}