vue 绘制提醒日历组件

这是一个关于Vue.js实现的日历组件代码示例,包括上个月、当前月、下个月切换功能,以及日期选择和样式设计。代码展示了如何生成日历日期、处理不同月份的边界情况,并提供了点击事件处理。

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

-.- 废话补多说,直接上代码

<template>
  <div class="calendar">
    <slot name="header">
      <div class="top">
        <div class="current">{{ time }}</div>
        <div class="box">
          <div class="btn" @click="btn('prevMonth')">上个月</div>
          <div class="btn" @click="btn('currentMonth')">当前月</div>
          <div class="btn" @click="btn('nextMonth')">下个月</div>
        </div>
      </div>
    </slot>
    <div class="date">
      <div class="item">日</div>
      <div class="item">一</div>
      <div class="item">二</div>
      <div class="item">三</div>
      <div class="item">四</div>
      <div class="item">五</div>
      <div class="item">六</div>
      <template v-for="(item,index) in list">
        <div class="item" :class="{active:item.type === currentSelectDate,current:currentDate == item.type,grey:item.next||item.prve}" :key="item.type" @click="click(item)">
          <slot :index="index" :item="item">{{ item.date }}</slot>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: "Calendar",
  props: {
    value: { type: Date, default: () => new Date() },
  },
  data() {
    return {
      list: [],
      time: "",
      currentSelectDate: "",
      currentDate: "",

      timeData: {},
    };
  },
  watch: {
    value(a) {
      if (a) this.time = a;
      this.btn(0);
    },
    timeData(a) {
			this.getData(a)
    },
  },
  created() {
    this.btn();
  },
  methods: {
		// 点击取当前时间-可以做一些操作
		getData(item){
			console.log(item);
		},
    click(item) {
      this.timeData = item;
      if (this.currentSelectDate === item.type) {
        // 取消选中
        this.currentSelectDate = "";
        // 选中日期
      } else this.currentSelectDate = item.type;
      // 选中日期是上个月
      if (item.next) this.btn("nextMonth");
      // 选中日期是下个月
      if (item.prve) this.btn("prevMonth");
      this.$emit("click", { ...item, selectDate: this.currentSelectDate });
      this.$emit("update:select-date", this.currentSelectDate);
    },
    // 默认当前月
    btn(type = "currentMonth") {
      // 获取指定时间的年份和月份
      let currentYear = new Date(this.time).getFullYear();
      let currentMonth = new Date(this.time).getMonth() + 1;
      // 点击上个月
      if (type === "prevMonth") {
        // 指定时间的月份为1月,上一月为上一年的12月
        if (currentMonth === 1)
          (currentMonth = 13), (currentYear = currentYear - 1);
        currentMonth--;
      }
      // 当前月
      if (type === "currentMonth") {
        // 获取当前时间的年月日
        currentYear = new Date().getFullYear();
        currentMonth = new Date().getMonth() + 1;
        let currentDate = new Date().getDate();
        this.currentDate = `${currentYear}-${
          currentMonth > 9 ? currentMonth : "0" + currentMonth
        }-${currentDate > 9 ? currentDate : "0" + currentDate}`;
      }
      // 下个月
      if (type === "nextMonth") {
        // 指定时间的月份为12月,下一月为下一年的1月
        if (currentMonth === 12)
          (currentMonth = 0), (currentYear = currentYear + 1);
        currentMonth++;
      }
      // 当前日历展示的年月
      this.time = `${currentYear}-${
        currentMonth > 9 ? currentMonth : "0" + currentMonth
      }`;
      let date = `${currentYear}-${
        currentMonth > 9 ? currentMonth : "0" + currentMonth
      }-01`;
      this.init(date);
      this.$emit("change-month", { currentYear, currentMonth, type, date });
      this.$emit("update:current-date", this.currentDate);
    },
    // 生成日历日期,因每月开始和结束不是周日和周六,需要取上月月末和下月月初补满每周七天,所以生成的总天数共35-42天。
    init(time) {
      // 获得指定时间年月,月总天数
      let date = new Date(time);
      let currentYear = date.getFullYear(); // 年
      let currentMonth = date.getMonth() + 1; // 月
      let currentMonthDate = new Date(currentYear, currentMonth, 0).getDate(); // 当月总天数
      let list = new Array(currentMonthDate).fill().map((_, i) => ({
        year: currentYear,
        month: currentMonth,
        date: i + 1,
      }));

      // 获取上月,需要处理跨年
      let preMonth = currentMonth;
      if (preMonth === 1) (preMonth = 13), (currentYear = currentYear - 1);
      let beforeMonthDate = new Date(currentYear, preMonth - 1, 0).getDate(); // 上月总天数
      let beforeDate = new Date(
        `${currentYear}-${preMonth - 1}-${beforeMonthDate}`
      ).getDay();
      for (let i = 0; i <= beforeDate; i++)
        list.unshift({
          prve: true,
          year: currentYear,
          month: preMonth - 1,
          date: beforeMonthDate - i,
        });

      // 获取下月,需要处理跨年
      let nextMonth = currentMonth;
      if (nextMonth === 12) (nextMonth = 0), (currentYear = currentYear + 1);
      let afterDate = 7 - ((currentMonthDate + beforeDate) % 7); // 下月月头
      for (let i = 1; i < afterDate; i++)
        list.push({
          next: true,
          year: currentYear,
          month: nextMonth + 1,
          date: i,
        });
      this.list = list.map((e, i) => {
        let { year, month, date } = e;
        return {
          ...e,
          week: Math.floor(i % 7),
          type: `${year}-${month > 9 ? month : "0" + month}-${
            date > 9 ? date : "0" + date
          }`,
        };
      });
    },
  },
};
</script>
<style lang='less' scoped>
.calendar {
  min-height: 300px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    margin: 0 0 20px 0;
    padding: 0 10px;
  }
  .box {
    display: flex;
    justify-content: space-evenly;
    width: 160px;
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 5px;
    color: #666;
    .btn {
      padding: 3px 5px;
      cursor: pointer;
      transition: all 0.1s;
      &:nth-child(2) {
        border: 1px solid #eee;
        border-top: none;
        border-bottom: none;
      }
      &:hover {
        color: #333;
        background: #eee;
        transition: all 0.1s;
      }
    }
  }
  .item {
    flex: 0 0 13%;
    height: 35px;
    margin: 2px;
    min-width: 20px;
    text-align: center;
    color: #444;
    padding-top: 5px;
    box-sizing: border-box;
    border-radius: 5px;
    transition: all 0.2s;
    &.grey {
      color: #999;
    }
    &:hover {
      transition: all 0.2s;
      cursor: pointer;
      background: #5164e7a0;
      color: #fff;
    }
    &.current {
      transition: all 0.2s;
      background: #5164e7a0;
      color: #fff;
    }
    &.active {
      transition: all 0.2s;
      background: #5164e7;
      color: #fff;
    }
  }
  .date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
}
</style>

