微信小程序自定义可滑动日历界面

本文实例为大家分享了微信小程序可滑动日历界面的具体代码，供大家参考，具体内容如下

参考某个博主的自定义控件做了一些改动，希望这篇博客能帮助需要的人。

wxml

<view class='container'>
<view class='month flex m-around'>
 <view class='arrow' bindtap='prevmonth'>《 </view>
 <view class='year-and-month'>
  <picker mode="date" value="{{date}}" start="2015-09" end="2020-09" fields='month' bindchange="binddatechange">
  <view>
   {{date}}
  </view>
  </picker>
 </view>
 <view class='arrow' bindtap='nextmonth'> 》</view>
</view>
<view class='calendar flex column s-center'>
 <view class='week-row flex m-around'>
 <view class='grid' wx:for="{{week}}" wx:key='item'>{{item}}</view>
 </view>
 <swiper class='swpier-box' circular="true" current="{{swiperindex}}" bindchange='swiperchange'>
 <swiper-item class='flex m-around days-table '>
  <view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='x.date'
  class='grid {{x.month === month?"":"notcurrent"}} {{x.date === today?"today":""}} {{x.date == beselectdate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='binddaytap'>
  <view>{{x.date === today?'今天':x.day}}</view>
  </view>
 </swiper-item>
 <swiper-item class='flex m-around days-table '>
  <view wx:for="{{calendar.second}}" wx:for-item='x' wx:key='x.date'
  class='grid {{x.month === month?"":"notcurrent"}} {{x.date === today?"today":""}} {{x.date == beselectdate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}' bindtap='binddaytap'>
  <view>{{x.date === today?'今天':x.day}}</view>
  </view>
 </swiper-item>
 <swiper-item class='flex m-around days-table'>
  <view wx:for="{{calendar.third}}" wx:for-item='x' wx:key='x.date'
  class='grid {{x.month === month?"":"notcurrent"}} {{x.date === today?"today":""}} {{x.date == beselectdate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='binddaytap'>
  <view>{{x.date === today?'今天':x.day}}</view>
  </view>
 </swiper-item>
 <swiper-item class='flex m-around days-table '>
  <view wx:for="{{calendar.fourth}}" wx:for-item='x' wx:key='x.date'
  class='grid {{x.month === month?"":"notcurrent"}} {{x.date === today?"today":""}} {{x.date == beselectdate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='binddaytap'>
  <view>{{x.date === today?'今天':x.day}}</view>
  </view>
 </swiper-item>
 </swiper>
</view>
</view>

css

/* pages/calendar/calendar.wxss */
 .container {
 height: 100vh;

 background-color: #393e44;
}
.days-table {
 flex-wrap: wrap;
 align-content: flex-start;
}
.calendar{
 position: fixed;
 z-index:10000;
 background: #393e44;
 
}
.grid {
 width: 107.14rpx;
 height: 100rpx;
 text-align: center;
 line-height: 100rpx;
 font-size:.7rem;
 color:#fff;
}
.today {
 color: #88a1fd;
}
.grid view {
 height:85rpx;
 line-height: 85rpx;
 width:85rpx;
}
.choice view{
 border-radius: 50%;
 background: #88a1fd;
 background-position:center;
 color: white;
}
/* 非本月日期 */
.notcurrent {
 color: silver;
}
.day-hover {
 background: red;
}
.swpier-box {
 height: 550rpx;
 width: 100%;
}
.arrow {
 width: 100rpx;
 color: #88a1fd;
 text-align: center;
}
.year-and-month{
 color: #88a1fd;
}

.flex {
 display: flex;
}
/* 轴向 */
.column {
 flex-direction: column;
}
/* 主轴方向 */
.m-start {
 justify-content: flex-start;
}

.m-end {
 justify-content: flex-end;
}

.m-around {
 justify-content: space-around;
}
.m-between {
 justify-content: space-between;
}
.m-center {
 justify-content: center;
}
/* 侧轴方向 */
.s-start {
 align-items: flex-start;
}
.s-end {
 align-items: flex-end;
}

.s-around {
 align-items: space-around;
}
.s-between {
 align-items: space-between;
}
.s-center {
 align-items: center;
}

js

// pages/calendar/calendar.js

'use strict';

let choose_year = null,
 choose_month = null;
