elementui 日历组件el-calendar使用总结
更新时间：2024年07月16日 14:23:59 作者：Hey,Girl
这篇文章主要介绍了elementui 日历组件el-calendar使用总结,引用dayjs处理日期,结合el-calendar完美实现,需要的朋友可以参考下
功能：
1.日历可以周视图、月视图切换；
2.点击月视图中日期可以切换到对应周视图；
3.点击周视图查看当日对应数据；
4.周、月视图状态下，点击前后按钮，分别切换对应上下的周、月；
5.点击回到今天，立即切回到周、月视图下对应的当日；
引用dayjs处理日期，结合el-calendar完美实现。
要注意的是，日历显示周的话，传的日期范围要按照计算所在星期，比如我们的需求是周日为每周起始日，那么就要给周日的日期和周六日期为起始日，月视图我不想再去计算日期范围了，就直接用了:value，注意用的不是v-model而是value，因为value是单向的，v-model是双向数据绑定了。
<template>
<div class="childContainer">
<CompBar name="XX日历" iconName="rili.png" titleName="回到今天" @handleBarClick="nowCalendar">
<div class="kalendar">
<div class="kalendar-header">
<span class="current-monuth">
<i class="el-icon-caret-left" @click="showPrev"></i>
<i class="el-icon-caret-right" @click="showNext"></i>
</span>
<el-radio-group v-model="monthYear" size="mini">
<el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button>
</el-radio-group>
</div>
<CalendarMonth v-if="monthYear==='月'" :calendarValue="monthDate" :selectDay="dayDate" :dateList="dateList" @getPlanList="getplanList"></CalendarMonth>
<CalendarWeek v-else :rangeArr="dateRange" :selectDay="dayDate" :dateList="dateList"
@getPlanList="getplanList"></CalendarWeek>
</div>
<tabs :class="monthYear==='月'?'monthTabs':'weekTabs'" v-model="activePlan" v-loading="isLoading">
<el-tab-pane name="tabApplyEndPlan">
//此处是个列表
</el-tab-pane>
<el-tab-pane name="tabEndPlan"></el-tab-pane>
</tabs>
</template>
// 此处省略组件、接口引入
import dayjs from 'dayjs';
var weekplugin = require('dayjs/plugin/weekday');
dayjs.extend(weekplugin)
// 此处省略,直接放核心代码
data(){
return{
activePlan:'tabApplyEndPlan',
monthYear:'周', // 周、月视图切换，默认显示周
monthDate:'', // 传后端参数 YYYY-MM，查视图上需要显示点的日期
dayDate:'', // 传后端参数 YYYY-MM-DD，查视图下面对应的当日数据列表
dateRange:[], // 周日历，传入周日历视图日期范围
dateList:[], // 存放月数据，视图中需要显示点的日期
}
},
watch:{
// 比较简单，直接省略代码了，记录下逻辑
// 监听 monthDate、dayDate 值的改变，调用对应接口
},
methods:{
showPrev() {
// 上个月
if (this.monthYear === '月') {
this.monthDate = dayjs(this.monthDate).add(-1, 'month').format('YYYY-MM');
// 需要判断当前选中日期是否属于当前月份
let _dayDate = dayjs(this.dayDate).format('YYYY-MM');
if (_dayDate === this.monthDate) {
// 计算本周第一天
let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
// 计算本周最后一天
let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2];
} else {
let day1 = dayjs(this.monthDate).startOf('month').startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(this.monthDate).startOf('month').endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2]
}
}
// 上星期
if (this.monthYear === '周') {
// 获取当前周视图
let day1 = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(this.dateRange[1]).add(-1, 'week').endOf('week').format('YYYY-MM-DD');
this.monthDate = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM');
this.dateRange = [day1, day2]
}
},
showNext() {
// 下个月
if (this.monthYear === '月') {
this.monthDate = dayjs(this.monthDate).add(1, 'month').format('YYYY-MM');
// 需要判断当前选中日期是否属于当前月份
let _dayDate = dayjs(this.dayDate).format('YYYY-MM');
if (_dayDate === this.monthDate) {
// 计算本周第一天
let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
// 计算本周最后一天
let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2];
} else {
let day1 = dayjs(this.monthDate).endOf('month').startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(this.monthDate).endOf('month').endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2]
}
}
// 下星期
if (this.monthYear === '周') {
// 获取当前周视图
let day1 = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(this.dateRange[1]).add(1, 'week').endOf('week').format('YYYY-MM-DD');
this.monthDate = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM');
this.dateRange = [day1, day2]
}
},
// 返回今日
nowCalendar() {
this.monthDate = dayjs(new Date()).format('YYYY-MM');
this.dayDate = dayjs(new Date()).format('YYYY-MM-DD');
let day1 = dayjs(new Date()).startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(new Date()).endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2];
this.activePlan = 'tabApplyEndPlan'
},
// 周、月视图日期被点击处理方法
getPlanList(date) {
// console.log(this.monthYear)
// console.log(date)
this.dayDate = date.day;
// 点击上、下月/周日期，不涉及视图的切换
if (this.monthYear === '月') {
if (date.type === 'next-month') {
this.showNext()
}
if (date.type === 'prev-month') {
this.showPrev()
}
}
if (this.monthYear === '周') {
let _month = dayjs(date.day).format('YYYY-MM');
if (date.type === 'next-month') {
if (_month !== this.monthDate) {
this.monthDate = dayjs(date.day).format('YYYY-MM');
}
}
if (date.type === 'prev-month') {
if (_month !== this.monthDate) {
this.monthDate = dayjs(date.day).format('YYYY-MM');
}
}
}
if (date.type === 'current-month') {
this.monthYear = '周';
// 计算本周第一天
let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
// 计算本周最后一天
let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
// 计算点击日期所在周第一天所属月
this.monthDate = dayjs(day1).startOf('week').format('YYYY-MM');
this.dateRange = [day1, day2];
}
},
}
自定义日历样式（没有用日历原先的头，全部自己重写的，还不错）：
::v-deep .kalendar {
&-header {
text-align: center;
margin: 10px 16px 0 16px;
.current-monuth {
font-size: 16px;
letter-spacing: 0;
font-weight: 500;
margin-left: 15%;
color: #262626;
font-family: PingFangSC-Medium;
i {
cursor: pointer;
}
}
.el-radio-group {
float: right;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #ffffff;
box-shadow: -1px 0 0 0 transparent;
border: 1px solid rgba(199, 0, 11, 1);
font-family: PingFangSC-Medium;
font-size: 12px;
color: #c7000b;
letter-spacing: -0.04px;
font-weight: 500;
}
.el-radio-button__inner:hover {
color: #c7000b;
}
}
.calender-dot-box {
width: 100%;
bottom: -8px;
position: absolute;
span {
width: 6px;
height: 6px;
margin-right: 3px;
border-radius: 50%;
display: inline-block;
&:last-of-type {
margin-right: 0;
}
}
.endPlan {
background-color: #d61212;
}
.applyEndPlan {
background-color: #ffd100;
}
}
.el-calendar {
&__body {
padding: 10px 16px;
}
.is-today {
.el-calendar-day {
.calender-date {
width: 34px;
height: 34px;
margin: 0 auto;
color: #ff534f;
border-radius: 10px;
background: #fff;
box-shadow: none;
}
}
}
&__header {
display: none;
}
.current {
.el-calendar-day {
color: #262626;
}
}
.prev,
.next {
color: #bfbfbf;
}
&-day {
padding: 0;
font-weight: 700;
font-size: 16px;
letter-spacing: 0;
text-align: center;
position: relative;
transition: color 0.3s;
font-family: DINAlternate-Bold;
}
&-table {
th {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #262626;
letter-spacing: 0;
text-align: center;
line-height: 34px;
font-weight: 400;
padding: 0;
&:last-of-type,
&:first-of-type {
color: #ff564e;
}
}
td {
border: none;
&.is-selected {
background-color: transparent;
}
}
.el-calendar-day {
height: 34px;
line-height: 34px;
&:hover {
background-color: transparent;
}
.calendar-isSelected {
width: 34px;
height: 34px;
margin: 0 auto;
color: #fff;
border-radius: 10px;
background: #ff534f;
box-shadow: 0px 0px 2px 0px rgba(238, 88, 64, 1);
}
}
}
}再看看子组件里面，先看月的：
<template>
<!-- 月日历 -->
<el-calendar :value="calendarValue" :first-day-of-week="7" value-format="YYY-MM">
<template slot="dateCell" slot-scope="{ date, data }">
<div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">
{{ date.getDate() }}
</div>
<div v-else class="calender-date" @click="handleDate($event, date, data)">
{{ date.getDate() }}
</div>
<div class="calender-dot-box" @click="handleDate($event, date, data, 'dot')">
<template v-for="(item) in dateLists">
<span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span>
<span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span>
</template>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
components: {},
name: "CalendarMonth",
props: {
selectedDay: {
type: String,
default: "",
},
calendarValue: {
type: String,
default: new Date(),
},
dateList: {
type: Array,
default: () => {
return [];
},
},
},
watch: {
dateList: {
handler(list) {
this.dateLists = list;
},
immediate: true,
},
},
data() {
return { monthDate: this.calendarValue, dateLists: [] };
},
created() { },
methods: {
handleDate(e, date, data) {
this.$emit("getPlanList", data);
},
},
};
</script>
<style lang="scss" scoped></style>周日历组件：
<template>
<!-- 周日历 -->
<el-calendar :range="rangeArr" :first-day-of-week="7" value-format="YYY-MM">
<template slot="dateCell" slot-scope="{date,data}">
<div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">
{{ date.getDate() }}</div>
<div v-else class="calender-date" @click="handleDate($event, date, data)">{{ date.getDate() }}</div>
<div class="calender-dot-box" @click="handleDate($event, date, data)">
<template v-for="(item) in dateList">
<span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span>
<span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span>
</template>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
components: {}, name: 'CalendarWeek', props: {
selectedDay: {
type: String, default: '',
}, rangeArr: {
type: Array,
default: () => {
return [];
}
}, dateList: {
type: Array, default: () => {
return [];
}
}
}, data() {
return {
}
}, created() {
}, methods: {
handleDate(e, date, data) {
// console.log(e,date,data)
this.$emit('getPlanList', data)
},
}
}</script>
<style lang="scss" scoped></style>其实应该把日历组件二次封装一下，就不用单独再去写周、月日历子组件了，有空了可以试试。
不过不得不再吐槽一句，elementui的日历组件，给提供的API真心的少，功能很简单。。。
最终效果图：
月视图效果图：
月视图下，有时候会出现整整一行的灰色日期，看起来不是很美观，那么就需要操作dom，通过js判断，操作dom来处理。大概思路就是，先通过 document.querySelectorAll('.el-calendar-table__row') 获取到所有.el-calendar-table__row的元素节点lists，然后循环遍历这些节点，若其子元素class中含有.current，那么就说明是带有当月的日期，则不改变样式，若不含，则说明这整行都是前\后月的日期，那么就可以把该.el-calendar-table__row的css里面加上属性display:none。
周视图效果图：
到此这篇关于elementui 日历组件el-calendar使用总结的文章就介绍到这了,更多相关elementui 日历组件el-calendar使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Async / Await是人们期待已久的JavaScript功能，它使使用异步功能更加有趣和易于理解。这篇文章主要给大家介绍了关于Javascript中异步等待的相关资料,需要的朋友可以参考下2021-05-05
这篇文章主要为大家介绍了JavaScript原型对象的this指向问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
关于Webpack dev server热加载失败的解决方法
下面小编就为大家分享一篇关于Webpack dev server热加载失败的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了js获取当前时间的年月日时分秒及时间的格式化，本文通过实例代码讲解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了在JavaScript中构建ArrayList，很实用,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了JavaScript判断undefined类型的正确方法,相信很多同学在遇到这问题时都会用到错误的方法,正确方法也很简单,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了js实现卡片式项目管理界面UI设计效果，该UI设计中，将各个项目以卡片的方式堆叠排列在屏幕上，当点击了其中的某个项目的时候，该项目图片会全屏放大，向下滚动鼠标可以看到该项目的介绍信息，需要的朋友可以参考下2015-12-12
这篇文章主要为大家介绍了Cropper.js进阶之裁剪后保存至本地实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
document.all与getElementById、getElementsByName、getElementsByT
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。2008-12-12
这篇文章主要介绍了tangram.js库实现js类的方式,结合实例形式分析了tangram.js库实现类的创建、继承等相关操作技巧,需要的朋友可以参考下2018-01-01
最新评论