思享工具箱

【前端开发】vue项目日程表12月平铺（日历）vue-material-year-calendar插件的使用教程

摘要：
在前言项目中，您需要一个12个月的平铺日历功能，可以按年份切换。在找到了许多有用的工具之后，你终于找到了一个类似的工具。效果如下follows://The安装取决于yarnadvue材料年日历源代码{curYear}}年˂！

前言

项目中需要一个12个月平铺能按年份切换的日历功能，找了好多没找到好用的，最后找了个相似的改了下，效果如下

【前端开发】vue项目日程表12月平铺（日历）vue-material-year-calendar插件的使用教程第1张

 步骤

// 安装依赖
yarn add vue-material-year-calendary

源码

<template>
  <div class="weekdays-pages">
    <div class="weekdays-year">
      <svg-icon icon-    @click="nextYear(0)" /><span> {{ curYear }}年</span>
      <svg-icon icon-    @click="nextYear(1)" />
    </div>
    <div class="content-box__gap weekdays-area">
      <div class="weekdays-content ">
        <!-- :activeDates.sync="activeDates" -->
        <div class="weekdays-left">
          <el-button   size="mini" @click="addWeekendCurrentYear">设置所有周末为节假日</el-button>
          <YearCalendar
            v-model="year"
            :activeDates="activeDates"
            @toggleDate="toggleDate"
            prefixClass="your_customized_wrapper_class"
            :activeClass="activeClass"
            lang="tw"
            :showYearSelector="false"
          ></YearCalendar>
        </div>
        <div class="weekdays-right">
          <h1 class="summer-time-title">夏令工作时间</h1>
          <el-form :model="timeForm" :rules="timeFormRules" ref="timeForm" label-position="top" class="demo-ruleForm">
            <el-form-item label="夏令起止时间：" required>
              <el-col :span="11">
                <el-form-item prop="summerStart">
                  <el-date-picker type="date" placeholder="选择日期" v-model="timeForm.summerStart"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col   :span="2"> 至 </el-col>
              <el-col :span="11">
                <el-form-item prop="summerEnd">
                  <el-date-picker type="date" placeholder="选择日期" v-model="timeForm.summerEnd"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="上午工作时间：" required>
              <el-col :span="11">
                <el-form-item prop="summerMorningDate1">
                  <el-time-picker
                    format="HH:mm"
                    placeholder="选择时间"
                    v-model="timeForm.summerMorningDate1"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
              <el-col   :span="2"> 至 </el-col>
              <el-col :span="11">
                <el-form-item prop="summerMorningDate2">
                  <el-time-picker
                    format="HH:mm"
                    placeholder="选择时间"
                    v-model="timeForm.summerMorningDate2"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="下午工作时间：" required>
              <el-col :span="11">
                <el-form-item prop="summerAfternoonDate1">
                  <el-time-picker
                    format="HH:mm"
                    placeholder="选择时间"
                    v-model="timeForm.summerAfternoonDate1"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
              <el-col   :span="2"> 至 </el-col>
              <el-col :span="11">
                <el-form-item prop="summerAfternoonDate2">
                  <el-time-picker
                    format="HH:mm"
                    placeholder="选择时间"
                    v-model="timeForm.summerAfternoonDate2"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <h1 class="winter-time-title">冬令工作时间</h1>
            <el-form-item label="冬令起止时间：" required>
              <el-col :span="11">
                <el-form-item prop="winterStart">
                  <el-date-picker type="date" placeholder="选择日期" v-model="timeForm.winterStart"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col   :span="2"> 至 </el-col>
              <el-col :span="11">
                <el-form-item prop="winterEnd">
                  <el-date-picker type="date" placeholder="选择日期" v-model="timeForm.winterEnd"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="上午工作时间：" required>
              <el-col :span="11">
                <el-form-item prop="winterMorningDate1">
                  <el-time-picker
                    format="HH:mm"
                    placeholder="选择时间"
                    v-model="timeForm.winterMorningDate1"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
              <el-col   :span="2"> 至 </el-col>
              <el-col :span="11">
                <el-form-item prop="winterMorningDate2">
                  <el-time-picker
                    format="HH:mm"
                    placeholder="选择时间"
                    v-model="timeForm.winterMorningDate2"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="下午工作时间：" required>
              <el-col :span="11">
                <el-form-item prop="winterAfternoonDate1">
                  <el-time-picker
                    format="HH:mm"
                    placeholder="选择时间"
                    v-model="timeForm.winterAfternoonDate1"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
              <el-col   :span="2"> 至 </el-col>
              <el-col :span="11">
                <el-form-item prop="winterAfternoonDate2">
                  <el-time-picker
                    format="HH:mm"
                    placeholder="选择时间"
                    v-model="timeForm.winterAfternoonDate2"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item class="save-btn">
              <el-button type="primary" @click="submitForm('timeForm')">保 存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Inject } from 'vue-property-decorator'
