高度定制elementui 的Calendar 日历实现自定义格式展示

最新推荐文章于 2025-09-09 11:21:44 发布

原创

最新推荐文章于 2025-09-09 11:21:44 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

需求场景，日历控件显示每一天的新增客户数量，有客户就显示一个角标有多少人，没有新增客户就是正常显示，控件支持自定义日期高度，边距，标题，自定义格式化数据，效果如下

由于elementui官方的样式比较尴尬，需要添加一些自定义样式穿透才能改变原来的布局，而且官方没有提供影藏上一天下一天的API接口，只能通过CSS隐藏
在这里插入图片描述
*** 以下是简单的实现方式，具体业务场景还可以高度需求定制，列如日期格式化控件的具体格式，返回参数格式，日期上点击事件，还有头部的周一周二等定制（是否显示周等），具体根据业务场景封装，切勿重复造轮子

带角标的日历控件

<template>
	<div class="w-100p flex-column  col-b-title " :style="customStyle">
		<div class="flex justify-between  bg-b-white">
      <div class="flex-1" v-if="{
  
  {dataInfo.title}}">{
  
  { dataInfo.title }}</div> 
			<div class="w-100p flex-row justify-between align-center" :class="actionBoxClass">
				<div class="flex-row month-action align-center f-s-14">
					<span class="month-input m-r-8" :style="dateInputStyle">
						<el-date-picker
							v-model="taskTime"
							v-if="formatType === 'month'"
							:format="formatValue"
							:format-type="formatType"
							class="f-s-16 bold"
						>
						</el-date-picker>
					</span>
					<span @click="clickLast" class="month-btn prev-moth ">
						<svg-icon icon-class="arrow-left" :class="arrowColor"></svg-icon>
					</span>
					<span @click="clickNext" class="month-btn next-moth">
						<svg-icon icon-class="arrow-right" :class="arrowColor"></svg-icon>
					</span>
				</div>
				<div class=" align-center">
					<span
						class="f-s-12 brs4  bor-w-1 bor-c-2 col-b-title-6 text-center align-center calendar-today "
						@click="resetCurrentDay"
						>今日</span
					>
				</div>
			</div>
		</div>
		<div class="flex">
			<el-calendar ref="taskMonthCalendar" :value-format="formatValue" v-model="taskTime" :type="formatType">
				<template #dateCell="{date, data}">
					<div class="time-da