微信小程序--创建一个日历组件

微信小程序–创建一个日历组件

可以创建一个日历组件，来展示当前月份的日期，并支持切换月份的功能。

一、目录结构

/pages/calendarcalendar.wxmlcalendar.scsscalendar.jscalendar.json

二、`calendar.wxml`

  <view class="calendar"><view class="header"><view bindtap="changeMonth" data-direction="prev"><van-icon name="arrow-left" /></view><text>{{year}}年{{month}}月</text><van-icon name="arrow" bindtap="changeMonth" data-direction="next" /></view><view class="days"><view class="week"><text>日</text><text>一</text><text>二</text><text>三</text><text>四</text><text>五</text><text>六</text></view><view class="dates"><block wx:for="{{days}}" wx:key="index"><view class="date">{{item}}</view></block></view></view></view>

三、`calendar.scss`

.calendar {width: 100%;border-radius: 15rpx;background-color: #fff;padding: 20rpx;
}.header {width: 100%;display: flex;justify-content: space-between;align-items: center;font-size:32rpx;
}.days {margin-top: 20px;
}.week {display: grid;grid-template-columns: repeat(7, 1fr);gap: 5px;text-align: center;margin-bottom: 20px;
}.dates {display: grid;grid-template-columns: repeat(7, 1fr);gap: 10px 5px;
}.date {width: 100%;height: 60px;text-align: center;padding: 10px;background-color: #f0f0f0;color: #000;
}

四、`calendar.js`

Page({data: {year: new Date().getFullYear(),month: new Date().getMonth() + 1,days: [],},onLoad() {this.loadCalendar();},loadCalendar() {const { year, month } = this.data;// 获取当月的第一天是星期几const firstDay = new Date(year, month - 1, 1).getDay();// 获取当月的天数const totalDays = new Date(year, month, 0).getDate();// 创建日期数组const days = [];// 填充空白日期for (let i = 0; i < firstDay; i++) {days.push('');}// 填充实际日期for (let i = 1; i <= totalDays; i++) {days.push(i);}this.setData({ days });},changeMonth(event) {const direction = event.currentTarget.dataset.direction;let { year, month } = this.data;if (direction === 'prev') {month--;if (month < 1) {month = 12;year--;}} else if (direction === 'next') {month++;if (month > 12) {month = 1;year++;}}this.setData({ year, month }, () => {this.loadCalendar();});}
});

五、效果图（样式可以按需更改）

在这里插入图片描述

六、`padStart`

padStart(2, '0') 是 JavaScript 字符串的方法，用于填充字符串的开头直到指定的长度。

使用了 padStart(2, '0') 来确保日期和月份都是两位数格式。

str.padStart(targetLength, padString);

targetLength 是目标字符串的最终长度。
padString 是用于填充的字符串（如果字符串长度不够，使用这个字符串填充，直到目标长度为止）。

在 padStart(2, '0') 中，意思是如果原字符串的长度小于 2，则用 '0' 在字符串的开头进行填充，直到字符串的长度为 2。

案列：

'5'.padStart(2, '0');  // '05'
'12'.padStart(2, '0'); // '12'
'123'.padStart(5, '0'); // '00123'

七、实现高亮当前日期，给日期添加点击事件，并高亮显示

calendar.wxml

   <view class="dates"><block wx:for="{{days}}" wx:key="index"><view class="date {{item.isToday ? 'highlight-today' : ''}} {{isChooseDate==item.day ? 'choose-day' : ''}}" bindtap="showEventDetail" data-day="{{item}}">{{item.day}}</view></block></view>

calendar.js

 loadCalendar() {const {year,month} = this.data;// 获取当月的第一天是星期几const firstDay = new Date(year, month - 1, 1).getDay();// 获取当月的天数const totalDays = new Date(year, month, 0).getDate();// 获取今天的日期（用于高亮显示）const today = new Date();const todayDate = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;// 创建日期数组const days = [];// 填充空白日期for (let i = 0; i < firstDay; i++) {days.push('');}// 填充实际日期for (let i = 1; i <= totalDays; i++) {const day = `${year}-${month.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;const isToday = day === todayDate;  // 如果是今天的日期，则标记为今天days.push({ day: i,isToday });}this.setData({days,selectedDate:this.data.selectedDate?this.data.selectedDate:todayDate});},changeMonth(event) {const direction = event.currentTarget.dataset.direction;let {year,month} = this.data;if (direction === 'prev') {month--;if (month < 1) {month = 12;year--;}} else if (direction === 'next') {month++;if (month > 12) {month = 1;year++;}}this.setData({year,month,isChooseDate:''}, () => {this.loadCalendar();});},// 显示事件详情showEventDetail(event) {const day = event.currentTarget.dataset.day.day;const selectedDate = `${this.data.year}-${this.data.month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;this.setData({isChooseDate:day,selectedDate:selectedDate})},

calendar.scss

  .choose-day{border:1px solid  #65b778;color: #65b778;font-weight: bold;background-color: #fff;}.highlight-today{background-color: #65b778;color: #fff;font-weight: bold;}

效果图

在这里插入图片描述

八、滑动切换日历月份

calendar.html

<view class="calendar"  bindtouchstart="touchStart"   bindtouchend="touchEnd"></view>

calendar.js

  data: {startX: 0, // 触摸起始位置startY: 0, // 触摸起始位置minSwipeDistance: 50 // 设置最小滑动距离，单位：px},// 触摸开始事件touchStart(e) {this.setData({startX: e.touches[0].clientX,startY: e.touches[0].clientY});},// 触摸结束事件touchEnd(e) {const endX = e.changedTouches[0].clientX;const endY = e.changedTouches[0].clientY;const dx = endX - this.data.startX; // 水平滑动距离const dy = endY - this.data.startY; // 垂直滑动距离// 判断是否为左右滑动（忽略上下滑动）if (Math.abs(dx) > Math.abs(dy)) {if (Math.abs(dx) >= this.data.minSwipeDistance) { // 只有当滑动距离超过阈值时才切换,防止误触if (dx > 0) {// 向右滑动，切换到上个月this.changeMonthBySwipe('prev');} else if (dx < 0) {// 向左滑动，切换到下个月this.changeMonthBySwipe('next');}}}},// 根据滑动方向切换月份changeMonthBySwipe(direction) {let {year,month} = this.data;if (direction === 'prev') {month--;if (month < 1) {month = 12;year--;}} else if (direction === 'next') {month++;if (month > 12) {month = 1;year++;}}this.setData({year,month,isChooseDate: ''}, () => {this.loadCalendar();});},