Vue 日历日程组件

已于 2023-09-14 17:04:08 修改
阅读量351 收藏 2
点赞数
文章标签： vue.js javascript 前端
于 2023-09-14 16:59:36 首次发布

Vue日历日程组件

原文链接 https://www.jb51.net/article/212767.htm
与原文对比修改了太多，不作详细描述

效果预览

在这里插入图片描述

vue组件代码

<template>
  <div class="wh-container">
    <div class="wh-content-all">
      <div class="wh-top-change">
        <span class="wh-arrow-left">
          <i @click="PreYear" class="el-icon-d-arrow-left"></i>
          <i @click="PreMonth" class="el-icon-arrow-left"></i>
        </span>
        <span class="wh-content-li">{{ dateTop }}</span>
        <span class="wh-arrow-right">
          <i @click="NextMonth" class="el-icon-arrow-right"></i>
          <i @click="NextYear" class="el-icon-d-arrow-right"></i>
        </span>
      </div>
      <div class="wh-content">
        <div class="wh-content-item" v-for="(tag,index) in textTop" :key="index">
          <div class="wh-top-tag">{{ tag }}</div>
        </div>
        <div
          class="wh-content-item"
          v-for="(item,index) in dayList" :key="index"
          @click="clickDay(item,index)">
          <div
            class="date-box"
            :class="{'wh-isToday':item.isToday,'wh-choose-day':item.chooseDay,'holiday':item.holiday}">
            <div
              class="wh-item-date"
              :class="{'wh-other-dayHide':item.otherMonth!=='nowMonth','wh-want-dayHide':item.dayHide}">
              {{ item.id }}
            </div>
            <div class="date-sign">
              <i v-if="item.leave"
                 :style="[{background:(item.leave)?'red':''}]"
                 class="sign"></i>
              <i v-if="item.meeting"
                 :style="[{background:(item.meeting)?'rgb(244 184 73)':''}]" class="sign"></i>
              <i v-if="item.business"
                 :style="[{background:(item.business)?'#639af1':''}]"
                 class="sign"></i>
              <i v-if="item.egress"
                 :style="[{background:(item.egress)?'rgb(145,204,117)':''}]"
                 class="sign"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="tags">
        <span><i style="background-color:red;"></i>请假</span>
        <span><i style="background-color:rgb(244,184,73);"></i>会议</span>
        <span><i style="background-color:#639af1;"></i>出差</span>
        <span><i style="background-color:rgb(145,204,117);"></i>外出</span>
      </div>
    </div>
  </div>
</template>
<script>
import timeUtil from "./calendar.js";
import {dateFormat} from "@/util/date";

