微信小程序之自定义日历组件

我们单位实行的大小周工作制，即大周休息2天，小周消息一天。因这点小特殊，总有同事常记错周六这天是否上班。也因这点，在程序上需要特别体现出大小周的提示，于是需要设计一个日历组件，并在日历上标注出排班名称和大小周。最终闷陪实现图如下:

微信小程序demo提供了一个简单的日历组件，vant也提供了一个日历组件，在github上也有一些日历组件，我试用了一番，都多少存在一些不符合之处。重点说一下vant，它有几个问题：一是加载数据太大，一运行就加载至少一年以上的数据；二是行罩渣样式不好控制，大小相档悄修改一下就会变形；三是在日期上下方加文字不方便。

因为没有找到太好的组件可以引用，就自己想设计一个能方便控制的，遂有下面的设计，

1、采用grid组件显示日期，分三行，中间一行为日期具体天的数字，上面一行显示大小周提示、下面一行显示排班名称

2、采用scroll-view动态包含grid数目

3、一行显示几天，可以动态设置

1、日历头部

2、日历内容

3、日历结构体

4、具体每个月的日历算法

获取某个月的第一天和最后一天，再获取每天的星期数，循环放到grid结构体中

优点：一是加载数据量少，可控制；二是显示内容丰富，可以控制；三是也是显示可以使用slot，更加丰富

缺点：一不是专业日历组件，样式简单了些；二是加载数据量有限，grid自身也是一个组件，加载多了额外的开销肯定大起来。

https://segmentfault.com/a/1190000013502494

不需要调接口，想要渲染几个月的数据，手动传入即可

根据思否 Peggy7   这篇文章改了一下。

  <view class="freepop_body counter-warp">

    <view class="tac bg_ffffff">

      <view class="border_bot padtb20 padlr30 tac" v-if="canlendar_data&&canlendar_data.length>0">

        <van-icon name="arrow-left" size="20" class="vam" @click="goPrevMonth"/>

        <view class="inblock fz28 vam" style="margin: 0 50rpx">{{canlendar_data[cur].year}}年{{canlendar_data[cur].month}}月闭仔并

        <van-icon name="arrow" size="20" class="vam" @click="goNextMonth" />

      <view class="week fz28 padtb20 border_bot" id="week">

        <view :class="[idx===0||idx===6 ? 'relax':'','week-item']" v-for="(item,idx) inweek_list" :key="idx">{{item}}

      <view class="month-block fz28"戚侍 v-for="(canlendar_item,index) incanlendar_data" :key="index">

        <block v-if="index===cur">轿迹

          <view class="month-content">

            <view :class="[item.fullDate>=nowDate&&item.fullDate<=maxDate&&item.available? '':'gray','month-day',checkDate===item.fullDate?'startActive':'']" @click="chooseDate" :data-available="item.fullDate>=nowDate&&item.fullDate<=maxDate&&item.available" :data-fulldate="item.fullDate" v-for="(item,dd) in canlendar_item.allDays" :key="item.fullDate">

              <view class="isfull">

                {{item.fullDate>=nowDate &&item.fullDate<=maxDate &&!item.available?'满':''}}

<block v-if="checkDate===item.fullDate">

                  {{checkDate===item.fullDate ? '已选' : ''}}

              {{item.day?item.day:''}}

    <view style="padding: 40rpx 32rpx 0 32rpx">

      <text class="fz26">{{rule}}

    <view class="fixedBar bg_f9f9f9" style="padding: 20rpx 50rpx">

      <button class="globButton" style="border-radius: 10rpx" :disabled="disable" @click="submitFree">提 交

  import {imgObj}from '@/utils/imgs'

  import httpsfrom '@/utils/common'

  const {get,throttle}=https

  let hotel_id='',timer=null,cur_year='',cur_month='',cur_day='',arr=[]

