微信小程序 日历 课表 源码

先附上效果图

这是一个可查当前月和下一月课程表的前端：现附上源码

.wxml

<!-- 月份 -->
<view class="date">
    <view style='width:20rpx;'>
      <text class='white' wx:if="{{flag == 1}}" bindtap='minusMouth'>《</text>
    </view>
    <label class="white font17" style='padding-left:55rpx;padding-right:50rpx;'>{{year}}年{{mouth}}月</label>
    <view style='width:20rpx;'>
       <text class='white' wx:if="{{flag == 0}}" bindtap='plusMouth'>》</text>
    </view>
</view>
<!-- 周 -->
<view class="header">
    <block wx:for="{{weeks}}" wx:key="index">
        <text class="weeks-item-text">{{item}}</text>
    </block>
</view>

<!-- 日 -->
<view class="body-days">
    <!-- 点击本月其他日期 -->
    <block wx:for="{{days}}" wx:key="index">
      <block wx:if="{{item !== nowDate }}"  wx:for-index="index"  wx:for-item='days'>
        <view class="days-item" data-date='{{year}}-{{mouth}}-{{item}}' data-index='{{index}}'  bindtap='selDate'>
            <view class="days-item-text" style="background:{{sts == index ? '#F6747F' : ''}}" wx:if="{{item>0}}">{{item}}</view>
        </view>
      </block>
      <!-- 点击本月当天日期 -->
      <block wx:else>
        <view class="days-item" data-date='{{year}}-{{mouth}}-{{item}}'  data-index='{{index}}' bindtap='selDate'>
            <view class="days-item-text days-item-selected" wx:if="{{item>0}}">{{item}}</view>
        </view>
      </block>
    </block>
</view>

<!-- 课程列表 -->
<scroll-view scrollX="true">
    <view class="fight-list">
        <view class="fight-list-block" wx:for="{{courselist}}" data-id="{{item.id}}" style='background:#3F4663; padding:15rpx;'>
          <navigator url='/byjs_sun/pages/product/courseGoInfo/courseGoInfo?id={{item.id}}'>  
            <image class="fight-list-block-img" src="{{item.img}}"></image>
            <text class='block font15 tc' style='color:#FFB400; letter-spacing:3rpx;'>{{item.title}}</text>
            <text class='block white font13 tc' style='padding-bottom:0rpx;'>{{item.time}}</text>
          </navigator>
        </view>
    </view>
</scroll-view>

 js

var app = getApp();

