elementui日历组件实现可标记日历

这是最后实现的效果，需要用圈来标记日期，有红色的标记和黄色的标记，开始找了很多插件，但是没有找到合适的能实现效果了，最后看到了其他相似的例子实现了这个需求

       <el-calendar v-model="value" class="cal"><template slot="dateCell" slot-scope="{ date, data }"><pv-if="handleSelected(data.day) == '1'"class="calendar_circle1"@click="clickCalendar(data)">{{ data.day.split("-").slice(2).join("-") }}</p><pv-if="handleSelected(data.day) == '2'"class="calendar_circle2"@click="clickCalendar(data)">{{ data.day.split("-").slice(2).join("-") }}</p><pv-if="handleSelected(data.day) == '3'"class="calendar_circle3"@click="clickCalendar(data)">{{ data.day.split("-").slice(2).join("-") }}</p></template></el-calendar>

这是日历的组件。

    handleSelected(day) {let flag = "1"; //默认显示为0// 没有交易年度 2深色有 3浅色无this.hasYearNot.forEach((item) => {if (item == day) {//判断显示数据flag = "3";return;}});this.hasYear.forEach((item) => {if (item == day) {//判断显示数据flag = "2";return;}});return flag;},

hasYearNot   hasYear这两个数组是需要被标记的日期。
后台需要返回的数据格式,需要后台标识好我们需要标记的日期。

//请求获取后台返回的数据，需要后台做好标识，哪个日期需要标记什么颜色getCal(val) {let month = new Date(val).getMonth() + 1;let year = new Date(val).getFullYear();getHomeNotice({ orgId: this.orgId, issue: `${year}-${month}` }).then((res) => {for (let key in res.data) {if (res.data[key] == "1") {this.hasYearNot.push(key);} else if (res.data[key] == "2") {this.hasYear.push(key);}}});}
{"status":200,"msg":"查询成功","rel":true,"data":{"2021-06-20":"2","2021-06-21":"2","2021-06-22":"1"}
}

.cal ::v-deep.el-calendar-day .calendar_circle1 {margin: 0 auto;padding: 2px;text-align: center;
}
.cal ::v-deep.el-calendar-day .calendar_circle2 {border: 1px solid #DE4747;border-radius: 50%;margin: 0 auto;padding: 2px;text-align: center;
}

给不同的圈设置不同的样式。
ending~~~~~

elementui日历组件实现可标记日历相关推荐

【calendar日历组件】elementul的日历组件点击拿到对应的日期或者触发某些事件
elementul的日历组件文档没有写方法,文档很少,很多人一开始看是懵的.所以记录一下做法图片代码思路:通过监听value的变化拿到对应的日期,同时可以根据这个监听触发对应的方法. <t ...
Android一个漂亮的日历组件源码
简介: Android 一个漂亮的日历组件源码主要特性日历样式完全自定义,拓展性强左右滑动切换上下周月,上下滑动切换周月模式抽屉式周月切换效果标记指定日期(marker) 跳转到指定日期下载 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
vue 日历翻拍效果_VUE实现日历组件功能
哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是 ...
监听element-ui的Calendar 日历组件的上一月今天下一月
监听element-ui的Calendar 日历组件的上一月今天下一月直接在mounted(){}里面进行监听代码如下: mounted() {let prevBtn = document.q ...
element-ui组件库中Calendar日历组件使用心得（可能用到的常用方法和如何添加监听）
最近接触到一个需求,做一个值班排班表,拿到低保真之后一直在考虑是如何实现这个排班表,考虑过自己写,也考虑过@fullcalendar/vue插件,经过一些评估之后最终选择了项目本身使用的element ...
日历组件带农历及事件标记，绑定点击事件
前段时间需要做一个课程日历的记事,还需要带农历,网上查了一下现有的日历带农历的代码分享,整合了一下自己的事件业务逻辑,最终做了这么一个日历组件(农历使用紫金山天文台农历编码1921-2023,有没有大 ...
ElementUI中使用el-calendar实现基于日历的节假日的增删改查
场景前端使用ElementUI的el-calendar组件实现可视化的节假日的增删改查. 主页面显示效果如下点击日历组件上的某天进行新增节假日时点击已经存在的节假日编辑时博客: https:/ ...
primefaces教程_Primefaces日历组件示例教程
primefaces教程 In our previous tutorials, we've covered several types of Primefaces components such as ...
VUE自定义日历组件，计算年月日，上个月份的空白展示，点击某一天进入详情页面
效果图: 背景描述: 产品提出需求,需要日历来配置每一天的商品价格.刚开始使用的element-ui的el-calendar组件,由于样式.跳转.点击事件等功能都不好控制,所以自己写了一个日历组件.完 ...

elementui日历组件实现可标记日历

elementui日历组件实现可标记日历相关推荐

最新文章

热门文章