uni-app 手写日历组件 (需求看自己)

已于 2022-03-15 12:06:35 修改
阅读量483 收藏 1
点赞数
文章标签： html css javascript vue
于 2022-03-15 12:05:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62806861/article/details/123498779
版权

最终效果实现 :

页面视图实现(html) :

接收的父组件信息 :

 响应式数据和方法 : 

 

m0_62806861
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
calendarWeek:微信小程序可滑动周日历组件 1、可左右滑动到下一周和上一周； 2、顶部年月可选择指定日期；
05-25
calendarWeek 微信小程序可滑动周日历组件 1、可左右滑动到下一周和上一周； 2、顶部年月可选择指定日期；
微信小程序uniapp日历组件
08-10
微信小程序uniapp日历组件
uniapp-日历控件
qq_44161703的博客
07-11 2396
chooseDay：已经选中（有标识）的日期 格式：chooseDay：['2023-02-02'] 样式也可以自己定义。actDay：鼠标点击的日期有选中的样式（可以自定义） 这个里面是 只能选中一个日期。onDayClick：有回调函数（e）e.data 就是选中的日期。第五步：修改源码中的选中和标识的样式（找到相应的位置）第二步：导入相应的项目，会有相应的提示（路径）第三步：引入对应的位置-例如我引入的位置。第一步：打开uniapp的插件市场。第四步：上面的名称解释下。
vue3+uniapp手写日历组件
最新发布
Zxl_sir的博客
04-07 1195
为了满足产品需求，在日历中可以添加排班信息，点击日期可以获取排班日期详细数据，自定义日历样式，并且支持手动折叠和展开，折叠时只显示当前周的日期，由于现有组件库修改起来比较麻烦，自己就手写了一个日历组件，下面是我代码及思路。一个完整日历组价包括，标题年月，上个月和下个月，内容分为星期标题，'日', '一', '二', '三', '四', '五', '六'，以及对应的日期排列。
uniApp实现公农日历相互转换、公历、农历、阳历、阴历、calendar
05-08 3178
uniApp实现公农日历相互转换、公历、农历、阳历、阴历、calendar
uniapp日历封装（附精选源码32套，涵盖商城团购等）
梦之归途的博客
11-30 1070
IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zipmpvue 仿网易严选mpvue-shop-master.zipmpvue-音乐播放器mpvue-music-master.zipmpvue性能测试与体验miniweibo-master.zipmpvue改造的日历.zipmpvue框架仿滴滴出行didi-master.zipmpVue高仿美团小程序教程mpvue-meituan-master.zipuni APP自动更新并安装.vue。
uniapp日历插件原生（适用各个场景）
qq_34631220的博客
09-09 2584
<template> <!-- 打卡日历页面 --> <view class='all'> <view class="bar"> <!-- 上一个月 --> <view class="previous" @click="handleCalendar(0)"> <button class="barbtn">上一月</button> </view> &l...
uni-app-日历组件
08-12
uni-app-日历组件
uniapp日历插件
qingdi1的博客
04-24 2626
【代码】uniapp日历插件。
uniapp日历组件
qq_43338177的博客
03-24 4572
uniapp日历组件 自己写的日历组件，欢迎指正 <template> <view class="fu-calendar-wrap"> <!-- 日历选择 start --> <view class="fu-calendar-data fu-flex fu-justify-center fu-align-center fu-margin fu-height-72" v-if="changeTitle"> <block v-
uniapp手写一个日历
weixin_46174785的博客
03-23 2067
效果演示： 功能实现思路 <template> <view class="calendar-wrapper"> <view class="header" v-if="headerBar"> <view class="preWidth" @click="changeMonth('pre')"> <view class="pre" ></view> </view>
uniapp日历组件代码（样式有做修改，去掉农历）
02-18
uniapp日历组件代码（样式有做修改，去掉农历）
uni-app 插件 Calendar 日历多选 （不是范围选择）
08-25
uni-app 插件 Calendar 日历多选 （不是范围选择）
Uniapp日期时间选择插件支持更多选择方式日期范围日期时间范围
08-10
Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围）
很好用的uni-app节点树组件！
06-23
很好用的uni-app节点树组件！
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uniapp zjy-calendar日历，uni-calendar日历增强版
y393016244的博客
07-10 2935
zjy-calendar日历是对uniapp uni-calendar日历的增强，支持圆点和文字自定义颜色。
uni-app 手写日历组件
06-01
下面是一个简单的Uni-app手写日历组件的实现步骤： 1. 创建一个日历组件，可以使用uni-calendar或者自己手写一个日历组件。 2. 在data中定义一个calendarData对象，用于存储日历相关的数据，比如当前年月、当前月有多少天等。 ``` data() { return { calendarData: { year: 2021, month: 9, days: [] } } } ``` 3. 在created生命周期中，初始化日历数据。 ``` created() { this.initCalendarData(); }, methods: { initCalendarData() { const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1; const days = this.getDaysOfMonth(year, month); this.calendarData = { year, month, days }; }, getDaysOfMonth(year, month) { const days = []; const date = new Date(year, month - 1, 1); const weekDay = date.getDay(); const lastMonthDays = this.getDaysOfLastMonth(year, month); const thisMonthDays = this.getDaysOfMonth(year, month); const nextMonthDays = 42 - thisMonthDays - weekDay; for (let i = weekDay - 1; i >= 0; i--) { days.push({ day: lastMonthDays - i, type: 'lastMonth' }); } for (let i = 1; i <= thisMonthDays; i++) { days.push({ day: i, type: 'thisMonth' }); } for (let i = 1; i <= nextMonthDays; i++) { days.push({ day: i, type: 'nextMonth' }); } return days; }, getDaysOfMonth(year, month) { return new Date(year, month, 0).getDate(); }, getDaysOfLastMonth(year, month) { if (month === 1) { year--; month = 12; } else { month--; } return this.getDaysOfMonth(year, month); } } ``` 4. 在日历组件中，使用v-for循环渲染日历。 ``` <template> <view class="calendar"> <view class="calendar-header">{{ calendarData.year }}年{{ calendarData.month }}月</view> <view class="calendar-body"> <view class="calendar-week"> <view class="calendar-day">日</view> <view class="calendar-day">一</view> <view class="calendar-day">二</view> <view class="calendar-day">三</view> <view class="calendar-day">四</view> <view class="calendar-day">五</view> <view class="calendar-day">六</view> </view> <view class="calendar-days"> <view class="calendar-day" v-for="(day, index) in calendarData.days" :key="index"> <view class="day-text" :class="day.type">{{ day.day }}</view> </view> </view> </view> </view> </template> ``` 5. 根据需要，可以为不同日期设置不同的样式。 ``` .day-text { width: 50px; height: 50px; line-height: 50px; text-align: center; } .lastMonth { color: #999; } .thisMonth { color: #333; } .nextMonth { color: #999; } ``` 6. 最后，可以为日历组件添加一些交互事件，比如点击某个日期时，弹出该日期对应的课程安排等。 以上就是一个简单的Uni-app手写日历组件的实现步骤，具体实现可以根据需求进行优化和改进。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值