import YearCalendar from 'vue-material-year-calendar'
import dayjs from 'dayjs'

@Component({
  name: 'WeekdaysManagement',
  components: {
    YearCalendar
  }
})
export default class WeekdaysManagement extends Vue {
  private year: number = new Date().getFullYear()
  private activeDates: Array<object> = [
    // { date: '2019-02-16', className: 'your_customized_classname' }
  ]
  private activeClass: string = ''
  private timeForm = {}
  private curYear: number = new Date().getFullYear()
  private timeFormRules: object = {
    summerStart: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    summerEnd: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    summerMorningDate1: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    summerMorningDate2: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    summerAfternoonDate1: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    summerAfternoonDate2: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    winterStart: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    winterEnd: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    winterMorningDate1: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    winterMorningDate2: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    winterAfternoonDate1: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }],
    winterAfternoonDate2: [{ type: 'date', required: true, message: '请选择', trigger: 'change' }]
  }

  /* 切换年份 */
  nextYear(type: number) {
    if (type) {
      this.curYear += 1
    } else {
      this.curYear -= 1
    }
    this.year = this.curYear
  }

  /* 按年设置周末 */
  addWeekendCurrentYear() {
    this.removeWeekendCurrentYear()
    let theDate = dayjs(`${this.year}-01-01`)
    let isActiveDateUsingString = this.activeDates.length && typeof this.activeDates[0] === 'string'
    while (theDate.diff(theDate.endOf('year'), 'day') !== 0) {
      if (theDate.day() === 6 || theDate.day() === 0) {
        let oDate = isActiveDateUsingString ? theDate.format('YYYY-MM-DD') : { date: theDate.format('YYYY-MM-DD') }
        oDate.className = 'red'
        this.activeDates.push(oDate)
      }
      theDate = theDate.add(1, 'day')
    }
  }
  removeWeekendCurrentYear() {
    this.activeDates = this.activeDates.filter((oDate: any) => {
      let date = typeof oDate === 'string' ? oDate : oDate.date
      let day = dayjs(date).day()
      let isCurrentYear = dayjs(date).year() === this.year
      let isWeekend = [6, 0].includes(day)
      return !(isCurrentYear && isWeekend)
    })
  }

  /* 时间表单提交 */
  submitForm(timeForm: string) {
    ;(this.$refs[timeForm] as any).validate((valid: any) => {
      if (valid) {
      }
    })
  }

  /* 点击日期 */
  toggleDate(dateInfo: any) {
    console.log(dateInfo) // { date: '2010-10-23', selected: true }
    let curDate = {
      date: dateInfo.date,
      className: 'red'
    }
    this.activeDates.push(curDate)
  }
}
</script>
<style lang="scss" scoped>
.weekdays-pages {
  position: absolute;
  top: 0;
  left: 0;
   100%;
  height: 100%;
}
.weekdays-year {
  height: 62px;
  line-height: 62px;
  opacity: 1;
  background: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-align: LEFT;
  color: #262d3c;
  padding-left: 24px;
}
.weekdays-area {
   100%;
  height: calc(100% - 62px);
}
.weekdays-content {
  display: flex;
   100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
  .weekdays-left {
     calc(100% - 341px);
    overflow-y: auto;
    overflow-x: hidden;
    .weekdays-btn {
      margin: 20px 20px 10px 20px;
    }
  }
  .weekdays-right {
     383px;
    margin: 20px 0;
    border-left: solid 1px #dcdcdc;
    padding: 0 20px 20px 20px;
    margin-left: 40px;
    .summer-time-title {
      margin-bottom: 14px;
    }
    .winter-time-title {
      margin-top: 24px;
    }
    .time-text-tip {
      text-align: center;
    }
    .save-btn {
      margin-top: 20px;
    }
    ::v-deep .el-form {
      .el-form-item--small.el-form-item {
        margin-bottom: 6px;
      }
      .el-form-item__label {
        padding: 0;
        color: #595e6a;
      }
      .el-date-editor.el-input {
         100%;
      }
    }
  }
}
::v-deep .vue-calendar__container {
  background-color: #fff;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 10%);
  .calendar__title {
    justify-content: left;
    height: 32px;
    line-height: 32px;
    border-bottom: 0;
    margin-bottom: 0;
  }
  .day__weektitle {
    height: 36px;
    opacity: 1;
    background: rgba(0, 8, 25, 0.05);
  }
  .calendar__body {
    padding: 0;
    background: #ffffff;
  }
  .calendar__day {
    color: #595e6a;
    font-size: 12px;
    font-weight: 400;
  }
  .container__months {
    padding: 0;
    flex: auto;
  }
  .container__month {
    flex: 24%;
    padding: 0;
  }
  .calendar:hover {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(0 0 0 / 10%);
  }
  .calendar {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(0 0 0 / 10%);
    min-height: auto;
     100%;
    padding-left: 20px;
    margin-bottom: 8px;
    .day {
       100%;
      height: 100%;
    }
    .day:hover {
      border-radius: 0;
    }
  }
  .grey {
    color: #bfc1c5;
  }
  .red {
    color: #f6414a;
    background-color: #feeced;
    border-radius: 0;
  }
}
</style>