export default {
  name: "Calendar",
  components: {},
  data() {
    return {
      textTop: ["日", "一", "二", "三", "四", "五", "六"],
      scheduleDialogVisible: false, // 新建日程弹窗
      dayList: [],
      historyChose: [],
      dateTop: "",
      currentDate: new Date(),//当前日期
      leave: [], // 当前月份 请假 日期列表
      meeting: [], // 当前月份 会议 日期列表
      business: [], // 当前月份 出差 日期列表
      egress: [], // 当前月份 外出 日期列表
      attendance: [], // 当前月份 日程列表
      holiday: [], // 节假日
      scheduleEditDialogVisible: false, // 修改日程弹窗
      scheduleData: [] // 修改日程数据
    };
  },
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    // 查询日程
    getUserAttendance() {
      this.leave = [
        "2023-09-07",
        "2023-09-08",
        "2023-09-09"
      ]
      this.meeting = [
        "2023-09-08",
        "2023-09-09"
      ]
      this.business = [
        "2023-09-08"
      ]
      this.egress = [
        "2023-09-08",
        "2023-09-07"
      ]
      this.holiday = [
        "2023-09-30",
        "2023-09-29",
        "2023-09-24",
        "2023-09-23",
        "2023-09-17",
        "2023-09-16",
        "2023-09-10",
        "2023-09-09",
        "2023-09-03",
        "2023-09-02"
      ] // 节假日
      this.setDaySign()
    },
    // 点击日期
    clickDay(item) {
      if (item.otherMonth == "preMonth") {
        // 切换至上个月
        this.PreMonth(item.date)
      } else if (item.otherMonth == "nextMonth") {
        // 切换至下个月
        this.NextMonth(item.date)
      } else if (item.otherMonth == "nowMonth") {
        // 如果有日程，则查询
        if (item.leave || item.meeting || item.business || item.egress) {
          // this.searchUserAttendanceList(item)
        }
      }
    },
    PreMonth() {
      this.currentDate = timeUtil.getOtherMonth(this.currentDate, "preMonth");
      this.getList();
    },
    NextMonth() {
      this.currentDate = timeUtil.getOtherMonth(this.currentDate, "nextMonth");
      this.getList();
    },
    PreYear() {
      this.currentDate = timeUtil.getOtherYear(this.currentDate, "preYear");
      this.getList();
    },
    NextYear() {
      this.currentDate = timeUtil.getOtherYear(this.currentDate, "nextYear");
      this.getList();
    },
    async getList() {
      this.dateTop = dateFormat(this.currentDate, "yyyy年MM月");
      this.dayList = timeUtil.getMonthList(this.currentDate);
      // 获取日期后，查询日程
      this.getUserAttendance()
    },
    // 设置日程标记
    setDaySign() {
      for (let index in this.dayList) {
        let item = this.dayList[index]
        item.leave = this.leave.indexOf(item.date) > -1; // 请假
        item.meeting = this.meeting.indexOf(item.date) > -1; // 会议
        item.business = this.business.indexOf(item.date) > -1; // 出差
        item.egress = this.egress.indexOf(item.date) > -1; // 外出
        item.holiday = this.holiday.indexOf(item.date) > -1; // 节假日
      }
      this.dayList.splice(0, 0)
    }
  },
};
</script>
<style scoped lang="scss">
.wh-container {
  padding: 10px;
  height: calc(100% - 20px);

  .wh-content-all {
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    height: calc(100% - 42px);

    .wh-top-change {
      display: flex;
      justify-content: space-around;
      align-items: center;

      span {
        cursor: pointer;
        display: flex;
        color: $main-color-blue;
        font-weight: 700;
        font-size: 16px;
        justify-content: center;
        align-items: center;
        height: 48px;
      }

      .wh-content-li {
        cursor: auto;
        width: 140px;
      }

      .wh-arrow-left, .wh-arrow-right {
        color: #999;
        flex: 1;

        &:active {
          color: $main-color-blue;
        }

        i {
          margin: 0 5px;
        }
      }
    }

    .wh-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      height: calc(100% - 48px - 20px);

      .wh-content-item {
        width: 14%;
        font-size: 16px;
        color: #333;
        //height: 16%;
        display: flex;
        align-items: center;

        .date-box {
          height: 30px;
          width: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          cursor: pointer;
          border-radius: 4px;

          &.holiday {
            background: rgba(254, 245, 245, 1);
            color: rgb(235, 51, 51);
          }

          &:hover {
            background: rgba(29, 128, 254, 0.1);
          }

          &.wh-isToday {
            background: rgba(29, 128, 254, 0.1);
            //background: $main-color-blue;
            //border-radius: 4px;
            //color: black;
          }

          .wh-item-date {
            width: 30px;
            //height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
          }

          .date-sign {
            //width: 10px;
            height: 6px;
            display: flex;
            //flex-direction: column;
            justify-content: center;
            align-items: center;

            .sign {
              display: inline-block;
              width: 4px;
              height: 4px;
              margin: 1px;
              border-radius: 2px;
            }
          }
        }
      }
    }

    .tags {
      font-size: 12px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        padding: 0 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          display: inline-block;
          width: 4px;
          height: 4px;
          border-radius: 2px;
          margin-right: 5px;
        }
      }
    }
  }
}

.calendar-btm {
  cursor: pointer;
  height: 45px;
  color: $main-color-blue;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid $main-color-blue;
  border-radius: 7px;

  i {
    margin-right: 10px;
  }
}

.wh-content:first-child .wh-content-item-tag,
.wh-content:first-child .wh-content-item {
  color: #ddd;
  font-size: 16px;
}

