微信小程序实现自定义日历功能

server/2025/1/23 22:10:55/

文章目录

    • 1. 创建日历组件实现步骤：
    • 2. 代码实现过程
    • 3. 实现效果图
    • 4. 关于作者其它项目视频教程介绍

1. 创建日历组件实现步骤：

  1. 创建日历组件：首先，你需要创建一个日历组件，包含显示日期的逻辑。
  2. 样式设计：为日历组件设计样式，使其看起来美观。
  3. 事件处理：添加事件处理程序，以便用户可以选择日期。

2. 代码实现过程

  1. 编写calendar.wxml布局
<!-- calendar.wxml -->
<navigation-bar title="日历控件" back="{{false}}" color="#FFFFFF" background="#e6142c"></navigation-bar><!-- 日历部分 --><view class="calendar"><!-- 日历头部 --><view class="calendar-header"><view class="arrow" bindtap="prevMonth">〈</view><view class="date-title">{{year}}年{{month}}月</view><view class="arrow" bindtap="nextMonth">〉</view></view><!-- 星期标题 --><view class="weekday-row"><view class="weekday" wx:for="{{weekdays}}" wx:key="*this">{{item}}</view></view><!-- 日期格子 --><view class="date-rows"><view class="date-row" wx:for="{{dateList}}" wx:for-item="row" wx:key="index"><view class="date-cell {{item.currentMonth ? '' : 'other-month'}} {{item.isToday ? 'today' : ''}} {{item.selected ? 'selected' : ''}}" wx:for="{{row}}" wx:key="date" bindtap="selectDate" data-date="{{item.date}}">{{item.day}}</view></view></view></view>
  1. 编写calendar.wxss样式
/* calendar.wxss */
page {height: 100vh;display: flex;flex-direction: column;background-color: #f5f5f5;
}.calendar {background: #f5f5f5;border-radius: 10rpx;padding: 20rpx;
}.calendar-header {display: flex;align-items: center;justify-content: space-between;padding: 20rpx 0;
}.date-title {font-size: 32rpx;font-weight: bold;
}.arrow {padding: 10rpx 20rpx;color: #666;
}.weekday-row {display: flex;border-bottom: 1rpx solid #eee;padding-bottom: 10rpx;margin-bottom: 10rpx;
}.weekday {flex: 1;text-align: center;font-size: 28rpx;color: #666;
}.date-rows {display: flex;flex-direction: column;
}.date-row {display: flex;margin: 5rpx 0;
}.date-cell {flex: 1;text-align: center;padding: 15rpx 0;font-size: 28rpx;position: relative;height: 65rpx;line-height: 65rpx;margin: 5rpx;
}.selected {background: #e6142c;color: #fff !important;/* 确保选中时文字颜色为白色 */border-radius: 50%;
}/* 确保今天的样式和选中样式可以共存 */
.today {color: #e6142c;font-weight: bold;
}.today.selected {color: #fff !important;background: #e6142c;
}/* 其他月份日期的样式 */
.other-month {color: #ccc;
}.other-month.selected {background: #1aad19;color: #fff !important;
}
  1. 编写calendar.js具体逻辑实现
