基于Element组件库，实现任意年份十二月份日历平铺

叁叁哦

已于 2022-08-03 22:28:29 修改

阅读量2.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Element 文章标签： javascript 前端

于 2022-08-03 16:31:07 首次发布

本文链接：https://blog.csdn.net/weixin_49311884/article/details/126135768

本文档详细介绍了如何使用Element UI组件库中的Calendar组件，实现一个可选择任意年份并展示十二个月份日历的组件。每个日期单元格可点击，并在点击后弹出下载报告的对话框。通过自定义CSS样式，隐藏了默认的按钮和标题，调整了日历布局。此外，还展示了如何在父组件中调用此日历组件，通过年份选择器选择不同年份的月份日历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于Element组件库，实现任意年份十二月份日历平铺

成果展示

01 年份选择

利用年份选择器获得相应年份的日历

在这里插入图片描述

02 十二个月份平铺
在这里插入图片描述

03 点击事件

点击日历中的任意一天，可以下载该日的报告

在这里插入图片描述

实现代码

01 calendar 插件实现

01 日历

HTML

利用 v-model 来给日历绑定相应的年月，例如：父组件中传送的value值 :value=“new Date(year.getFullYear(),0)” ，其中year.getFullYear()指的是年份选择器传送回来的值中的年份，假如这个值是2022，new Date(2022,0)表示的是得到2022年一月的时间；:first-day-of-week=7 表示将周日指定为一周最开始的一天

<template >

  <div id="calendar">
    <div class="wrapper my-calendar">
      <div class="title" >{
   
   {
   
   month}} {
   
   {
   
   year}} </div>
      <el-calendar  
        v-model="value"
        :first-day-of-week=7
        style="width:22.5vw;position:relative;border:1px solid rgba(20,20,20,.3) ;border-radius: 1%;"
      >
        <template v-slot:dateCell="{ data }" >
          <div class="date-cell" @click.stop="click(data)"  >
          <!-- 不要修改div.date-cell的样式，样式已在style.css定义 -->
          <!-- 修改显示日期单元格的样式，请修改div.content的样式 -->
          <!-- 单元格点击事件请定义在div.date-cell上,防止点击事件向上传播触发组件默认事件(切换月份) -->
            <div class="content" > {
   
   {
   
    data.day.split('-').slice(2)[0] }}</div>
          </div>
          <!-- <span>{
   
   {
   
   date}}</span> -->
        </template>
      </el-calendar>
    </div>

JavaScript

父组件需要向日历插件中传递以下四个值

props:{
   
   
  value:String,
  year:Number,
  month:String,
  num:Number,
},

CSS

在 Eelement 组件库中，Calendar 日历组件，还有其他的默认样式，比如切换月份等，在本例中是不需要的，需要禁用；同时调整日历中的样式。

/* 不显示上个月/今天/下个月按钮 */
.my-calendar .el-calendar .el-button.el-button--plain.el-

最低0.47元/天解锁文章

200万优质内容无限畅学