参考:https://www.jianshu.com/p/85cf4b3b5ba8 

### Vue 中实现日历热力图 #### 使用 `vue-calendar-heatmap` 组件 为了在 Vue 项目中快速集成并使用日历热力图,可以采用轻量级的日历热力图组件 `vue-calendar-heatmap`[^2]。此组件基于 SVG 技术构建,能够很好地适应各种前端框架。 安装该插件可以通过 npm 或 yarn 完成: ```bash npm install vue-calendar-heatmap --save ``` 或者 ```bash yarn add vue-calendar-heatmap ``` 接着,在项目的入口文件或相应页面导入这个模块,并注册全局/局部组件: ```javascript import CalendarHeatmap from 'vue-calendar-heatmap'; export default { components: { CalendarHeatmap }, } ``` 配置好之后就可以像下面这样来渲染一个简单的日历热力图表了: ```html <template> <div id="app"> <!-- 设置宽度高度 --> <CalendarHeatmap :width="800" :height="400" :values="dataValues"/> </div> </template> <script> // 假设 dataValues 是一个包含日期和对应数值的对象数组 const dataValues = [ {"date": new Date('2023-01-01'), "count": 5}, {"date": new Date('2023-01-02'), "count": 7}, ]; </script> ``` 以上代码片段展示了如何通过传递 `dataValues` 参数来自定义显示的数据点及其对应的强度等级。 #### 利用 ECharts 创建更复杂的日历视图 如果希望拥有更多定制化选项,则可以选择更为强大的图形库如 ECharts 来绘制日历形式的热力图[^3]。具体法是在原有的 Heatmap 类型基础上增加 calendar 配置项以指定年份范围和其他样式设置。 以下是利用 ECharts 构建带日历功能的热力图的一个简单实例: ```html <div id="main" style="width: 600px;height:400px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript"> var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { visualMap: { min: 0, max: 10, calculable: true, orient: 'horizontal', left: 'center', bottom: 'bottom' }, calendar: [{ top: 60, left: 60, right: 60, cellSize: ['auto', 20], range: '2023', itemStyle: { borderWidth: 0.5 } }], series: [{ name: '模拟数据', type: 'heatmap', coordinateSystem: 'calendar', calendarIndex: 0, data: generateFakeData() }] }; function generateFakeData() { var date = +new Date(2023, 0, 1); // 起始时间为2023年的第一天 var end = +new Date(2024, 0, 1); // 结束时间为次年的第一天 var now = +new Date(); var res = []; while (date < end) { let value = Math.floor(Math.random()*10)+1; res.push([new Date(date).getTime(),value]); date += 36e5 * 24; // 每天加一天的时间戳增量 } return res; } myChart.setOption(option); window.addEventListener('resize', function () { setTimeout(function () { myChart.resize(); }, 100); }); </script> ``` 这段脚本首先初始化了一个 ECharts 实例,并为其指定了一个具有特定样式的日历年表作为坐标系;随后填充了一些随机生成的数据到系列列表里用于呈现热度变化趋势。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值