export default {

data () {

return {

imgObj:imgObj,

      rule:'',

      disable:true,//按钮是否可点击

      week_list: ['日','一','二','三','四','五','六'],

      checkDate:'',//选择的日期

      cur:0,//第几个月份

      nowDate:'',//今天

      maxDate:'',//最大日期

      canlendar_data:[]

}

},

  onLoad(options){

hotel_id=options.hotelId

    // let {spa_date}=this.$store.state

// this.checkDate=spa_date.date[0]+'-'+spa_date.date[1]+'-'+spa_date.date[2]

    this.getDate_()

    const date =new Date()

    cur_year = date.getFullYear()

    cur_month = date.getMonth() +1

    cur_day = date.getDate()

    let month = cur_month.toString().length ===1 ?`0${cur_month}` : cur_month

    let day = cur_day.toString().length ===1 ?`0${cur_day}` : cur_day

    let nowDate =`${cur_year}-${month}-${day}`

    this.nowDate=nowDate

  },

  onUnload(){

//this.reset()

    clearTimeout(timer)

  },

  methods: {

reset(){

this.rule=''

      this.checkDate=''

    },

    goPrevMonth(){

if(this.cur==0){

return false

      }else{

this.cur--

}

},

    goNextMonth(){

if(this.cur==(this.canlendar_data.length-1)){

return false

      }else{

this.cur++

}

},

    chooseDate(e) {

const available = e.currentTarget.dataset.available

      const fullDate = e.currentTarget.dataset.fulldate

      if(!available) {

return false

      }else{

this.checkDate=fullDate

      }

},

    // chooseTheDate(data,index){

//  this.theCheck=data

//  this.theCheckIndex=index

//  this.disable=false

// },

    async getDate_() {

const loginResult =await get('api_v2/free/reservation',{

hotel_id:hotel_id

})

if (loginResult.code==200) {

let data=loginResult.data

        let newBrr=[]

        data.options.map((n,index)=>{

let tomo =new Date()

          tomo.setTime(tomo.getTime() + index *24 *60 *60 *1000)//1天 以后

          let tomoYear=tomo.getFullYear(),tomoMonth=tomo.getMonth() +1,tomoDate=tomo.getDate()

          tomoMonth=tomoMonth<10?'0'+tomoMonth:tomoMonth

          tomoDate=tomoDate<10?'0'+tomoDate:tomoDate

          newBrr.push({

val:tomoYear+'-'+tomoMonth+'-'+tomoDate,

            flag:n

})

})

this.maxDate=newBrr[newBrr.length-1].val

        arr=newBrr

        this.fillCalendar(6)

        this.rule=data.rule.replace(/\\n/g,"\n")

        this.disable=false

      }

},

    submitFree:throttle(async function() {

wx.showLoading({

title:'',

        mask:true

      })

let {checkDate}=this

      let that=this

      if(checkDate==''){

wx.showToast({

title:'请选择预约日期',

          icon:'none',

          duration:2000

        })

return false

      }

const loginResult =await get('api_v2/free/submit',{

hotel_id:hotel_id,

        estimated_at:checkDate

})

if (loginResult.code==200) {

wx.hideLoading()

        let data=loginResult.data

        let orderid=data.order_id

        that.goOrderdetail(orderid)

        that.$fire.fire('alreadyFree')

      }

}),

    goBack(){

wx.navigateBack({

delta:1

      })

},

    goOrderdetail:throttle(function(id) {

wx.redirectTo({

url:'/pages/orderdetailspa/index?orderId='+id

})

}),

    // 获取每月总天数

    getAllDaysOfMonth(year,month) {

return new Date(year,month,0).getDate()

    },

    // 获取每月第一天是星期几

    getFirstDayOfMonth(year,month) {

return new Date(year, month -1, 1).getDay()

    },

    // 计算本月前空了几格

    getEmptyGrids(year,month) {

// FirstDayOfMonth代表本月的第一天是星期几

      const FirstDayOfMonth =this.getFirstDayOfMonth(year, month)

      let emptyGrids = []

      // 有空格的情况

      if (FirstDayOfMonth >0) {

for (let i =0i <FirstDayOfMonthi++) {

emptyGrids.push({

'num':'',

            'fullDate':'x'  //x是我自己定义的一个值，代表没有日期

          })

        }

// 将空格放入数组

        return emptyGrids

      }else{

// 否则返回一个新数组

        return []

      }

},

    // 计算本月日历

    getDaysOfThisMonth(year,month) {

let days = []

      const AllDaysOfMonth =this.getAllDaysOfMonth(year, month)

      let fullMonth = month.toString().length ===1 ?`0${month}`:month

      for (let i =0i <AllDaysOfMonthi++) {

let day = i+1, fullDay = day,fullDate=''

        fullDay = fullDay.toString().length ===1 ?`0${day}` : fullDay

        fullDate=`${year}-${fullMonth}-${fullDay}`

        let obj={

day,

          fullDay,

          fullDate,

          'available':true

        }

for(let j=0j

if(fullDate==arr[j].val){

obj.available=arr[j].flag

          }

}

days.push(obj)

      }

// 返回每个月的具体日期

      return days

    },

    // 循环渲染日历

// 从本月开始渲染，n代表包括本月开始连续渲染几个月

    fillCalendar(n) {

let year = cur_year, month = cur_month, fullMonth, canlendar_data = []

      // 计算年月以及具体日历

      for (let i = cur_monthi <cur_month + ni++) {

let EmptyGrids =this.getEmptyGrids(year, month)

        let DaysOfThisMonth =this.getDaysOfThisMonth(year, month)

        // 把空格和具体日历合为一个数组

        let allDays = [...EmptyGrids, ...DaysOfThisMonth]

        // 对年份和月份的计算做一些判断

        if (month >12) {

year++

          month =1

          fullMonth ='01'

          canlendar_data.push({

year,

            month,

            fullMonth,

            allDays })

          month++

        }else{

fullMonth = month.toString().length ===1 ?`0${month}` : month

          canlendar_data.push({

year,

            month,

            fullMonth,

            allDays })

          month++

        }

}

this.canlendar_data=canlendar_data

    },

  }

}

<style lang="less">

  @import "../../../styles/freecalendar.less"

Calendar类有一个方法add方法可以使用码升，例亩敏如calendar.add(Calendar.WEEK_OF_YEAR, -1)表示把时间向上推一周，calendar.add(Calendar.YEAR, -1)表示把时间向上推一年。下面是一个迟耐老具体的实例：

public class DateCalcTest

{

public static void main(String[] args)

{

Calendar calendar = Calendar.getInstance()

Date date = new Date(System.currentTimeMillis())

calendar.setTime(date)

//calendar.add(Calendar.WEEK_OF_YEAR, -1)

calendar.add(Calendar.YEAR, -1)

date = calendar.getTime()

System.out.println(date)

}

}

---