planCalendar.js 7.3 KB
// pages/planCalendar/planCalendar.js

let chooseYear = null;
let chooseMonth = null;
var app = getApp()
const conf = {
  data: {
    hasEmptyGrid: false,
    showPicker: false
  },
  onLoad() {
    const date = new Date();
    const curYear = date.getFullYear();
    const curMonth = date.getMonth() + 1;

    const weeksCh = ['日', '一', '二', '三', '四', '五', '六'];
    this.calculateEmptyGrids(curYear, curMonth);
    this.calculateDays(curYear, curMonth);
    this.setData({
      curYear,
      curMonth,
      weeksCh
    });
    if (curMonth > 9) {
      var mont = curMonth
    } else {
      var mont = "0" + curMonth
    }
    var montDat = curYear + "-" + mont
    this.getDay(montDat)
  },
  // getDay(montDat) {
  //   app.ajax("Index/userSign", {
  //     user_id: app.globalData.userId,
  //     date: montDat
  //   }, (res) => {
  //     console.log(res)
  //     if (res.data.code == 1) {
  //       var data = res.data.data
  //       const days = this.data.days;
  //       var dayArr = []
  //       for (let n in data) {
  //         dayArr.push(parseInt(data[n].day))
  //       }
  //       for (let n in days) {
  //         for (let j in dayArr) {
  //           if (dayArr[j] == days[n].day) {
  //             days[n].choosed = true
  //             console.log(days[n])
  //           }
  //         }
  //       }
  //       this.setData({
  //         days,
  //       })
  //     } else {
  //       // wx.showLoading({
  //       //    title: res.data.msg,
  //       //    duration: 2000
  //       // })
  //     }
  //   })
  // },
  
  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
  },
  getFirstDayOfWeek(year, month) {
    return new Date(Date.UTC(year, month - 1, 1)).getDay();
  },
  calculateEmptyGrids(year, month) {
    const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
    let empytGrids = [];
    if (firstDayOfWeek > 0) {
      for (let i = 0; i < firstDayOfWeek; i++) {
        empytGrids.push(i);
      }
      this.setData({
        hasEmptyGrid: true,
        empytGrids
      });
    } else {
      this.setData({
        hasEmptyGrid: false,
        empytGrids: []
      });
    }
  },
  calculateDays(year, month) {
    let days = [];

    const thisMonthDays = this.getThisMonthDays(year, month);

    for (let i = 1; i <= thisMonthDays; i++) {
      days.push({
        day: i,
        choosed: false
      });
    }

    this.setData({
      days
    });
  },
  handleCalendar(e) {
    const handle = e.currentTarget.dataset.handle;
    const curYear = this.data.curYear;
    const curMonth = this.data.curMonth;

    if (handle === 'prev') {
      let newMonth = curMonth - 1;
      let newYear = curYear;
      if (newMonth < 1) {
        newYear = curYear - 1;
        newMonth = 12;
      }

      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);

      this.setData({
        curYear: newYear,
        curMonth: newMonth
      });
      if (curMonth > 9) {
        var mont = curMonth
      } else {
        var mont = "0" + (curMonth - 1)
      }
      var montDat = curYear + "-" + mont
      this.getDay(montDat)
    } else {
      let newMonth = curMonth + 1;
      let newYear = curYear;
      if (newMonth > 12) {
        newYear = curYear + 1;
        newMonth = 1;
      }

      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);

      this.setData({
        curYear: newYear,
        curMonth: newMonth
      });
      if (curMonth > 9) {
        var mont = curMonth
      } else {
        var mont = "0" + (curMonth + 1)
      }
      var montDat = curYear + "-" + mont
      this.getDay(montDat)
    }
  },
  // 选择日期
  tapDayItem(e) {
    const idx = e.currentTarget.dataset.idx;
    const days = this.data.days;
    console.log(idx)
    console.log(days)
    days[idx].choosed = !days[idx].choosed;
    this.setData({
       days,
    });
  },
  chooseYearAndMonth() {
    // const curYear = this.data.curYear;
    // const curMonth = this.data.curMonth;
    // let pickerYear = [];
    // let pickerMonth = [];
    // for (let i = 1900; i <= 2100; i++) {
    //    pickerYear.push(i);
    // }
    // for (let i = 1; i <= 12; i++) {
    //    pickerMonth.push(i);
    // }
    // const idxYear = pickerYear.indexOf(curYear);
    // const idxMonth = pickerMonth.indexOf(curMonth);
    // this.setData({
    //    pickerValue: [idxYear, idxMonth],
    //    pickerYear,
    //    pickerMonth,
    //    showPicker: true,
    // });
  },
  pickerChange(e) {
    const val = e.detail.value;
    chooseYear = this.data.pickerYear[val[0]];
    chooseMonth = this.data.pickerMonth[val[1]];
  },
  tapPickerBtn(e) {
    const type = e.currentTarget.dataset.type;
    const o = {
      showPicker: false,
    };
    if (type === 'confirm') {
      o.curYear = chooseYear;
      o.curMonth = chooseMonth;
      this.calculateEmptyGrids(chooseYear, chooseMonth);
      this.calculateDays(chooseYear, chooseMonth);
    }

    this.setData(o);
  },
  onShareAppMessage() {
    return {
      title: '小程序日历',
      desc: '还是新鲜的日历哟',
      path: 'pages/index/index'
    };
  }
};