Page({
    data: {
      tabBarList: [],
      date: [],
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      days: [],
      year: 0,
      mouth: 0,
      nowDate: '',
      sts: -1,
      flag:0,
    },

  /**
   * 生命周期函数--监听页面加载
   */
    onLoad: function(t) {
      var that = this
      that.dateData();
      var myDate = new Date(); //获取系统当前时间
      var nowDate = myDate.getDate();
      that.setData({
        nowDate: nowDate
      })
      console.log(myDate);   //系统当前时间
      console.log(nowDate);  //当前是本月几日

      // 课表数据
      var courselist=[
        {
          id:1,
          img:'../../../resource/images/icon/delet01.png',
          time:'19:00-20:00',
          title:'法国红酒快乐',
        },{
          id: 2,
          img: '../../../resource/images/icon/delet02.jpg',
          time: '19:00-20:00',
          title: '法国红酒快乐',

        },{
          id: 3,
          img: '../../../resource/images/icon/delet01.png',
          time: '19:00-20:00',
          title: '法国红酒快乐',
        },{
          id: 4,
          img: '../../../resource/images/icon/delet02.jpg',
          time: '19:00-20:00',
          title: '法国红酒快乐',
        },{
          id: 5,
          img: '../../../resource/images/icon/delet02.jpg',
          time: '19:00-20:00',
          title: '法国红酒快乐',
        }
      ]
      that.setData({
        courselist: courselist,
      });
      console.log(courselist);

      //底部导航
      this.setData({
            tabBarList: app.globalData.tabbar4
      });
      var a = this;
      app.util.request({
          url: "entry/wxapp/url",
          cachetime: "0",
          success: function(t) {
              wx.setStorageSync("url", t.data), a.setData({
                  url: t.data
              });
          }
      }),
      wx.setNavigationBarColor({
          frontColor: wx.getStorageSync("fontcolor"),
          backgroundColor: wx.getStorageSync("color"),
          animation: {
              duration: 0,
              timingFunc: "easeIn"
          }
      });
    },


  // 点击日期事件
  selDate: function (e) {
    var that = this
    console.log('点击日期：',e.currentTarget.dataset.date);
    var index = e.currentTarget.dataset.index;    //获取下标
    that.setData({
       sts:index,
    });
    console.log('当前点击日期的下标:',index);
    console.log('当月数组：',this.data.days);  //当月数组
  },

  //用户点击增加月份
  plusMouth: function () {
    console.log("点击增加月份");
    var that = this;
    var date = new Date();
    var sysmouth = date.getMonth() + 1;  //系统当前月份
    console.log("系统当前月份：",sysmouth);
    var mouth;
    var year;
    mouth = this.data.mouth + 1
    console.log("点击后的月份：", mouth);
    year = this.data.year
    that.setData({
      flag: mouth - sysmouth
    })
    if (mouth > 12) {
      mouth = 1
      year++
    }
    this.updateDays(year, mouth)
  },

  //用户点击减少月份
  minusMouth: function () {
    console.log("点击减少月份");
    var date = new Date();
    var sysmouth = date.getMonth() + 1;
    console.log("系统当前月份：", sysmouth);
    var that = this;
    var mouth;
    var year;
    mouth = this.data.mouth - 1
    console.log("点击后的月份：", mouth);
    year = this.data.year
    console.log(mouth)

    //当用户已点击到当前月的下一个月才能点击返回当月，此时点击显示 》，隐藏《 
    that.setData({
      flag: mouth - sysmouth
    })
    if (mouth < 1) {
      mouth = 12
      year--
    }
    ;
    this.updateDays(year, mouth)
  },

 
  dateData: function () {
    var date = new Date();
    var days = [];
    var year = date.getFullYear();
    var mouth = date.getMonth() + 1;
    this.updateDays(year, mouth)
  },

  updateDays: function (year, mouth) {
    var days = [];
    var dateDay, dateWeek;

    // 根据日期获取每个月有多少天
    var getDateDay = function (year, mouth) {
      return new Date(year, mouth, 0).getDate();
    }

    //根据日期获取这天是周几
    var getDateWeek = function (year, mouth) {
      return new Date(year, mouth - 1, 1).getDay();
    }

    dateDay = getDateDay(year, mouth)
    dateWeek = getDateWeek(year, mouth)

    console.log('当前月份总天数：',dateDay);
    // console.log('当前月份总周数：',dateWeek);

    //向数组中添加天 
    for (var index = 1; index <= dateDay; index++) {
      days.push(index)
    }
    //向数组中添加，一号之前应该空出的空格
    for (var index = 1; index <= dateWeek; index++) {
      days.unshift(0)
    }
    this.setData({
      days: days,
      year: year,
      mouth: mouth,
      yue:mouth,
    })
    console.log('当前月份日期：',days);
  },

});

wxss

page {
    background: #313751;
}
.date {
    display: flex;
    flex-direction: row;
    justify-content: center;
    line-height: 4em;
    align-items: center;
}

.direction {
    width: 40rpx;
    margin: 15rpx;
    height: 40rpx;
}

.header {
    display: flex;
    flex-direction: row;
    color: #fff
}

.weeks-item-text {
    width: 100%;
    font-size: 34rpx;
    text-align: center;  
}

.body-days {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}

.days-item {
    width: 14.285%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.days-item-text {
    width: 20rpx;
    padding-top: 10rpx;
    padding-bottom:10rpx;
    margin-top: 15rpx;
    padding-left:20rpx;
    padding-right:30rpx;
    margin-left: 15rpx;
    border-radius: 5rpx;
    font-size: 26rpx; 
    color: #fff;
    text-align: center;
}
/* 选中状态 */
.days-item-selected{
  background: #FDC500;
}

/* 课程样式 */
.fight-list {
    padding-left: 20rpx;
    display: flex;
    margin-top: 35rpx;
}

.fight-list-block {
    width: 320rpx;
    /* height: 400rpx; */
    margin-right: 30rpx;

}

.fight-list-block-img {
    width:320rpx;
    height: 330rpx;
    max-width: 320rpx;
}

.fight-list-block-title {
    height: 62rpx;
    line-height: 62rpx;
    font-size: 28rpx;
    background: #3F4663;
    color: #fff;
}