el-calendar

VUE+Element-ui实战之el-calendar日历自定义显示内容

目录1、确保添加el-calendar组件2、遍历日期，确定显示内容3、最终实现效果4、完整代码1、确保添加el-calendar组件确保你的element引入了el-calendar组件，这里不再赘述
菜鸟茜·2024-02-20 18:15

el-calendar禁用灰色区域的点击事件

由于自定义表格的点击事件，日期页面跳转出现bug，直接禁用灰色区域跳转，只使用三个按钮跳转月份：禁用灰色区域的css：/*calendar_class是el-calendar所在父标签的css*/.calendar_class
eternal_stand·2024-01-13 17:30

使用calendar数据自定义el-calendar日历组件

/***@1900-2100区间内的公历、农历互转*@charsetUTF-8*@Authorsyp*@Time2022-07-26*@Version1.0.3*@公历转农历：calendar.solar2lunar(1987,11,01);//[youcanignoreparamsofprefix0]*@农历转公历：calendar.lunar2solar(1987,09,10);//[youc
new code Boy·2023-12-27 18:08

VUE el-calendar非当前月不能点击

calendar简单应用import{ref}from'vue'constvalue=ref(newDate())项目需求，非当前的月份不能点击只需要加上css样式即可:deep().el-calendar-table{&:not(.is-range){td.next{pointer-events:none;}td.prev{pointer-events:none;}}}
梦翼横空·2023-12-07 00:19

el-calendar日历自定义，包括上个月 下个月 时间选择，包括内容自定义

本文章内容包括，日历的自定义样式、日历的时间选先来日历内容自定义给你们看下我做的成品然后你们自己根据实际情况修改直接上代码{{data.day.split('-').slice(1).join('-')}}{{data.isSelected?'✔️':''}}预约{{data.not_trainedCount}}人完成{{data.completedCount}}人预期{{data.overdue
卑信－吾天·2023-11-13 10:29

el+vue 实战 ⑧ el-calendar日历组件设置点击事件、el-calendar日历组件设置高度、el-calendar日历组件自定义日历内部内容

一、效果图日历显示内容变为01，02的形式，点击相应的日期后，有一个弹出框显示当天完成的一些内容。二、前端代码设置{{data.day.split("-").slice(2).join()}}①其中value在script中定义如下：exportdefault{data(){return{value:newDate(),};},};②日历组件的data的结构如下：③{{data.day.split
林林zonzon·2023-11-04 08:03

vue + el-calendar 日历考勤对接后台数据

HTML部分搜索重置-->用户名：{{this.username}}部门：{{this.deptName}}{{data.day.split('-').slice(2).join('-')}}{{item[`TEMPERATURE_${index+1}`]}}{{item[`RECORD_TIME_`+`${index+1}`]}}-->{{item[`RECORD_TIME_`+`${index
光头强的工装裤·2023-10-11 23:42

vue+element使用el-calendar日历自定义基本内容获取点击事件

需求：点击日历上的日期更新下面的数据需求是可以用官网上的基本el-calendar，但是没有点击之后获取日期做其他事情的方法。。。
youyu-youyu·2023-09-28 17:20

element问题总结2

20.隐藏el-calendar的多余的日子/deep/.el-calendar-table:not(.is-range)td.next{display:none;}/deep/.el-calendar-table
zhougl996·2023-09-27 07:58

el-calendar日历 简易排班

公司物流部要个简易的排班功能，由主管去设置线路，线路绑定上负责人。然后直接往日历里添加。1、隐藏了自带的切换月份，改用了日期选择器。2、禁用了非本月的点击事件，防止点击自动跳转到其他月份。3、添加了点击多选，批量处理，也有单日排班处理。4、拖拽删除排班，代码如下exportfunctiongetFirstDay(monthValue){letdate=newDate(monthValue)letm
狗狗狗狗亮·2023-09-16 12:14

CSS 修改el-calendar的样式，自定义样式

需求：自定义elementui的日历的样式；给符合条件的时间展示红点。elementui的原始样式：目标样式：代码实现：html:{{Number(data.day.split('-')[2])}}JS：exportdefault{name:'Dashboard',data(){return{calendarValue:newDate(),pointList:['2023-09-12','2023
Naive_Jam·2023-09-15 07:44

vue中el-calendar自定义日历控件

需求背景：做一个维护节假日的功能，有背景颜色的就是维护上去的假节日。要有添加和删除节假日的操作，默认查询当年当月的节假日，也可以通过搜索年月去查询节假日。效果图：一、首先采用的是element的Calendar组件官方组件地址：Element-Theworld'smostpopularVueUIframework官方组件效果图：注：官方组件给出的属性介绍太少了，不能太满足需求，通过多次问度娘才能找
醉梦洛·2023-08-29 09:36

el-calendar的样式修改使用记录

效果图与element原图el-calendar的尺寸el-calendar的大小是根据内部每一个日历块进行决定的.el-calendar-day{height:47px!
一路向前的月光·2023-08-15 05:15

el-calendar自定义设置标签

{{data.day.split('-').slice(1).join('-')}}{{data.isSelected?'✔️':''}}人数:{{item.num}}let_this=null;newVue({el:'#app2',data:function(){return{calendarData:[],value:newDate()}},mounted(){_this=this_this.
码砖的人生·2023-07-19 19:29

vue自定义使用elementUI的日历组件

日历功能点1.要求显示日期2.周末日期变红3.以往的日期不能编辑4.不能查以往的日期（将上个月按钮隐藏）5.接口返回的日期，要把内容显示出来（房间数）6.可以筛选房间，查看指定房间的日期信息自定义使用el-calendar
三线码工·2023-04-19 12:35

Element-UI el-calendar样式修改——日历

注:本人水平有限,仅供参考,有所意见和建议欢迎指出,效果展示代码实现vue:{{data.day.slice(8)}}/*一二三四五六日*/::v-deep.el-calendar-tabletheadth{padding:0;font-size:13px;color:#9CB2CD;}/*去除边框*/::v-deep.el-calendar-tabletrtd:first-child{borde
A_Hawthorn·2023-04-02 06:50

el-calendar日历组件

el-calendar日历组件组件代码{{data.day.split('-').slice(2).join('-')}}{{item.things}}importoperationBoardfrom'
⁡⁡⁡⁡⁡不三·2023-03-23 18:47

element Calendar el-calendar 日期组件 返回今天事件；

element日历组件源码片段：/**点击上月今天下月*/selectDate(type){if(validTypes.indexOf(type)===-1){thrownewError(`invalidtype${type}`);}letday='';if(type==='prev-month'){//上月第一天day=`${this.prevMonthDatePrefix}-01`;}else
高坚果_·2022-05-30 15:11

Element-UI使用篇——el-calendar的使用+样式修改集锦

el-calendar日历组件写在开头：el-calendar日历组件现在git上很很多别人封装好的组件，可以通过npminstall直接安装使用，效果很好，各种事件响应、样式都很炫，对这个要求功能较多的可以百度下使用
小湾生产队队长·2022-04-15 13:21

el-calendar 日程添加

{{data.day.split('-').slice(1).join('-')}}{{item.content}}computed:{/***@Date:2020-11-1910:19:40*@description:判断结果时间和单元格的时间是否相等*@param{*}v单元格的时间*/dealMyDate(){//闭包传参returnfunction(v){letlen=this.group
聪聪那年/·2020-11-19 12:15

elementUI中的el-calendar自定义使用时给切换月份按钮绑定事件

因项目需要需要显示以月历的形式显示状态（如下图所示），但官方文档中找不到日历组件的内置方法，这里用获取类名的方式给切换月份的按钮添加点击事件具体代码实现如下mounted(){this.$nextTick(()=>{//点击前一个月letprevBtn=document.querySelector('.el-calendar__button-group.el-button-group>button
九号窗口·2020-06-29 09:10

el-calendar自定义使用

这几天要做好几个日历，我是用elementui来写的，想着直接拿框架的el-calendar使用就行，可是当我点击某一天获取这一天的日期的时候我发现加什么事件都不触发，在网上搜了好久才找到一个方法，浪费了我
日月朝暮·2020-06-29 05:54

【Vue】element el-calendar 日历组件增删改查自定义使用

前段事件用fullcalendar插件做了一个日历，因为和系统框架不一致，改用了elementel-calendar两个插件都实现了所有功能，但总的来说，Fullcalendar好用很多，毕竟文档全，功能也全如果没有规定一定要用某个插件，推荐使用Fullcalendar，附上官方文档参考FullCalendar文档：https://fullcalendar.io/接下来就是elementel-ca
Hesper_Pan·2020-06-25 16:19

element el-calendar 日历组件可添加展示日程

效果图但是我这个项目情况有点特殊,后台给我返回的是不带毫秒的时间戳,所以我得转换时间,而且没有对应的接口,如果数据接口是可以为这个日历服务的,比如日期格式是:xxx-xx-xx的模式,那就可以直接使用其它方法.我自己的就记录一下首先在在循环里面调用一个方法{{data.day.split('-').slice(2).join('-')}}{{item.subject}}然后计算,在计算的方法里面使
神探小白牙·2020-06-22 14:28

vue日历背景图/calendar,elementui中 el-calendar自定义日历背景颜色

写在前面需求：本文是vue中采用elementui日历组件，根据不同的值设定不同日期的背景颜色块，希望我踩过的坑能给你节约开发时间。效果：1587720104.jpg一、elementui日历示例官网自定义代码：{{data.day.split('-').slice(1).join('-')}}{{data.isSelected?'✔️':''}}.is-selected{color:#1989F
白番茄_·2020-05-02 13:39

element-ui 组件 el-calendar 农历显示问题

一、官方文档：https://element.eleme.cn/#/zh-CN/component/calendar发现官方并无农历显示的介绍二、1.自己写阳历转阴历的方法或引入别人写好的JS文件，如中国农历（阴阳历）和西元阳历即公历互转JavaScript库2.如果是引入上面的JS文件，我把它放在src/utils/js文件夹下，即位置为src/utils/calendar.js，需要在cale
半城狂客·2020-02-17 12:00

element-ui 组件 el-calendar 农历显示问题

一、官方文档：https://element.eleme.cn/#/zh-CN/component/calendar发现官方并无农历显示的介绍二、1.自己写阳历转阴历的方法或引入别人写好的JS文件，如中国农历（阴阳历）和西元阳历即公历互转JavaScript库2.如果是引入上面的JS文件，我把它放在src/utils/js文件夹下，即位置为src/utils/calendar.js，需要在cale
半城狂客·2020-02-17 12:00

使用 elementUI el-tabs 浏览器卡死问题

记录自己踩的一个坑记得有维护过一个项目，就在里面加了些功能，用到了el-calendar组件，我加上之后就报错了，报该组件未注册，我就看了一下element版本，原来是版本过低，然后就升级了一下版本，然后一切正常
郭顺杰·2019-08-02 18:25
上一页 1 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他