本文實例為大家分享了微信小程序自定義日歷效果的具體代碼，供大家參考，具體內(nèi)容如下

JS代碼：

var Moment = require("../../utils/moment.js");var DATE_YEAR = new Date().getFullYear();var DATE_MONTH = new Date().getMonth() + 1;var DATE_DAY = new Date().getDate();Page({ data: { year: '', month: '', day: '', days: {}, systemInfo: {}, weekStr: ['日', '一', '二', '三', '四', '五', '六'], checkDate:[] }, onLoad: function(options) { var _this = this; let now = new Date(); let year = now.getFullYear(); let month = now.getMonth() + 1; // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) this.createDateListData(); this.setData({  year: year,  month: month }) wx.getSystemInfo({  success: function(res) {  _this.setData({   systemInfo: res,  });  } }) }, onReady: function() { // 頁面渲染完成 }, onShow: function() {  },  /**創(chuàng)建日歷數(shù)據(jù) */ createDateListData: function(setYear, setMonth) { //全部時間的月份都是按0~11基準(zhǔn)，顯示月份才+1 let dateArr = []; //需要遍歷的日歷數(shù)組數(shù)據(jù) let arrLen = 0; //dateArr的數(shù)組長度 let now = setYear ? new Date(setYear, setMonth) : new Date(); let year = setYear || now.getFullYear(); let nextYear = 0; let month = setMonth || now.getMonth(); //沒有+1方便后面計算當(dāng)月總天數(shù) let nextMonth = (month + 1) > 11 ? 1 : (month + 1); console.log("當(dāng)前選中月nextMonth：" + nextMonth); //目標(biāo)月1號對應(yīng)的星期 let startWeek = this.getWeek(year, nextMonth, 1); //new Date(year + ',' + (month + 1) + ',' + 1).getDay();  console.log("目標(biāo)月1號對應(yīng)的星期startWeek:" + startWeek); //獲取目標(biāo)月有多少天 let dayNums = this.getTotalDayByMonth(year, nextMonth); //new Date(year, nextMonth, 0).getDate();    console.log("獲取目標(biāo)月有多少天dayNums:" + dayNums); let obj = {}; let num = 0; if (month + 1 > 11) {  nextYear = year + 1;  dayNums = new Date(nextYear, nextMonth, 0).getDate(); } for (var j = -startWeek + 1; j <= dayNums; j++) {  var tempWeek = -1;  if (j > 0) {  tempWeek = this.getWeek(year, nextMonth, j);  //console.log(year + "年" + month + "月" + j + "日" + "星期" + tempWeek);  }  var clazz = '';  if (tempWeek == 0 || tempWeek == 6)  clazz = 'week'  if (j < DATE_DAY && year == DATE_YEAR && nextMonth == DATE_MONTH)  //當(dāng)天之前的日期不可用  clazz = 'unavailable ' + clazz;  else  clazz = '' + clazz  /**如果當(dāng)前日期已經(jīng)選中，則變色 */  var date = year + "-" + nextMonth + "-" + j;  var index = this.checkItemExist(this.data.checkDate, date);  if (index != -1) {  clazz = clazz + ' active';  }   dateArr.push({  day: j,  class: clazz,  amount:'￥99.8'  }) } this.setData({  days: dateArr }) }, /** * 上個月 */ lastMonthEvent:function(){ //全部時間的月份都是按0~11基準(zhǔn)，顯示月份才+1 let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year; let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2; this.setData({  year: year,  month: (month + 1) }) this.createDateListData(year, month); }, /** * 下個月 */ nextMonthEvent:function(){ //全部時間的月份都是按0~11基準(zhǔn)，顯示月份才+1 let year = this.data.month > 11 ? this.data.year + 1 : this.data.year; let month = this.data.month > 11 ? 0 : this.data.month; this.setData({  year: year,  month: (month + 1) }) this.createDateListData(year, month); }, /* * 獲取月的總天數(shù) */ getTotalDayByMonth: function(year, month) { month = parseInt(month, 10); var d = new Date(year, month, 0); return d.getDate(); }, /* * 獲取月的第一天是星期幾 */ getWeek: function(year, month, day) { var d = new Date(year, month - 1, day); return d.getDay(); }, /** * 點擊日期事件 */ onPressDateEvent: function(e) { var {  year,  month,  day,  amount } = e.currentTarget.dataset; console.log("當(dāng)前點擊的日期：" + year + "-" + month + "-" + day); //當(dāng)前選擇的日期為同一個月并小于今天，或者點擊了空白處（即day<0），不執(zhí)行 if ((day < DATE_DAY && month == DATE_MONTH) || day <= 0)  return;  this.renderPressStyle(year, month, day, amount); }, renderPressStyle: function (year, month, day, amount) { var days = this.data.days; //渲染點擊樣式 for (var j = 0; j < days.length; j++) {  var tempDay = days[j].day;  if (tempDay == day) {  var date = year + "-" + month + "-" + day;  var obj = {   day: date,   amount: amount  };  var checkDateJson = this.data.checkDate;  var index = this.checkItemExist(checkDateJson, date);  if (index == -1) {   checkDateJson.push(obj);   days[j].class = days[j].class + ' active';  } else {   checkDateJson.splice(index, 1);   days[j].class = days[j].class.replace('active',' ');  }  this.setData({   checkDate: checkDateJson  })  console.log(JSON.stringify(this.data.checkDate));  break;  } } this.setData({  days: days });  }, /**檢查數(shù)組中是否存在該元素 */ checkItemExist: function (arr,value){ for (var i = 0; i < arr.length; i++) {  if (value === arr[i].day) {  return i;  } } return -1; }})