注意：

我的项目是vue+element+ts架构，源码仅供参考，怎么使用一目了然；还有疑问可留言，谢谢，如有错误欢迎指正。

标签：#date#placeholder#trigger#vue#form | 浏览：369 | 发布日期：

免责声明：文章转载自《【前端开发】vue项目日程表12月平铺（日历）vue-material-year-calendar插件的使用教程》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Rust 中项目构建管理工具 Cargo简单介绍DeepFaceLab小白入门（6）：脸部替换以及合成视频！下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

如何在Vue中建立全局引用或者全局命令

1 一般在vue中，有很多vue组件，这些组件每个都是一个文件。都可能需要引用到相同模块(或者插件)。我们不想每个文件都import 一次模块。 如果是基于vue.js编写的插件我们可以用 Vue.use(...) main.js  2 但是如果想添加一个全局命令，同时又让每个vue的文件都能用到怎么办？ 第一步：最好建立一个全局的命令文件例如：dire...

vue中$message与$confirm

当删除用户时，有时需要弹出一些确定信息，一般有两种形式：提示框和确认框 this.$message({ message: '确定删除该用户？', type: 'warning'}) this.$confirm('将删除该用户, 是否确定?', '提示', { co...

vue中select框初始化首次触发change事件问题

一、问题描述 通常我们的需求是改变 select 的选项才会触发 change 事件，但是意料之外，页面初始化的时候也会触发 change 事件。 二、应用场景 进编辑页初始化的时候对select赋值，又会触发change事件。 期望： 进入编辑页初始化赋值时不触发change，手动选择select时触发change。 解决方法： 设置一个标志，根据标志决...

定时任务应该这么玩

1.场景 在电商系统中会经常遇到这样一种场景，就是商品的定时上下架功能，总不能每次都手动执行吧，这个时候我们首先想到的就是利用定时任务来实现这个功能。 目前实现定时任务主要有以下几种方式： JDK自带 ：JDK自带的Timer以及JDK1.5+ 新增的ScheduledExecutorService； 第三方框架 ：使用 Quartz、elastic-j...

【改进】用Log4net建立日志记录

上一篇随笔中只使用了普通的文件读写来进行日志的写入，正如很多朋友说的，频繁的对文件进行读写会造成很多的问题，代码缺少边界控制和操作控制，没有对资源进行管理，是非常典型的bad code。 然后经过前辈们的提点，今天使用了Log4net进行日志的写入，发现非常的便捷，同时也集成了对于日志的控制，减少因为日志写入而发生的一系列不该有的错误。 网上也有很多教程，...

一道面试题 vuex缺点？

最近去面试的时候,面试官有一道题是让我阐述用vuex的优缺点,优点倒还好说,这个缺点还真没有认识到,有道友可以帮忙解惑嘛？ 2 回答 慕标5265247这种问题一般都有通用回答套路。一件挺好的东西，有什么缺点？1.成本高，即用不起。2.不用用，杀鸡焉用牛刀。3.不好用，某些情况用它解决不了4.不愿意用，有其他替代品。 反对回复2018-09-0...

最新文章

随机推荐

思享工具箱导航