Element-UI使用el-calendar显示工作日

原创 已于 2024-04-10 10:33:52 修改 · 1.1k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#ui #vue.js #javascript
于 2023-11-21 14:26:12 首次发布
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .DateBox {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            height: 100%;
            background-color: yellowgreen;
            color: white;
        }

        /*不是指定日期月份不允许点击*/
        .el-calendar-table:not(.is-range) td.next,
        .el-calendar-table:not(.is-range) td.prev {
            pointer-events: none;
        }

        .el-calendar-table:not(.is-range) td.next .DateBox,
        .el-calendar-table:not(.is-range) td.prev .DateBox {
            color: #c0c4cc;
            background-color: white;
        }

        .el-calendar-table thead th {
            color: black;
            background-color: white;
        }

        .IsSelected {
            background-color: red;
        }
        th {
            text-align: center;
            font-size: 24px;
        }

        .el-calendar-table thead th::before {
            content: '星期';
        }
    </style>
</head>

<body>
    <div id="app" style="width: 100%;">
        <span>请选择日期：</span>
        <el-date-picker v-model="dateValue1" type="date" placeholder="选择日期">
        </el-date-picker>
        <el-calendar v-model="dateValue1">
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template slot="dateCell" slot-scope="{date, data}">
                <div :id="data.day" class="DateBox" @click="AddDate(data)" @dblclick="DelDate(data)"
                    :class="BgIsSelected(data,dateData)?'IsSelected':''">
                    <span style="font-size: 30px;" @click="AddDate(data)" @dblclick="DelDate(data)">{{
                        data.day.split('-')[2]}}日</span>&nbsp;
                    <span style="position: absolute;top: 0;left: 0;font-size:x-small;vertical-align: sub;"
                        @click="AddDate(data)" @dblclick="DelDate(data)"> {{
                        data.day.split('-')[1]}}月</span>
                </div>
            </template>
        </el-calendar>
        <p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
            鼠标单击日历单元格为选中日期，鼠标双击单元为取消选中。
        </p>
    </div>
    <script>
        var _this = new Vue({
            el: "#app",
            data: {
                dateData: [
                    {
                        "ID": "20231101",
                        "Dates": "2023-11-01 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231102",
                        "Dates": "2023-11-02 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231103",
                        "Dates": "2023-11-03 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231106",
                        "Dates": "2023-11-06 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231107",
                        "Dates": "2023-11-07 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231108",
                        "Dates": "2023-11-08 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231109",
                        "Dates": "2023-11-09 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231110",
                        "Dates": "2023-11-10 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231113",
                        "Dates": "2023-11-13 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231114",
                        "Dates": "2023-11-14 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231115",
                        "Dates": "2023-11-15 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231116",
                        "Dates": "2023-11-16 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231117",
                        "Dates": "2023-11-17 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231120",
                        "Dates": "2023-11-20 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231121",
                        "Dates": "2023-11-21 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231122",
                        "Dates": "2023-11-22 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231123",
                        "Dates": "2023-11-23 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231124",
                        "Dates": "2023-11-24 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231127",
                        "Dates": "2023-11-27 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231128",
                        "Dates": "2023-11-28 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231129",
                        "Dates": "2023-11-29 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231130",
                        "Dates": "2023-11-30 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    }
                ],
                isDisabled: false,
                dateValue1: '2023-11-01',
                dateValue2: '2023-11-01',
            },
            methods: {
            //判断日期是否在数组中，便于显示背景颜色
                BgIsSelected: (data, dateData) => {
                    if (dateData.some(x => /\d{4}-\d{1,2}-\d{1,2}/.exec(x.Dates)[0] === data.day)) {
                        return true;
                    }
                    return false;
                },
                //添加日期
                AddDate: (data) => {
                    //判断是否存在相同元素
                    //数据库读取的日期后边跟着00:00:00
                    if (_this.dateData.some(x => /\d{4}-\d{1,2}-\d{1,2}/.exec(x.Dates)[0] === data.day)) {
                        return;
                    }
                    var date = data.day.split('-')
                    //以下替换结果相同
                    //'2023-01-03'.split('-').join('')
                    //'2023-01-03'.replaceAll('-', '')
                    _this.dateData.push({ ID: data.day.replaceAll('-', ''), Dates: data.day, Years: date[0], Months: date[1], Days: date[2] });
                },
                //删除日期
                DelDate: (data) => {
                    _this.dateData = _this.dateData.filter(item => /\d{4}-\d{1,2}-\d{1,2}/.exec(item.Dates)[0] !== data.day);
                },
            },
            created() {
            }
        });
    </script>
</body>

</html>

效果

在这里插入图片描述

三分藏道
关注
el-calendar日历的各种样式及事件
m0_67403240的博客
03-03 4048
效果图 班和休互相修改功能 el-calendar HTML代码段 可以根据自己的需要显示内容，样式 <template> <div class="la-container"> <div class="la-info-main"> <!-- 关于日历控件 --> <el-calendar class="lar-el-calendar" v-model="value"
js实现日期农历与公历的互转
xi_nuo的博客
12-06 2368
使用年限：1900-2100 使用场景1：vue项目 js引入：import calendar from '../../utils/calendar.js' 方法调用： getNowDate(){ var nowDate = new Date() // 输入公历年月日，得出农历信息 var nongliStr = calendar.calendarFormatter.sol...
别再只显示日期了！用Element Plus的el-calendar打造你的Vue3个人任务看板（附完整前后端交互代码）
最新发布
weixin_30325487的博客
05-02 254
本文详细介绍了如何利用Element Plus的el-calendar组件在Vue3中构建高交互的个人任务看板系统。通过完整的代码示例，展示了任务增删改查、状态标记、数据持久化等核心功能的实现，并提供了移动端适配和性能优化技巧，帮助开发者打造高效的任务管理工具。
el-calendar 自定义我的日程
CRMEB小程序商城的博客
11-10 2142
虽然el-calendar的自定义样式整体的难度较低,但是处理数据还是比较麻烦,最好与后端商量,返回比较合理的数据,是优化el-calendar的重点
el-calendar自定义样式、标记、事件
WhatMOMO5477的博客
03-19 1万+
目录1.前言2.标准样式3.自定义日期块内容4.自定义点击日期块的事件5.自定义右上角月份按钮6.其它自定义 1.前言 el-calendar是elementUI的日历组件，可以非常便捷的加载一个日历视图，也可做某些自定义，稍微有点麻烦，主要是官方提供的功能较少，文档也全，大部分需要自己定义。 2.标准样式 最基本的样式只需要几行代码实现~ <el-calendar v-model="value"> </el-calendar> <script> export
日历组件 el-calendar 实现标记功能
qq_43532275的博客
06-30 4121
前端日历组件使用
element ui中el-calendar日历自定义样式
DZQ1223的博客
05-17 2348
1、效果图2、具体实现。
element整理＜el-calendar＞日历组件-假期（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
01-25 3030
<template> <div class="clientRegulate"> <div class="titleInfo">非工作日</div> <div class="table"> <el-calendar> <div slot="dateCell" slot-scope="{ data }" @click="allcalendar(data)" class="temp"> {{ da
别再写死排班数据了！用Vue2+Element UI的el-calendar组件，实现一个可拖拽、批量操作的动态排班日历
weixin_30328063的博客
04-25 286
本文详细介绍了如何使用Vue2和Element UI的el-calendar组件实现动态排班日历系统。通过拖拽排序、批量操作等核心功能，解决了传统排班表格可视化差、交互僵硬等问题，大幅提升排班效率。文章包含完整代码示例和性能优化建议，特别适合需要定制排班系统的开发者参考。
el+vue 实战 ⑧ el-calendar日历组件设置点击事件、el-calendar日历组件设置高度、el-calendar日历组件自定义日历内部内容
zujiasheng的博客
06-13 1万+
日历显示内容变为01，02的形式，点击相应的日期后，有一个弹出框显示当天完成的一些内容。 ① 其中value在script中定义如下： ② 日历组件的data的结构如下： 弹出框代码如下，ref绑定的名称同上面命名一样即可。 ⑤ 调整日历组件的宽高，样式设置 三、组件整体代码： 四、总结 后面这个再慢慢优化吧，前端属实写着比后端有趣，但是后端提升空间大，钱更多😭.........
elementui 日历组件el-calendar使用总结
秋实的博客
07-15 5265
自定义elementui日历组件
el-calendar日历组件的一些项目中实际应用（给每一天增加可输入的input框、计算每天数据总和、填写月合计后计算平均数同步到每一天中、做日期限制禁用规则等）
vvv3171071的博客
04-21 3495
这篇文章用来分享自己项目中做el-calendar日历组件封装时的一些实用功能和踩的一些坑吧，毕竟ElementUI官方文档上对这个组件的描述实在太少了。 1、给每一天增加可输入的input框 其实这个功能在官方文档上基本已经实现了（在“自定义内容”那一块），直接在slot插槽里再加个input即可。 <el-calendar v-model="calendarDate"> <template slot="dateCell" slot-scope="{ da
VUE+Element-ui实战之el-calendar日历自定义显示内容
热门推荐
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
06-22 1万+
需求说明 添加el-calendar组件 遍历日期，确定显示内容 上月本月点击事件 最终实现效果
ElementUI - elCalendar 显示自定义日程
Hi_ZH的博客
11-18 1298
【代码】vue2 El-Calendar 显示自定义日程。
使用el-calendar实现自定义日程
qq_30907845的博客
12-07 2566
自定义日历组件样式结合月份选择器实现日程管理组件
Vue + Element Plus 中使用 el-calendar 打造个性化日历：从基础到高级定制
qq_25799227的博客
04-28 1778
在 Web 应用开发中，日历组件是一个高频使用的功能模块，无论是日程管理、任务安排还是数据统计场景，都离不开它的身影。在 Vue 3 生态中，Element Plus 以其丰富的组件库和强大的功能深受开发者喜爱。Element Plus 提供了丰富的 CSS 变量，通过修改这些变量，可以轻松定制组件样式。是一个轻量级的日期处理库，Element Plus 内部也使用了类似的机制来处理日期相关逻辑，通过修改。插槽中，可以根据日期判断是否为特殊日期，并添加相应的类名或标记。方法，即可实现日历主题的动态切换。
element ui el-calendar日历组件使用总结
欧阳的技术博客
05-04 1万+
element ui + vue el-calendar日历组件使用总结
elementUi el-calendar日历组件使用方法
m0_61449795的博客
11-17 1275
everydayDto.setThings("工作内容："+data.getJobContent());@ApiModelProperty(value = "工作内容")@ApiModelProperty(value = "是否提醒")@ApiModelProperty(value = "提醒日期")@ApiModelProperty(value = "内容")@ApiModelProperty(value = "年")@ApiModelProperty(value = "月")
el-calendar日历自定义，包括上个月 下个月 时间选择，包括内容自定义
weixin_56718509的博客
07-13 4046
element的日历el-calendar日历自定义样式内容，包括上个月 下个月 时间选择自定义，其中也包括获取月初月末的日期，很是厉害来看看吧一定可以帮助你
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值