小程序手写日历

Posted 2023-02-18

参考技术A 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 imgObjfrom '@/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 =0; i < FirstDayOfMonth; i++)

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 =0; i < AllDaysOfMonth; i++)

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=0;j

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_month; i < cur_month + n; i++)

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";