Page(conf);

// Page({

//   /**
//    * 页面的初始数据
//    */
//   data: {
//     arr: [],
//     sysW: null,
//     lastDay: null,
//     firstDay: null,
//     weekArr: ['日', '一', '二', '三', '四', '五', '六'],
//     year: null
//   },
//   //获取日历相关参数
//   dataTime: function() {
//     var date = new Date();
//     var year = date.getFullYear();
//     var month = date.getMonth();
//     var months = date.getMonth() + 1;

//     //获取现今年份
//     this.data.year = year;

//     //获取现今月份
//     this.data.month = months;

//     //获取今日日期
//     this.data.getDate = date.getDate();

//     //最后一天是几号
//     var d = new Date(year, months, 0);
//     this.data.lastDay = d.getDate();

//     //第一天星期几
//     let firstDay = new Date(year, month, 1);
//     this.data.firstDay = firstDay.getDay();
//   },

//   /**
//    * 生命周期函数--监听页面加载
//    */
//   onLoad: function(options) {
//     this.dataTime();

//     //根据得到今月的最后一天日期遍历 得到所有日期
//     for (var i = 1; i < this.data.lastDay + 1; i++) {
//       this.data.arr.push(i);
//     }
//     var res = wx.getSystemInfoSync();
//     this.setData({
//       //更具屏幕宽度变化自动设置宽度
//       sysW: res.windowHeight / 12, 
//       marLet: this.data.firstDay,
//       arr: this.data.arr,
//       year: this.data.year,
//       getDate: this.data.getDate,
//       month: this.data.month
//     });

//   },

//   /**
//    * 生命周期函数--监听页面初次渲染完成
//    */
//   onReady: function() {

//   },

//   /**
//    * 生命周期函数--监听页面显示
//    */
//   onShow: function() {

//   },

//   /**
//    * 生命周期函数--监听页面隐藏
//    */
//   onHide: function() {

//   },

//   /**
//    * 生命周期函数--监听页面卸载
//    */
//   onUnload: function() {

//   },

//   /**
//    * 页面相关事件处理函数--监听用户下拉动作
//    */
//   onPullDownRefresh: function() {

//   },

//   /**
//    * 页面上拉触底事件的处理函数
//    */
//   onReachBottom: function() {

//   },

//   /**
//    * 用户点击右上角分享
//    */
//   onShareAppMessage: function() {

//   }
// })