Vue + ant日历组件calendar 自定义渲染

KBK2020

已于 2023-06-28 11:26:29 修改

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

于 2023-06-27 19:41:50 首次发布

本文链接：https://blog.csdn.net/KBK2020/article/details/131423158

版权

文章介绍了如何在Vue项目中结合ant设计的日历组件实现自定义标题和日期单元格的渲染。通过设置`headerRender`和`dateCellRender`属性，不仅可以改变日历头部的语言模式，还能根据特定日期显示不同数量的标记及相应样式。代码示例展示了如何处理这些功能并应用自定义CSS样式。

摘要由CSDN通过智能技术生成

Vue + ant日历组件calendar 渲染自定义标题自定义渲染样式

前言

提示：ant日历组件calendar 消息渲染：
kbk使用ant日历组件calendar中需要实现：
1.日历头部是英文模式，并且可以自定义header标题
2. 在特殊的时间里进行标记
3. 特殊时间段发生事件次数不一致，样式也进行变化

一、引入 ant

参照官方进行引入

注意点：

明确是全局引入还是按需引入
明确安装版本问题

二、使用步骤

效果图就不展示啦

代码如下（children.vue）：

<template>
  <div style="width: 100%; padding: 0px 80px">
    <a-calendar :fullscreen="false">
      <template #headerRender="{}">
        <div>
          <div class="titleCss">{{ title }}</div>
        </div>
      </template>

      <div slot="dateCellRender" slot-scope="value">
        <div v-if="getData(value)">
          <div :class="getData(value)">{{ value.date() }}</div>
        </div>
      </div>
    </a-calendar>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const value = ref();
    const list = [
      {
        date: "2023/07/10",
        count: 5,
      },
      {
        date: "2023/07/11",
        count: 4,
      },
      {
        date: "2023/07/14",
        count: 3,
      },
      {
        date: "2023/07/20",
        count: 4,
      },
      {
        date: "2023/07/22",
        count: 3,
      },
      {
        date: "2023/07/23",
        count: 1,
      },
    ];

    return {
      value,
      list,
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      getData(val) {
        let currentDay = val.date();
        for (let i = 0; i < this.list.length; i++) {
          let dataVal = this.list[i].date.substring(8, 10);
          if (currentDay == dataVal) {
            let a = this.list[i].count;
            let b =
              a === 1
                ? "restCls  restCls1"
                : a === 2
                  ? " restCls restCls2"
                  : a === 3
                    ? " restCls restCls3"
                    : a === 4
                      ? " restCls restCls4"
                      : a === 5
                        ? "restCls restCls5"
                        : "";
            return b;
          }
        }
      },
    };
  },
});
</script>

<style lang="scss" scoped>
.titleCss {
  font-size: 32px;
  color: #ffffff;
}

.restCls {
  position: relative;
  left: 0px;
  border-radius: 50%;
  display: inline-block;
}
.restCls1 {
  top: -18px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  background: url("~@/assets/image/gif1.gif") center top no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.restCls2 {
  top: -16px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  background: url("~@/assets/image/gif2.gif") center top no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.restCls3 {
  top: -14px;
  width: 32px;
  height: 32px;
  line-height: 32px;
   background: url("~@/assets/image/gif3.gif") center top no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.restCls4 {
  top: -10px;
  width: 36px;
  height: 36px;
  line-height: 36px;
   background: url("~@/assets/image/gif4.gif") center top no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.restCls5 {
  top: -8px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: url("~@/assets/image/gif5.gif") center top no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

::v-deep .ant-fullcalendar {
  border-top: none;
  color: #fff;
}
::v-deep .ant-fullcalendar-value {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  color: #fff;
}

::v-deep .ant-fullcalendar-calendar-body {
  padding: 16px 12px;
}

// hover效果
::v-deep .ant-fullcalendar-value:hover {
  background: transparent;
  cursor: pointer;
}

// 不是本月的颜色置灰
::v-deep .ant-fullcalendar-last-month-cell .ant-fullcalendar-value {
  color: rgba(190, 185, 185, 0.25);
}
::v-deep .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value {
  color: rgba(190, 185, 185, 0.25);
}

// 去除当月的默认选中
::v-deep .ant-fullcalendar-selected-day .ant-fullcalendar-value,
::v-deep .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value {
  background-color: transparent;
  box-shadow: none;
}
</style>

样式这块 background 我使用的图片，也可以用渐变或者 css3动画进行结合

// 渐变
background: radial-gradient(
    circle,
    rgba(217, 94, 95, 1) 0%,
    rgba(173, 90, 92, 1) 40%,
    rgba(247, 231, 231, 1) 100%
  );

对了，这块当作一个子组件去进行引用，父组件给子组件传值的时候记得传 title

 <children :title="'我是日历组件'"/>

import children from '../children.vue'

export default {
  name: "parent",
  components: {
   children
  },
};

ending…