const conf = {
 data: {
 day: '',
 year: '',
 month: '',
 date: '2017-01',
 today: '',
 week: ['日', '一', '二', '三', '四', '五', '六'],
 calendar: {
  first: [],
  second: [],
  third: [],
  fourth: []
 },
 swipermap: ['first', 'second', 'third', 'fourth'],
 swiperindex: 1,
 showcaldenlar: false
 },
 onload() {
 const date = new date()
  , month = this.formatmonth(date.getmonth() + 1)
  , year = date.getfullyear()
  , day = this.formatday(date.getdate())
  , today = `${year}-${month}-${day}`
 let calendar = this.generatethreemonths(year, month)

 this.setdata({
  calendar,
  month,
  year,
  day,
  today,
  beselectdate: today,
  date: `${year}-${month}`
 })
 },

 showcaldenlar() {
 this.setdata({
  showcaldenlar: !this.data.showcaldenlar
 })
 },
 /**
 * 
 * 左右滑动
 * @param {any} e 
 */
 swiperchange(e) {
 const lastindex = this.data.swiperindex
  , currentindex = e.detail.current
 let flag = false
  , { year, month, day, today, date, calendar, swipermap } = this.data
  , change = swipermap[(lastindex + 2) % 4]
  , time = this.countmonth(year, month)
  , key = 'lastmonth'

 if (lastindex > currentindex) {
  lastindex === 3 && currentindex === 0
  ? flag = true
  : null
 } else {
  lastindex === 0 && currentindex === 3
  ? null
  : flag = true
 }
 if (flag) {
  key = 'nextmonth'
 }

 year = time[key].year
 month = time[key].month
 date = `${year}-${month}`
 day = ''
 if (today.indexof(date) !== -1) {
  day = today.slice(-2)
 }

 time = this.countmonth(year, month)
 calendar[change] = null
 calendar[change] = this.generatealldays(time[key].year, time[key].month)

 this.setdata({
  swiperindex: currentindex,
  //文档上不推荐这么做，但是滑动并不会改变current的值，所以随之而来的计算会出错
  year,
  month,
  date,
  day,
  calendar
 })
 },
 /**
 * 
 * 点击切换月份，生成本月视图以及临近两个月的视图
 * @param {any} year 
 * @param {any} month 
 * @returns {object} calendar
 */
 generatethreemonths(year, month) {
 let { swiperindex, swipermap, calendar } = this.data
  , thiskey = swipermap[swiperindex]
  , lastkey = swipermap[swiperindex - 1 === -1 ? 3 : swiperindex - 1]
  , nextkey = swipermap[swiperindex + 1 === 4 ? 0 : swiperindex + 1]
  , time = this.countmonth(year, month)
 delete calendar[lastkey]
 calendar[lastkey] = this.generatealldays(time.lastmonth.year, time.lastmonth.month)
 delete calendar[thiskey]
 calendar[thiskey] = this.generatealldays(time.thismonth.year, time.thismonth.month)
 delete calendar[nextkey]
 calendar[nextkey] = this.generatealldays(time.nextmonth.year, time.nextmonth.month)
 return calendar
 },
 binddaytap(e) {
 let { month, year } = this.data
  , time = this.countmonth(year, month)
  , tapmon = e.currenttarget.dataset.month
  , day = e.currenttarget.dataset.day
 if (tapmon == time.lastmonth.month) {
  this.changedate(time.lastmonth.year, time.lastmonth.month)
 } else if (tapmon == time.nextmonth.month) {
  this.changedate(time.nextmonth.year, time.nextmonth.month)
 } else {
  this.setdata({
  day
  })
 }
 let beselectdate = e.currenttarget.dataset.date;
 this.setdata({
  beselectdate,
  showcaldenlar: false
 })
 },
 binddatechange(e) {
 if (e.detail.value === this.data.date) {
  return
 }

 const month = e.detail.value.slice(-2)
  , year = e.detail.value.slice(0, 4)

 this.changedate(year, month)
 },
 prevmonth(e) {
 let { year, month } = this.data
  , time = this.countmonth(year, month)
 this.changedate(time.lastmonth.year, time.lastmonth.month)
 },
 nextmonth(e) {
 let { year, month } = this.data
  , time = this.countmonth(year, month)
 this.changedate(time.nextmonth.year, time.nextmonth.month)
 },
 /**
 * 
 * 直接改变日期
 * @param {any} year 
 * @param {any} month 
 */
 changedate(year, month) {
 let { day, today } = this.data
  , calendar = this.generatethreemonths(year, month)
  , date = `${year}-${month}`
 date.indexof(today) === -1
  ? day = '01'
  : day = today.slice(-2)

 this.setdata({
  calendar,
  day,
  date,
  month,
  year,
 })
 },
 /**
 * 
 * 月份处理
 * @param {any} year 
 * @param {any} month 
 * @returns 
 */
 countmonth(year, month) {
 let lastmonth = {
  month: this.formatmonth(parseint(month) - 1)
 }
  , thismonth = {
  year,
  month,
  num: this.getnumofdays(year, month)
  }
  , nextmonth = {
  month: this.formatmonth(parseint(month) + 1)
  }

 lastmonth.year = parseint(month) === 1 && parseint(lastmonth.month) === 12
  ? `${parseint(year) - 1}`
  : year + ''
 lastmonth.num = this.getnumofdays(lastmonth.year, lastmonth.month)
 nextmonth.year = parseint(month) === 12 && parseint(nextmonth.month) === 1
  ? `${parseint(year) + 1}`
  : year + ''
 nextmonth.num = this.getnumofdays(nextmonth.year, nextmonth.month)
 return {
  lastmonth,
  thismonth,
  nextmonth
 }
 },
 currentmonthdays(year, month) {
 const numofdays = this.getnumofdays(year, month)
 return this.generatedays(year, month, numofdays)
 },
 /**
 * 生成上个月应显示的天
 * @param {any} year 
 * @param {any} month 
 * @returns 
 */
 lastmonthdays(year, month) {
 const lastmonth = this.formatmonth(parseint(month) - 1)
  , lastmonthyear = parseint(month) === 1 && parseint(lastmonth) === 12
  ? `${parseint(year) - 1}`
  : year
  , lastnum = this.getnumofdays(lastmonthyear, lastmonth) //上月天数
 let startweek = this.getweekofdate(year, month - 1, 1) //本月1号是周几
  , days = []
 if (startweek == 7) {
  return days
 }

 const startday = lastnum - startweek

 return this.generatedays(lastmonthyear, lastmonth, lastnum, { startnum: startday, notcurrent: true })
 },
 /**
 * 生成下个月应显示天
 * @param {any} year 
 * @param {any} month
 * @returns 
 */
 nextmonthdays(year, month) {
 const nextmonth = this.formatmonth(parseint(month) + 1)
  , nextmonthyear = parseint(month) === 12 && parseint(nextmonth) === 1
  ? `${parseint(year) + 1}`
  : year
  , nextnum = this.getnumofdays(nextmonthyear, nextmonth) //下月天数
 let endweek = this.getweekofdate(year, month)  //本月最后一天是周几
  , days = []
  , daysnum = 0
 if (endweek == 6) {
  return days
 } else if (endweek == 7) {
  daysnum = 6
 } else {
  daysnum = 6 - endweek
 }
 return this.generatedays(nextmonthyear, nextmonth, daysnum, { startnum: 1, notcurrent: true })
 },
 /**
 * 
 * 生成一个月的日历
 * @param {any} year 
 * @param {any} month 
 * @returns array
 */
 generatealldays(year, month) {
 let lastmonth = this.lastmonthdays(year, month)
  , thismonth = this.currentmonthdays(year, month)
  , nextmonth = this.nextmonthdays(year, month)
  , days = [].concat(lastmonth, thismonth, nextmonth)
 return days
 },
 /**
 * 
 * 生成日详情
 * @param {any} year 
 * @param {any} month 
 * @param {any} daysnum 
 * @param {boolean} [option={
 * startnum:1,
 * grey: false
 * }] 
 * @returns array 日期对象数组
 */
 generatedays(year, month, daysnum, option = {
 startnum: 1,
 notcurrent: false
 }) {
 const weekmap = ['一', '二', '三', '四', '五', '六', '日']
 let days = []
 for (let i = option.startnum; i <= daysnum; i++) {
  let week = weekmap[new date(year, month - 1, i).getutcday()]
  let day = this.formatday(i)
  days.push({
  date: `${year}-${month}-${day}`,
  event: false,
  day,
  week,
  month,
  year
  })
 }
 return days
 },
 /**
 * 
 * 获取指定月第n天是周几 |
 * 9月第1天： 2017, 08, 1 |
 * 9月第31天：2017, 09, 0 
 * @param {any} year 
 * @param {any} month 
 * @param {number} [day=0] 0为最后一天，1为第一天
 * @returns number 周 1-7, 
 */
 getweekofdate(year, month, day = 0) {
 let dateofmonth = new date(year, month, 0).getutcday() + 1;
 dateofmonth == 7 ? dateofmonth = 0 : '';
 return dateofmonth;
 },
 /**
 * 
 * 获取本月天数
 * @param {number} year 
 * @param {number} month 
 * @param {number} [day=0] 0为本月0最后一天的
 * @returns number 1-31
 */
 getnumofdays(year, month, day = 0) {
 return new date(year, month, day).getdate()
 },
 /**
 * 
 * 月份处理
 * @param {number} month 
 * @returns format month mm 1-12
 */
 formatmonth(month) {
 let monthstr = ''
 if (month > 12 || month < 1) {
  monthstr = math.abs(month - 12) + ''
 } else {
  monthstr = month + ''
 }
 monthstr = `${monthstr.length > 1 ? '' : '0'}${monthstr}`
 return monthstr
 },
 formatday(day) {
 return `${(day + '').length > 1 ? '' : '0'}${day}`
 }
}
page(conf)

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。