uni-calendar日历组件更改标点颜色和位置及多个标点显示

这篇具有很好参考价值的文章主要介绍了uni-calendar日历组件更改标点颜色和位置及多个标点显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-calendar的日历组件显示的标点只能显示一种颜色,并且标点的位置在右上角.而我们在项目中需要实现多种颜色标点的显示,并且标点要显示在日期的正下方.

改之后的效果图:

uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档

实现以上的效果我们需要对uni-calendar组件的源码进行修改就可以了,想让这个日历组件实现不同颜色的标点我这里有两种方法可以实现.

第一种:

首先我们先找到uni-calendar-item.vue 文件

uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档

这里是我们传给日历组件的info标点值.

uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档

weeks.extraInfo.info 就是我们传给日历组件的标点值.

uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档
第二种:
uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档
uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档

日历组件显示多个标点:

uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档

我们只需要给日历组件的状态传一个数组即可

uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档

在 uni-calendar-item.vue中进行循环判断即可文章来源地址https://www.toymoban.com/news/detail-521827.html

uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档
uni-calendar日历组件更改标点颜色和位置及多个标点显示,javascript,uniapp,vue.js,小程序,前端,Powered by 金山文档

到了这里,关于uni-calendar日历组件更改标点颜色和位置及多个标点显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中的日历组件 Calendar 实现 考勤打卡记录

    实现效果图 1.由于Calendar没有右上角月份切换的API事件,可以给组件源码添加自定义添加一个事件 2.也可以通过自带的input事件来获取日历 3.vue页面完整代码 注释:this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’),是分装的标准时间转化年月日,使用者可通过多种方法自定义处理。

    2024年01月22日
    浏览(59)
  • 微信小程序日历组件(可滑动,可展开收缩,可标点)

    效果图 组件介绍 原生小程序编写,简单轻便,拿来即用。 推荐从代码托管地址获取代码,后续会更新功能: github地址 | gitee地址 代码部分(这里可能不是最新的,推荐去gitee克隆代码) calendar.wxml calendar.js calendar.json calendar.wxss

    2024年02月11日
    浏览(49)
  • Vant 的 Calendar 日历组件 自定义日期区间minDate、maxDate

          1.默认日历时间范围是当前时间到往后的6个月,可通过 min-date 和 max-date 自定义日历的范围。       2.设置 type 为 range 后可以选择日期区间,confirm 事件返回的 date 为数组结构,数组第一项为开始时间,第二项为结束时间。       3.可设置allow-same-day 允许选择同一天。

    2024年02月15日
    浏览(54)
  • element-ui日历组件el-calendar选中特定时间以及样式修改

    项目开发中,有需要用到日历的组件,而且需要把某些日期标注起来,在这边标注的小红点我用了 el-badge 具体效果如下图所示:  页面标签: 变量声明: 样式修改: 参考地址

    2024年02月11日
    浏览(70)
  • 微信小程序使用vant calendar日历组件 default-date 默认选中的日期无效?

    废话少说 直接贴代码 总结:  ①: 要有一个minDate 最小可选日期,要不然无法选择之前的时间 ②: defaultDate(数组): 绑定为时间戳,,[ 起始时间,截止时间 ] , 转换时间戳时要再次getTime()否则设定默认时间失败!!!重点!!!

    2024年02月02日
    浏览(62)
  • 微信小程序实现日历功能、日历转换插件、calendar

    效果图 微信小程序实现交互

    2024年02月13日
    浏览(60)
  • Unity Calendar 日历功能

    工具已上传至 SKFramework 框架 PackageManager 中 框架开源地址:SKFramework OnlyCurrentMonthDays :是否只显示当前月份的日期项; 参数为false时表示会填充当前月份1号之前的日期和当前月份最后一天之后的日期,这些日期不可交互。 HistoryDaysInteractable :历史日期是否可以交互; 参数为

    2024年02月13日
    浏览(49)
  • Calendar日历类型常见方法(必看!!)

    Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍Calendar日历类型的几种常见方法以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言   Calendar类是一个抽象类,它为特定瞬间与一组诸如 Y

    2024年02月05日
    浏览(44)
  • java中Calendar日历类型常见方法

    Calendar是Java中常用的时间处理工具之一,它提供了很多日历类型常见方法,下面是一些常用的方法及对应的代码和运行结果。 目录 1. 如何创建 Calendar 日历对象 2. 获取时间 3. 设置时间 Calendar 是一个抽象类, 无法通过直接实例化得到对象. 因此, Calendar 提供了一个方法 getInsta

    2024年02月05日
    浏览(54)
  • element-plus日历(Calendar)动态渲染+避坑指南

    #dateCell 驼峰书写

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包