// calendar.js
Page({data: {year: 2024,month: 1,day: 1,weekdays: ['日', '一', '二', '三', '四', '五', '六'],dateList: [],selectedDate: null,dateStr: '',},onLoad() {// 初始化当前日期const now = new Date()this.setData({year: now.getFullYear(),month: now.getMonth() + 1,selectedDate: now // 设置当前日期为选中状态}, () => {this.generateDateList()})wx.showToast({title: this.data.selectedDate.toLocaleDateString(),icon:"none"})},// 生成日历数据generateDateList() {const {year,month} = this.dataconst dateList = []// 获取当月第一天和最后一天const firstDay = new Date(year, month - 1, 1)const lastDay = new Date(year, month, 0)// 获取当月第一天是星期几const firstDayWeek = firstDay.getDay()// 获取上个月的最后几天const prevMonthLastDay = new Date(year, month - 1, 0).getDate()// 当前日期const today = new Date()const currentDateStr = today.toDateString()// 填充上个月的日期let row = []for (let i = 0; i < firstDayWeek; i++) {const day = prevMonthLastDay - firstDayWeek + i + 1const date = new Date(year, month - 2, day)row.push({day,date: date,currentMonth: false,isToday: date.toDateString() === currentDateStr,selected: this.data.selectedDate && date.toDateString() === this.data.selectedDate.toDateString()})}// 填充当月日期for (let day = 1; day <= lastDay.getDate(); day++) {const date = new Date(year, month - 1, day)row.push({day,date: date,currentMonth: true,isToday: date.toDateString() === currentDateStr,selected: this.data.selectedDate && date.toDateString() === this.data.selectedDate.toDateString()})if (row.length === 7) {dateList.push(row)row = []}}// 填充下个月的日期let nextMonthDay = 1while (row.length < 7) {const date = new Date(year, month, nextMonthDay)row.push({day: nextMonthDay++,date: date,currentMonth: false,isToday: date.toDateString() === currentDateStr,selected: this.data.selectedDate && date.toDateString() === this.data.selectedDate.toDateString()})}dateList.push(row)this.setData({dateList})},// 选择日期selectDate(e) {const selectedDate = new Date(e.currentTarget.dataset.date)this.setData({selectedDate: selectedDate}, () => {this.generateDateList()//格式化日期const date = new Date(selectedDate.toLocaleDateString())wx.showToast({title: selectedDate.toLocaleDateString(),icon:"none"})})},// 生成日历数据generateDateList() {const {year,month} = this.dataconst dateList = []// 获取当月第一天和最后一天const firstDay = new Date(year, month - 1, 1)const lastDay = new Date(year, month, 0)// 获取当月第一天是星期几const firstDayWeek = firstDay.getDay()// 获取上个月的最后几天const prevMonthLastDay = new Date(year, month - 1, 0).getDate()// 当前日期const today = new Date()const currentDateStr = today.toDateString()// 选中的日期字符串（用于比较）const selectedDateStr = this.data.selectedDate ? this.data.selectedDate.toDateString() : ''// 填充上个月的日期let row = []for (let i = 0; i < firstDayWeek; i++) {const day = prevMonthLastDay - firstDayWeek + i + 1const date = new Date(year, month - 2, day)const dateStr = date.toDateString()row.push({day,date: dateStr,currentMonth: false,isToday: dateStr === currentDateStr,selected: selectedDateStr && dateStr === selectedDateStr})}// 填充当月日期for (let day = 1; day <= lastDay.getDate(); day++) {const date = new Date(year, month - 1, day)const dateStr = date.toDateString()row.push({day,date: dateStr,currentMonth: true,isToday: dateStr === currentDateStr,selected: selectedDateStr && dateStr === selectedDateStr})if (row.length === 7) {dateList.push(row)row = []}}// 填充下个月的日期let nextMonthDay = 1while (row.length < 7) {const date = new Date(year, month, nextMonthDay)const dateStr = date.toDateString()row.push({day: nextMonthDay++,date: dateStr,currentMonth: false,isToday: dateStr === currentDateStr,selected: selectedDateStr && dateStr === selectedDateStr})}if (row.length > 0) {dateList.push(row)}this.setData({dateList})},// 上个月prevMonth() {let {year,month} = this.dataif (month === 1) {year--month = 12} else {month--}this.setData({year,month}, () => {this.generateDateList()})},// 下个月nextMonth() {let {year,month} = this.dataif (month === 12) {year++month = 1} else {month++}this.setData({year,month}, () => {this.generateDateList()})}});

3. 实现效果图

在这里插入图片描述

4. 关于作者其它项目视频教程介绍

  1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
  2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
  3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
  4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  6. 为什么要封装BaseActivity?: https://www.bilibili.com/video/BV11S411A7R5/?vd_source=984bb03f768809c7d33f20179343d8c8
  7. 为什么要封装BaseFragment?：https://www.bilibili.com/video/BV1Um421G7yC/?vd_source=984bb03f768809c7d33f20179343d8c8

http://www.ppmy.cn/server/160866.html

相关文章

54.DataGrid数据框图 C#例子 WPF例子

54.DataGrid数据框图 C#例子 WPF例子

首先是绑定一个属性&#xff0c;属性名称无所谓。到时候看属性设置的啥&#xff0c;可能要改。 <DataGrid ItemsSource"{Binding Index_instance}"/> 然后创建INotifyPropertyChanged的类&#xff0c;并把相关固定的代码粘贴上去。 然后把这个目录类建好&am…
阅读更多...
2K200Hz显示器哪个值得选？

2K200Hz显示器哪个值得选？

眼花缭乱的显示器市场&#xff0c;究竟在2K200Hz显示器这个领域&#xff0c;哪个品牌的哪个型号值得选呢&#xff1f;今天就来给大家讲讲。 1.HKC G27H2Pro - 2K200Hz显示器哪个值得选 外观设计 - HKC G27H2Pro 2K200Hz显示器 整体风格&#xff1a;G27H2Pro 的外观充满电竞风…
阅读更多...
【Tortoise-ORM】 高级特性与实战

【Tortoise-ORM】 高级特性与实战

文章目录 6. 迁移与数据库管理使用 Tortoise-ORM 与 aerich 进行数据库迁移管理安装 aerich配置 aerich创建和应用数据库迁移1. 创建迁移2. 查看迁移历史3. 应用迁移4. 回滚迁移 迁移常见问题 7. 事务管理使用 Tortoise 提供的事务管理1. 开始事务&#xff1a;2. 提交事务&…
阅读更多...
react中hooks之useDebugValue用法总结

react中hooks之useDebugValue用法总结

1. 基本概念 useDebugValue 是一个 React Hook&#xff0c;用于在 React DevTools 中为自定义 Hook 添加标签。它可以帮助我们在开发过程中更好地调试和理解自定义 Hook 的状态。 1.1 基本语法 useDebugValue(value, formatFn?)value: 要在 DevTools 中显示的值formatFn: (…
阅读更多...
openssl 生成证书 windows导入证书

openssl 生成证书 windows导入证书

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…
阅读更多...
基于微信小程序的模拟考试系统设计与实现（LW+源码+讲解）

基于微信小程序的模拟考试系统设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…
阅读更多...
Vue2：el-tree用scope slot为每一个节点添加一个鼠标悬浮时出现的右对齐的按钮

Vue2：el-tree用scope slot为每一个节点添加一个鼠标悬浮时出现的右对齐的按钮

el-tree中，每一个节点后面添加一个按钮，响应除节点点击事件之外的操作，要求： 1、按钮在鼠标悬浮在该节点之上时才出现 2、按钮右对齐 实现如下。 1、为每个节点添加按钮 从官网说明来看，有两种方式添加按钮，render-content和 scoped slot，我使用的是scoped slot方式…
阅读更多...
Django学习笔记(安装和环境配置)-01

Django学习笔记(安装和环境配置)-01

Django学习笔记(安装和环境配置)-01 一、创建python环境 1、可以通过安装Anaconda来创建一个python环境 # 创建一个虚拟python环境 conda create -n django python3.8 # 切换激活到创建的环境中 activate django2、安装django # 进入虚拟环境中安装django框架 pip install …
阅读更多...
最新文章

Copyright @ 2022~2023