vue2 实现日历组件，包含新增日程

qiao若huan喜

已于 2023-06-28 11:17:41 修改

阅读量2.9k

点赞数

文章标签： javascript 前端 vue.js

于 2023-06-09 09:51:31 首次发布

本文链接：https://blog.csdn.net/qq_46143850/article/details/131121071

版权

本文介绍如何使用 Vue2 框架创建一个功能完整的日历组件，该组件不仅展示日期，还支持用户新增日程。通过模板 HTML、JavaScript 和 CSS 的巧妙结合，实现了动态显示日历并添加日程的功能。

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

实现的最终效果：
在这里插入图片描述

模板 html 部分

<template>
  <!-- 自定义提示组件 -->
  <div class="publicDialog">
    <el-dialog
      :visible.sync="Dialogshow"
      title="课程表"
      width="1050px"
      @open="open"
      @close="close"
      left
      :close-on-click-modal="false"
    >
      <div class="contentBody">
        <div class="flex-row-center">
          添加：
          <el-date-picker
            style="width: 210px"
            v-model="editForm.time"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-M-d"
          >
          </el-date-picker>
          <el-select
            v-model="editForm.type"
            style="width: 150px; margin-left: 14px"
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in cateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="width: 310px; margin-left: 14px"
            v-model="editForm.txt"
            placeholder="请输入内容"
          ></el-input>
          <div
            style="margin-left: 20px"
            class="commonBtn width90Height36 borderRadius18 defalutBorderBtn"
            @click="cancleHandle"
          >
            取消
          </div>
          <div
            style="margin-left: 12px"
            class="commonBtn width90Height36 borderRadius18 hasBgBtn"
            @click="addConfirm"
          >
            确定
          </div>
        </div>
        <div class="air-calendar-box">
          <table class="sn-calendar-table">
            <thead>
              <i class="el-icon-arrow-left iconBtn" @click="preTimeHandle"></i>
              <th
                class="fc-day-header"
                v-for="(item, inx) in weekdays"
                :key="inx"
              >
                {
  { item }}
              </th>
              <i
                class="el-icon-arrow-right iconBtn"
                @click="nextTimeHandle"
              ></i>
            </thead>
            <tbody>
              <tr v-for="(calc, index1) in visibleTimetableData" :key="index1">
                <td
                  v-for="(item, idx) in calc"
                  :key="idx"
                  :class="{
                    include: item.include,
                    active: activeData && item.date === activeData.date,
                  }"
                  @click="clickDay(item)"
                >
                  <slot name="day" :row="item">
                    <div>
                      <div
                        class="month"
                        v-if="item.day2 == '01' || (index1 == 0 && idx == 0)"
                      >
                        {
  { item.month }}月
                      </div>
                      <div class="day">
                        {
  { item.day2 }}
                      </div>
                      <div style=

最低0.47元/天解锁文章