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

文章目录

    • 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.data
    const 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 + 1
      const 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 = 1
    while (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.data
    const 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 + 1
      const 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 = 1
    while (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.data
    if (month === 1) {
      year--
      month = 12
    } else {
      month--
    }
    this.setData({
      year,
      month
    }, () => {
      this.generateDateList()
    })
  },

  // 下个月
  nextMonth() {
    let {
      year,
      month
    } = this.data
    if (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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/957760.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

YOLOv9改进，YOLOv9检测头融合RFAConv卷积，适合目标检测、分割任务

YOLOv9改进，YOLOv9检测头融合RFAConv卷积，适合目标检测、分割任务

摘要 空间注意力已广泛应用于提升卷积神经网络（CNN）的性能，但它存在一定的局限性。作者提出了一个新的视角，认为空间注意力机制本质上解决了卷积核参数共享的问题。然而，空间注意力生成的注意力图信息对于大尺寸卷积核来说是不足够的。因此，提出了一种新型的注意力机制—…
阅读更多...
【机器学习】深入无监督学习分裂型层次聚类的原理、算法结构与数学基础全方位解读，深度揭示其如何在数据空间中构建层次化聚类结构

【机器学习】深入无监督学习分裂型层次聚类的原理、算法结构与数学基础全方位解读，深度揭示其如何在数据空间中构建层次化聚类结构

&#x1f31f;个人主页&#xff1a;落叶 &#x1f31f;当前专栏: 机器学习专栏 目录 引言 分裂型层次聚类&#xff08;Divisive Hierarchical Clustering&#xff09; 1. 基本原理 2. 分裂型层次聚类的算法步骤 Step 1: 初始化 Step 2: 选择分裂的簇 Step 3: 执行分裂操作…
阅读更多...
VirtualBox can‘t enable the AMD-V extension

VirtualBox can‘t enable the AMD-V extension

个人博客地址&#xff1a;VirtualBox cant enable the AMD-V extension | 一张假钞的真实世界 最近一次完成Deepin的系统更新后&#xff0c;进入VirtualBox创建的虚拟机&#xff08;Widows10&#xff09;时&#xff0c;出现以下错误&#xff1a; 根据网址“https://askubuntu.…
阅读更多...
[JavaScript] 数组与对象详解

[JavaScript] 数组与对象详解

文章目录 数组&#xff08;Array&#xff09;什么是数组数组的常用操作**访问数组元素****修改数组元素****数组的长度****添加和删除元素** 常用数组方法map():filter():reduce():**其他实用方法** 对象&#xff08;Object&#xff09;什么是对象对象的基本操作**访问属性****…
阅读更多...
“模板”格式化发布新创诗（为《诗意 2 0 2 5》贡献力量）

“模板”格式化发布新创诗（为《诗意 2 0 2 5》贡献力量）

预置MarkDown&Html文本&#xff0c;脚本读取f-string模板完成录入嵌套。 (笔记模板由python脚本于2025-01-22 19:19:58创建&#xff0c;本篇笔记适合喜欢分享的达人的coder翻阅) 【学习的细节是欢悦的历程】 博客的核心价值&#xff1a;在于输出思考与经验&#xff0c;而不…
阅读更多...
论文速读|Multi-Modal Disordered Representation Learning Network for TBPS.AAAI24

论文速读|Multi-Modal Disordered Representation Learning Network for TBPS.AAAI24

论文地址&#xff1a;Multi-Modal Disordered Representation Learning Network for Description-Based Person Search 代码地址&#xff1a;未开源&#xff08;2025.01.22&#xff09; bib引用&#xff1a; inproceedings{yang2024multi,title{Multi-Modal Disordered Repres…
阅读更多...
计算机视觉算法实战——实体物体跟踪

计算机视觉算法实战——实体物体跟踪

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ ​​​​​​​ ​ 1. 领域介绍✨✨ 实体物体跟踪&#xff08;Object Tracking&#xff09;是计算机视觉领域中的一个重要研究方向&#x…
阅读更多...
C++17 新特性深入解析：constexpr 扩展、if constexpr 和 constexpr lambda

C++17 新特性深入解析：constexpr 扩展、if constexpr 和 constexpr lambda

C17 不仅增强了现有特性&#xff0c;还引入了一些全新的编程工具&#xff0c;极大地提升了代码的效率和表达力。在这篇文章中&#xff0c;我们将深入探讨 C17 中与 constexpr 相关的三个重要特性&#xff1a;constexpr 的扩展用法、if constexpr 和 constexpr lambda。这些特性…
阅读更多...
IVR：交互式语音应答系统解析及其应用

IVR：交互式语音应答系统解析及其应用

引言 IVR&#xff08;Interactive Voice Response&#xff09;&#xff0c;即交互式语音应答系统&#xff0c;是一种功能强大的电话自动服务系统。它通过语音识别和按键反馈&#xff0c;使用户与系统之间实现实时交互&#xff0c;为用户提供自助服务、咨询、报告、投诉等多种功…
阅读更多...
Observability：最大化可观察性 AI 助手体验的 5 大提示（prompts）

Observability：最大化可观察性 AI 助手体验的 5 大提示（prompts）

作者&#xff1a;来自 Elastic Zoia_AUBRY 在过去三年担任客户工程师期间&#xff0c;我遇到了数百名客户&#xff0c;他们最常问的问题之一是&#xff1a;“我的数据在 Elastic 中&#xff1b;我该如何利用它获得最大优势&#xff1f;”。 如果这适用于你&#xff0c;那么本…
阅读更多...
【Vim Masterclass 笔记25】S10L45：Vim 多窗口的常用操作方法及相关注意事项

【Vim Masterclass 笔记25】S10L45：Vim 多窗口的常用操作方法及相关注意事项

文章目录 S10L45 Working with Multiple Windows1 水平分割窗口2 在水平分割的新窗口中显示其它文件内容3 垂直分割窗口4 窗口的关闭5 在同一窗口水平拆分出多个窗口6 关闭其余窗口7 让四个文件呈田字形排列8 光标在多窗口中的定位9 调节子窗口的尺寸大小10 变换子窗口的位置11…
阅读更多...
STM32_SD卡的SDIO通信_基础读写

STM32_SD卡的SDIO通信_基础读写

本篇将使用CubeMXKeil, 创建一个SD卡读写的工程。 目录 一、SD卡要点速读 二、SDIO要点速读 三、SD卡座接线原理图 四、CubeMX新建工程 五、CubeMX 生成 SD卡的SDIO通信部分 六、Keil 编辑工程代码 七、实验效果 一、SD卡 速读 SD卡&#xff0c;全称Secure Digital M…
阅读更多...
大模型GUI系列论文阅读 DAY2续：《一个具备规划、长上下文理解和程序合成能力的真实世界Web代理》

大模型GUI系列论文阅读 DAY2续：《一个具备规划、长上下文理解和程序合成能力的真实世界Web代理》

摘要 预训练的大语言模型&#xff08;LLMs&#xff09;近年来在自主网页自动化方面实现了更好的泛化能力和样本效率。然而&#xff0c;在真实世界的网站上&#xff0c;其性能仍然受到以下问题的影响&#xff1a;(1) 开放领域的复杂性&#xff0c;(2) 有限的上下文长度&#xff…
阅读更多...
【ESP32】ESP32连接JY61P并通过WIFI发送给电脑

【ESP32】ESP32连接JY61P并通过WIFI发送给电脑

前言 手头上有个ESP32&#xff0c;发现有wifi功能&#xff0c;希望连接JY61P并通过WIFI把姿态数据发送给电脑 1.采用Arduino IDE编译器&#xff1b;需要安装ESP32的开发板管理器&#xff1b; 2.电脑接受数据是基于python的&#xff1b; 1. ESP32 连接手机WIFI #include <…
阅读更多...
C语言程序设计十大排序—冒泡排序

C语言程序设计十大排序—冒泡排序

文章目录 1.概念✅2.冒泡排序&#x1f388;3.代码实现✅3.1 直接写✨3.2 函数✨ 4.总结✅ 1.概念✅ 排序是数据处理的基本操作之一&#xff0c;每次算法竞赛都很多题目用到排序。排序算法是计算机科学中基础且常用的算法&#xff0c;排序后的数据更易于处理和查找。在计算机发展…
阅读更多...
【Elasticsearch】腾讯云安装Elasticsearch

【Elasticsearch】腾讯云安装Elasticsearch

Elasticsearch 认识Elasticsearch安装Elasticsearch安装Kibana安装IK分词器分词器的作用是什么&#xff1f;IK分词器有几种模式&#xff1f;IK分词器如何拓展词条&#xff1f;如何停用词条&#xff1f; 认识Elasticsearch Elasticsearch的官方网站如下 Elasticsearch官网 Ela…
阅读更多...
Django学习笔记(安装和环境配置)-01

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

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

python创建一个httpServer网页上传文件到httpServer

一、代码 1.server.py import os from http.server import SimpleHTTPRequestHandler, HTTPServer import cgi # 自定义请求处理类 class MyRequestHandler(SimpleHTTPRequestHandler):# 处理GET请求def do_GET(self):if self.path /:# 响应200状态码self.send_response(2…
阅读更多...
一个软件分发和下载的网站源码，带多套模板

一个软件分发和下载的网站源码，带多套模板

PHP游戏应用市场APP软件下载平台网站源码手机版 可自行打包APP&#xff0c;带下载统计&#xff0c;带多套模板&#xff0c;带图文教程 代码下载&#xff1a;百度网盘
阅读更多...
前端面试题-问答篇-5万字！

前端面试题-问答篇-5万字！

1. 请描述CSS中的层叠&#xff08;Cascade&#xff09;和继承&#xff08;Inheritance&#xff09;规则&#xff0c;以及它们在实际开发中的应用。 在CSS中&#xff0c;层叠&#xff08;Cascade&#xff09;和继承&#xff08;Inheritance&#xff09;是两个关键的规则&#x…
阅读更多...
最新文章

Copyright @ 2022~2023