最近項目中使用到了日歷，在網上找了一些參考，自己改改,先看效果圖

?

?

wxml

<view class="date"><image class="direction" src="/images/icon/left.png" bindtap='minusMouth'/><label>{{year}}年{{mouth}}月</label><image class="direction" src="/images/icon/right.png" bindtap='plusMouth' /> </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 }}"><view class="days-item" data-date='{{year}}-{{mouth}}-{{item}}' bindtap='selDate'><view class="days-item-text" wx:if="{{item>0}}">{{item}}</view></view></block><block wx:else><view class="days-item days-item-selected" data-date='{{year}}-{{mouth}}-{{item}}' bindtap='selDate'><view class="days-item-text" wx:if="{{item>0}}">{{item}}</view></view></block></block> </view>

wxss

.date {display: flex;flex-direction: row;justify-content: center;line-height: 3em;align-items: center; }.direction {width: 40rpx;margin: 15rpx;height: 40rpx; }.header {display: flex;flex-direction: row;background: #5DD79C;color: #fff }.weeks-item-text {width: 100%;line-height: 2em;font-size: 40rpx;text-align: center;border-left: 1px solid #ececec;}.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: 60rpx;padding: 26rpx;font-size: 26rpx;/* border-radius: 50%; */border: 1rpx solid #ececec;/* margin-top: 34rpx;margin-bottom: 34rpx; */color: #000; } /* 選中狀態 */ .days-item-selected{background: #5DD79C }

?

js

Page({/*** 頁面的初始數據*/data: {date: [],weeks: ['日', '一', '二', '三', '四', '五', '六'],days: [],year: 0,mouth: 0,nowDate:''},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {let that = thisthat.dateData();var myDate = new Date();//獲取系統當前時間var nowDate = myDate.getDate();that.setData({nowDate:nowDate})console.log(nowDate)},// 點擊日期事件selDate:function(e){let that = this// 日期 年月日var seldate = e.currentTarget.dataset.date// 天var selday = e.currentTarget.dataset.dayconsole.log(seldate)that.setData({nowDate: selday})},//用戶點擊減少月份minusMouth: function () {var mouth;var year;mouth = this.data.mouthyear = this.data.yearmouth--if (mouth < 1) {mouth = 12year--}this.updateDays(year, mouth)},//用戶點擊增加月份plusMouth: function () {var mouth;var year;mouth = this.data.mouthyear = this.data.yearmouth if (mouth > 12) {mouth = 1year }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 (let index = 1; index <= dateDay; index ) {days.push(index)}//向數組中添加，一號之前應該空出的空格for (let index = 1; index <= dateWeek; index ) {days.unshift(0)}this.setData({days: days,year: year,mouth: mouth,})} })

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的微信小程序日历课表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。