小程序手写日历

https://segmentfault.com/a/1190000013502494

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

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

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

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

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

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

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

}

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

小程序手写日历

推荐阅读更多精彩内容