.wh-top-tag {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wh-content-item .wh-other-dayHide {
  color: #bfbfbf;
}

.wh-content-item .wh-want-dayHide {
  color: #bfbfbf;
}


.wh-content-item .wh-choose-day {
  background: #fff;
  color: black;
  //border-radius: 100px;
}
</style>

js代码 calendar.js

import {dateFormat} from "@/util/date";

export default {
  // 当某月的天数
  getDaysInOneMonth(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const d = new Date(year, month, 0);
    return d.getDate();
  },
  // 向前空几个
  getMonthweek(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const dateFirstOne = new Date(year + '-' + month + '-1');
    return this.sundayStart ?
      dateFirstOne.getDay() == 0 ? 7 : dateFirstOne.getDay() :
      dateFirstOne.getDay() == 0 ? 6 : dateFirstOne.getDay() - 1;
  },
  /**
   * 获取当前日期上个月或者下个月
   */
  getOtherMonth(date, str = 'nextMonth') {
    const timeArray = this.dateFormat(date).split('-');
    const year = timeArray[0];
    const month = timeArray[1];
    const day = timeArray[2];
    let year2 = year;
    let month2;
    if (str === 'nextMonth') {
      month2 = parseInt(month) + 1;
      if (month2 == 13) {
        year2 = parseInt(year2) + 1;
        month2 = 1;
      }
    } else {
      month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
    }
    let day2 = day;
    const days2 = new Date(year2, month2, 0).getDate();
    if (day2 > days2) {
      day2 = days2;
    }
    if (month2 < 10) {
      month2 = '0' + month2;
    }
    if (day2 < 10) {
      day2 = '0' + day2;
    }
    const t2 = year2 + '-' + month2 + '-' + day2;
    return new Date(t2);
  },
  /**
   * 获取当前日期上一年或者下一年
   */
  getOtherYear(date, str = 'nextYear') {
    let year = new Date(date).getFullYear();
    let month = new Date(date).getMonth() + 1;
    let day = new Date(date).getDate();
    let month2;
    if (str === 'nextYear') {
      year = parseInt(year) + 1;
    } else {
      year = parseInt(year) - 1;
    }
    let days2 = new Date(year, month, 0).getDate();
    if (day > days2) {
      day = days2;
    }
    if (month < 10) {
      month2 = '0' + month;
    }
    if (day < 10) {
      day = '0' + day;
    }
    const t2 = year + '-' + month2 + '-' + day;
    return new Date(t2);
  },
  // 上个月末尾的一些日期
  getLeftArr(date) {
    const arr = [];
    const leftNum = this.getMonthweek(date);
    const num = this.getDaysInOneMonth(this.getOtherMonth(date, 'preMonth')) - leftNum + 1;
    const preDate = this.getOtherMonth(date, 'preMonth');
    // 上个月多少开始
    for (let i = 0; i < leftNum; i++) {
      const nowTime = this.dateFormat(new Date(preDate.setDate(num + i)));
      arr.push({
        id: num + i,
        date: nowTime,
        isToday: false,
        otherMonth: 'preMonth',
      });
    }
    return arr;
  },
  // 下个月末尾的一些日期
  getRightArr(date) {
    const arr = [];
    const nextDate = this.getOtherMonth(date, 'nextMonth');
    const leftLength = this.getDaysInOneMonth(date) + this.getMonthweek(date);
    const _length = 7 - leftLength % 7;
    for (let i = 0; i < _length; i++) {
      const nowTime = this.dateFormat(new Date(nextDate.setDate(i + 1)));
      arr.push({
        id: i + 1,
        date: nowTime,
        isToday: false,
        otherMonth: 'nextMonth',
      });
    }
    return arr;
  },
  // format日期
  dateFormat(date) {
    return dateFormat(date, "yyyy-MM-dd")
  },
  // 获取某月的列表不包括上月和下月
  getMonthListNoOther(date) {
    const arr = [];
    const num = this.getDaysInOneMonth(date);
    const toDay = this.dateFormat(new Date());
    for (let i = 0; i < num; i++) {
      const nowTime = this.dateFormat(new Date(date.setDate(i + 1)));
      arr.push({
        id: i + 1,
        date: nowTime,
        isToday: toDay == nowTime,
        otherMonth: 'nowMonth',
      });
    }
    return arr;
  },
  // 获取某月的列表 用于渲染
  getMonthList(date) {
    return [...this.getLeftArr(date), ...this.getMonthListNoOther(date), ...this.getRightArr(date)];
  },
  // 默认是周一开始
  sundayStart: true, // 从周日开始
};

时间格式化函数 dateFormat

/**
 * 日期格式化
 */
export function dateFormat(date, format) {
  format = format || 'yyyy-MM-dd hh:mm:ss';
  if (date !== 'Invalid Date') {
    let o = {
      "M+": date.getMonth() + 1, //month
      "d+": date.getDate(), //day
      "h+": date.getHours(), //hour
      "m+": date.getMinutes(), //minute
      "s+": date.getSeconds(), //second
      "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
      "S": date.getMilliseconds() //millisecond
    }
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (let k in o)
      if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1,
          RegExp.$1.length === 1 ? o[k] :
            ("00" + o[k]).substr(("" + o[k]).length));
    return format;
  }
  return '';
}
阿树~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用Fullcalendar日历开发日程安排代码完整版 (项目示例)
09-01
Vue中使用Fullcalendar日历开发日程安排代码完整版(项目示例)
推荐全功能Vue 3日历组件：FullCalendar Vue 3 Component
gitblog_00046的博客
05-14 377
推荐全功能Vue 3日历组件：FullCalendar Vue 3 Component 项目地址:https://gitcode.com/fullcalendar/fullcalendar-vue 项目介绍 FullCalendar Vue 3 Component是专为Vue 3框架设计的官方日历组件。它集成了强大的FullCalendar库，提供了一套完整且灵活的日程管理解决方案。通过简单的配置...
打造你的专属Vue组件：基于FullCalendar超实用“日程任务管理组件”实战
最新发布
小猿同学628的博客
06-02 1011
在现代Web应用中，日程管理是一个常见而又关键的功能，它帮助用户高效安排和追踪日常任务及会议。Vue.js作为一个流行的前端框架，以其简洁的语法和强大的组件化能力深受开发者喜爱。本文将手把手教你如何利用Vue 3和FullCalendar库构建一个功能丰富、易用的日程任务管理组件，让你的应用瞬间提升日程管理体验。
vue 自定义月日历日程组件（MSchedule）
weixin_41277748的博客
02-11 5509
效果图 组件的使用 日程内容可以自定义 状态对应颜色可以自定义 <MSchedule :list="plan" @handleDetail="handleDetail" @chooseEntireCard="chooseEntireCard" @changeMonth="changeMonth"> <template v-slot:card="{row}"> <span>时段：{{ row..
Vue+Element-ui实例_日历排班(自定义)
徐小硕—心之所向，素履以往
06-25 8224
在日常开发需求中，可能会遇到给员工进行排班的需求，如果只是在table表格中显示，会显得枯燥、不直观，今天我们就来写一个可以自定义的日历排班功能，用的是vue2+element-ui。
fullCalendar日程表在Vue项目中的应用
绝对零度的博客
05-06 5489
fullCalendar日程表在Vue项目中的应用 fullCalendar相关API 使用fullCalendar插件在项目中实现日程排版，支持天、月日程转换，自定义事件 页面布局 通过按钮切换天与月视图的转换，天视图回显具体的时分排版项目，月视图回显缩略信息 <div class="order-day-calendar h-100 clearfix"> <div id='calendar' class="h-100" @contextmenu.prevent.stop="st
Vue制作一个日程表
热门推荐
安的博客
05-23 1万+
自己的代码功底实在太弱，所以想要通过重写这种组件来锻炼一下能力。 我在项目中使用了element，这个日程表参照了full-calendar 和 element 的日历组件。 日期时间是使用了moment，http://momentjs.cn/，使用它来操作时间非常方便。 结果如下， 主要是做出来了一个日历及日程表的形式，下一篇想在上面做出一些事件等。 <template&...
基于Vue3和TypeScript的日历日程组件设计源码
05-31
日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript...该项目是一个基于Vue3和TypeScript的日历日程组件，旨在提供一个高效、稳定的日程管理解决方案。
VUE实现日历组件功能
08-31
events是该日历组件唯一接受的参数，用于表示该日历上的所有日程事件。events的格式如下： ``` events = [ { title: 'event1', start: '2016-07-01', YOUR_DATA: {} }, { title: 'event2', start: '2016-07-...
eventCalendar:Vue日程组件
05-16
hansinCalendar功能：生成日历日程排列1.0:2.0:3.0: 完成版，加入了Elemen_ui, store, http-request 使用需谨慎抽空把这个组件独立出来放到npm方便使用eventList = [ { id: 5018500790, _id: 5018500790, title: '3-...
vue实现一个炫酷的日历组件
10-17
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
亲自动手实现vue日历控件
10-16
主要记录了亲自动手实现vue日历控件的详细过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue原生方式实现日历组件
hyduan_h5的博客
06-02 6539
vue原生实现日历组件
vue日历日程组件
山谷里的杂货铺
12-15 4878
要求：开发一个日历日程组件：包含回到今天、选择年度、选择月份及日期切换等功能，数据为静态数据。 效果： 代码： <template> <div class="calendar-container"> <div class="schedule-head"> <div class="today" @click="toToday">回到今天</div> <div class="select o..
VUE篇之日历组件
ae_pppppp的博客
12-13 6238
手写日历组件
vue日历上每天的日程安排表
zhourongxiang1的博客
03-30 1585
结合了vue-calendar-component和Element UI的table组件。'上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1517 弄''上海市普陀区金沙江路 1519 弄''上海市普陀区金沙江路 1516 弄'点击一天，切换table数据。
vue 自己捣鼓周日程日历组件
weixin_42023748的博客
11-01 1031
通过需求，超级课程表app这款软件其中课表和这个需求很像，只不过这个需求第一列的时间段是自定义的，不是上午下午两个，但是原理都差不多。原本想找一些第三方插件使用，由于时间充足，而且自己也想封装成一个组件方便以后或许会碰到类似的需求，于是自己手动写了一个日程日历。需求：想要一个周日程表，记录每天的计划，点击可查看详情。可自定义时间段通过后台获取时间段显示。：数据量大时，格子显示太长问题，这里进行了优化，如果超过2个就进行展开与收缩操作。js代码 weekTools.js。
VUE fullcalendar 制作排班
weixin_43860369的博客
05-29 2277
1.首先在已创建好的VUE项目下用使用命令行安装好fullcalendar依赖，整行输入enter就行。2.安装日历格子组件（daygrid），事件监听\拖拽组件(interaction)此时便已创建好排班日历了，在浏览器即可看到界面。3.在需要使用组件的VUE页面引入组件。
vue2 实现日历组件，包含新增日程
qq_46143850的博客
06-09 2277
实现的最终效果： 模板 html 部分 js 部分 css 部分
vue 自定义月日历日程组件
08-20
对于自定义月日历日程组件，你可以使用Vue.js框架来实现。下面是一个简单的示例代码，可以帮助你开始构建这个组件： ```vue <template> <div class="calendar"> <div class="header"> <button @click="previousMonth"><</button> <h2>{{ currentMonth }}</h2> <button @click="nextMonth">></button> </div> <div class="days"> <div v-for="day in days" :key="day" class="day">{{ day }}</div> </div> <div class="events"> <div v-for="event in events" :key="event.id" class="event"> <p>{{ event.date }}</p> <p>{{ event.title }}</p> </div> </div> </div> </template> <script> export default { data() { return { currentMonth: '', days: [], events: [ { id: 1, date: '2022-01-05', title: 'Event 1' }, { id: 2, date: '2022-01-15', title: 'Event 2' }, { id: 3, date: '2022-01-20', title: 'Event 3' }, ], }; }, mounted() { this.setCurrentMonth(); this.setDays(); }, methods: { setCurrentMonth() { const date = new Date(); const options = { month: 'long', year: 'numeric' }; this.currentMonth = date.toLocaleDateString('en-US', options); }, setDays() { const date = new Date(); const year = date.getFullYear(); const month = date.getMonth(); const daysInMonth = new Date(year, month + 1, 0).getDate(); this.days = Array.from({ length: daysInMonth }, (_, index) => index + 1); }, previousMonth() { // 实现切换到上一个月的逻辑 }, nextMonth() { // 实现切换到下一个月的逻辑 }, }, }; </script> <style> .calendar { /* 样式 */ } .header { /* 样式 */ } .days { /* 样式 */ } .day { /* 样式 */ } .events { /* 样式 */ } .event { /* 样式 */ } </style> ``` 这个例子中的日历组件包含一个头部，显示当前月份，以及上一个月和下一个月的按钮。接下来是一个天数的区域，以及事件的区域。你可以根据自己的需求来自定义样式。 这个示例中的事件是固定的，你可以根据你的具体需求从后端获取事件数据，并在`events`数组中进行动态渲染。 在`previousMonth`和`nextMonth`方法中，你可以实现切换到上一个月和下一个月的逻辑，例如更新`currentMonth`和`days`数据，以及获取新月份的事件数据。 希望这个示例能帮到你！如果有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值