vue日历任务组件

已于 2024-03-21 14:11:08 修改
阅读量196 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2024-03-21 09:59:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43947324/article/details/136898843
版权

文章目录

概要

日历任务组件，国产项目需要使用自己开发的组件，只为展示任务人当月任务条数，是否冲突，任务时间等数据展示，就自己简单写了一个

代码

<template>
  <div class="calendar-container">
    <div class="schedule-head">
      <div class="buton">
        <button @click="minMonth">《</button>
        <button @click="toToday">当月</button>
        <button @click="maxMonth">》</button>
      </div>
      <div class="yeartitle">{{ yearModel }}年{{ monthModel }}月</div>
      <ul class="rwtsxx">
        <li><span>任务</span><span class="span1"></span></li>
        <!-- <li><span>上午任务</span><span class="span2"></span></li>
        <li><span>下午任务</span><span class="span3"></span></li> -->
        <li><span>时间冲突任务</span><span class="span4"></span></li>
      </ul>
    </div>
    <div style="width: 96%; height: auto; overflow: auto; margin: 0 2%">
      <table class="bdtnone" :width="days.length * tableW + 55 + 'px'">
        <thead>
          <tr>
            <th width="55">任务人</th>
            <th
              :width="tableW"
              v-for="item in days"
              :key="item.index"
              :class="item.weekNum == '六' || item.weekNum == '日' ? 'xxr' : ''"
            >
              {{ item.name }} {{ item.weekNum }}<br />
              <!-- <span>{{ item.name }}</span
              ><br />
              <span>{{ item.weekNum }}</span
              ><br />-->
              <span
                style="
                  font-weight: normal;
                  font-size: 12px;
                  float: left;
                  padding-left: 3px;
                "
                >Am</span
              ><span
                style="
                  font-weight: normal;
                  font-size: 12px;
                  float: right;
                  padding-right: 3px;
                "
                >Pm
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableDate" :key="index">
            <td :width="tableW">{{ item.name }}</td>
            <td :colspan="days.length" style="border: none">
              <table class="tablemin" :id="item.nameId">
                <tr v-for="(items, index) in item.rwlist" :key="index">
                  <td :colspan="days.length">
                    <ul class="tableul">
                      <li
                        v-for="(itemss, indexs) in days"
                        :key="indexs"
                        @click="tcru(items.rwname)"
                        :style="{ width: tableW + 'px' }"
                      >
                        <span
                          :class="[
                            'span1',
                            items.maxdata == itemss.name && items.endTime < '12'
                              ? 'span3'
                              : '',
                            items.mindata == itemss.name &&
                            items.startTime >= '12'
                              ? 'span2'
                              : '',
                            items.chmindata <= itemss.name &&
                            items.chmaxdata >= itemss.name
                              ? 'span4'
                              : '',
                          ]"
                          v-if="
                            items.mindata <= itemss.name &&
                            items.maxdata >= itemss.name
                          "
                        >
                        </span>
                      </li>
                      <li
                        class="rwname"
                        :style="{ left: items.dataList + 'px' }"
                        :title="items.rwname"
                      >
                        {{ items.rwname }}
                      </li>
                    </ul>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
      <el-dialog
        :title="title"
        :visible.sync="open"
        width="300px"
        append-to-body
      >
        <p>
          {{ tcxx }}
        </p>

        <div slot="footer" class="dialog-footer">
          <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
          <el-button @click="cancel">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- //表单 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      tc: false,
      tcxx: "",
      yyyy: null,
      mm: null,
      dd: null,
      yearModel: null,
      monthModel: null,
      years: [],
      months: [],
      weekdays: ["日", "一", "二", "三", "四", "五", "六"],
      days: [],
      today: null, //今天
      currentDay: null, // 选中天
      scheduleList: [],
      tableW: 55,
      tableDate: [
        {
          name: "张三",
          nameId: 12,
          rwlist: [
            {
              rwname: "任务一",
              startDate: "2022-11-09 08:00:00",
              endDate: "2022-11-15  08:00:00",
              startTime: "13",
              endTime: "08",
            },
            {
              rwname: "任务二",
              startDate: "2022-11-01 08:00:00",
              endDate: "2022-11-22 08:00:00",
              startTime: "12",
              endTime: "08",
            },
            {
              rwname: "任务三",
              startDate: "2022-11-05 08:00:00",
              endDate: "2022-11-30 08:00:00",
              startTime: "12",
              endTime: "08",
            },
            {
              rwname: "任务四",
              startDate: "2022-11-02 08:00:00",
              endDate: "2022-11-25  08:00:00",
              startTime: "13",
              endTime: "14",
            },
          ],
        },
        {
          name: "李四",
          nameId: 13,
          rwlist: [
            {
              rwname: "任务一",
              startDate: "2022-11-05 08:00:00",
              endDate: "2022-11-11  08:00:00",
              startTime: "08",
              endTime: "09",
            },
            {
              rwname: "任务二",
              startDate: "2022-11-07 08:00:00",
              endDate: "2022-11-26  08:00:00",
              startTime: "08",
              endTime: "09",
            },
            {
              rwname: "任务三",
              startDate: "2022-11-01 08:00:00",
              endDate: "2022-11-25  08:00:00",
              startTime: "13",
              endTime: "14",
            },
            {
              rwname: "任务四",
              startDate: "2022-11-03 08:00:00",
              endDate: "2022-11-28  08:00:00",
              startTime: "13",
              endTime: "14",
            },
          ],
        },
        {
          name: "李四",
          nameId: 13,
          rwlist: [
            {
              rwname: "任务一",
              startDate: "2022-11-05 08:00:00",
              endDate: "2022-11-11  08:00:00",
              startTime: "08",
              endTime: "09",
            },
            {
              rwname: "任务二",
              startDate: "2022-11-07 08:00:00",
              endDate: "2022-11-26  08:00:00",
              startTime: "08",
              endTime: "09",
            },
            {
              rwname: "任务三",
              startDate: "2022-11-01 08:00:00",
              endDate: "2022-11-25  08:00:00",
              startTime: "13",
              endTime: "14",
            },
            {
              rwname: "任务四",
              startDate: "2022-11-03 08:00:00",
              endDate: "2022-11-28  08:00:00",
              startTime: "13",
              endTime: "14",
            },
          ],
        },
        {
          name: "李四",
          nameId: 13,
          rwlist: [
            {
              rwname: "任务一",
              startDate: "2022-11-05 08:00:00",
              endDate: "2022-11-11  08:00:00",
              startTime: "08",
              endTime: "09",
            },
            {
              rwname: "任务二",
              startDate: "2022-11-07 08:00:00",
              endDate: "2022-11-26  08:00:00",
              startTime: "08",
              endTime: "09",
            },
            {
              rwname: "任务三",
              startDate: "2022-11-01 08:00:00",
              endDate: "2022-11-25  08:00:00",
              startTime: "13",
              endTime: "14",
            },
            {
              rwname: "任务四",
              startDate: "2022-11-03 08:00:00",
              endDate: "2022-11-28  08:00:00",
              startTime: "13",
              endTime: "14",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    var date = new Date();
    this.yyyy = date.getFullYear();
    this.mm = date.getMonth() + 1;
    this.dd = date.getDate();
    this.initDate();
    this.getList();
  },
  methods: {
    //任务详情方法
    tcru(name) {
      this.tcxx = name;
      this.open = true;
      this.title = "任务详情";
    },
    // 任务详情关闭按钮
    cancel() {
      this.open = false;
      this.tcxx = "";
    },
    //获取当月数据
    getList() {
      const params = {
        year: this.yearModel,
        month: this.monthModel,
      };
      //对数据做处理
      for (let i = 0; i < this.tableDate.length; i++) {
        const array = this.tableDate[i].rwlist; //任务列表
        if (array != null) {
          for (let j = 0; j < array.length; j++) {
            array[j].mindata = array[j].startDate.split(" ")[0].slice(-2); //开始日期
            array[j].maxdata = array[j].endDate.split(" ")[0].slice(-2); //结束日期

            array[j].dataList = Number(array[j].mindata) * this.tableW; //任务偏移位置
          }
        }
      }

      for (let s = 0; s < this.tableDate.length; s++) {
        const array1 = this.tableDate[s].rwlist; //任务列表
        if (array1 != null) {
          var oneminarr = [];
          var endmaxarr = [];
          for (let c = 0; c < array1.length; c++) {
            oneminarr.push(array1[c].mindata); //开始日期数组
            endmaxarr.push(array1[c].maxdata); //结束日期数组
          }
          oneminarr.sort(); //开始日期排序
          endmaxarr.sort(); //结束日期排序
          for (let a = 0; a < array1.length; a++) {
            if (Number(array1[a].mindata) > Number(oneminarr[0])) {
              array1[a].chmindata = oneminarr[0];
            } else {
              array1[a].chmindata = oneminarr[1]; //最小冲突开始时间
            }
            if (
              Number(array1[a].maxdata) <
              Number(endmaxarr[endmaxarr.length - 1])
            ) {
              array1[a].chmaxdata = endmaxarr[endmaxarr.length - 1];
            } else {
              array1[a].chmaxdata = endmaxarr[endmaxarr.length - 2]; //最大冲突开始时间
            }
          }
        }
        console.log(array1 + "ccccc");
      }
    },
    // 获取当前月的天数、当前月第一天是周几
    getMonthDayNum(year, month) {
      let d = new Date(year, month, 0);
      let day = d.getDate();
      for (let i = 1; i <= day; i++) {
        d.setDate(i);
        this.days.push({
          year: year,
          month: month,
          name: i,
          weekNum: this.weekdays[d.getDay()],
        });
      }
      //根据天数计算每列宽度
      // if (this.days.length <= 29) {
      //   this.tableW = 55;
      // }
      // if (this.days.length == 30) {
      //   this.tableW = 53;
      // }
      // if (this.days.length == 31) {
      //   this.tableW = 52;
      // }
    },
    // 回到当月
    toToday() {
      this.days = [];
      this.yearModel = this.yyyy;
      this.monthModel = this.mm;

      this.getMonthDayNum(this.yearModel, this.monthModel);
    },
    // 当月
    initDate() {
      this.yearModel = this.yyyy;
      this.monthModel = this.mm;
      this.getMonthDayNum(this.yearModel, this.monthModel);
    },
    // 上一月
    minMonth() {
      this.days = [];
      this.monthModel -= 1;
      if (this.monthModel < 1) {
        this.yearModel -= 1;
        this.monthModel = 12;
      }
      this.getMonthDayNum(this.yearModel, this.monthModel);
      // this.getList()
    },
    // 下一月
    maxMonth() {
      this.days = [];
      this.monthModel += 1;
      if (this.monthModel > 12) {
        this.yearModel += 1;
        this.monthModel = 1;
      }
      this.getMonthDayNum(this.yearModel, this.monthModel);
      // this.getList()
    },
  },
};
</script>

<style lang="scss" scoped>
.schedule-head {
  overflow: hidden;
  line-height: 35px;
  margin: 10px 2%;
}

div.buton {
  float: left;
}

div.buton button {
  background: rgb(64, 158, 255);
  border: 1px solid rgb(64, 158, 255);
  color: #fff;
  cursor: pointer;
  margin-right: 15px;
  line-height: 25px;
  width: 35px;
  text-align: center;
  padding: 0;
}

div.yeartitle {
  float: left;
  font-size: 18px;
  font-weight: 700;
}

td {
  position: relative;
  border-collapse: collapse;
  border-spacing: 0;
  word-wrap: break-word;
  padding: 0;
  border-bottom: 1px solid #e9e2e2;
  text-align: center;
  background: #ffffff;
  color: #000;
}

th {
  border-collapse: collapse;
  border-spacing: 0;
  border-top: none;
  word-wrap: break-word;
  padding: 0;
  border: 1px solid #e9e2e2;
  background: #ffffff;
  color: #000;
  height: 35px;
  border-right: none;
}

th.xxr {
  // background: rgb(240, 9, 9);
  color: rgb(240, 9, 9);
}

table {
  margin: 0 auto;
  line-height: 20pt;
  border: 0;
  table-layout: fixed;
  border-spacing: 0;
  overflow: hidden;
}

table.bdtnone {
  line-height: 20pt;
  border: 1px solid #e9e2e2;
  table-layout: fixed;
  border-bottom: 0;
  border-top: 0;
  border-left: 0;
}

table.bdtnone td {
  border-left: 1px solid #e9e2e2;
}

table tr:nth-child(odd) td {
  background: #cccccc61;
}

table.tablemin tr td {
  padding: 0;
  border-left: 0;
  background: none;
}

table.tablemin tr:last-child td {
  border-bottom: none;
}

ul.tableul {
  position: relative;
  width: 110%;
  height: 30px;
  margin: 0;
  padding: 0;
}

ul.tableul li {
  float: left;
  margin: 0;
  padding: 0;
  height: 30px;
  text-align: center;
  line-height: 30px;
  list-style: none;
  border-right: 1px solid #e9e2e2;
  // background: #30313361;
}

ul.tableul li span {
  display: block;
  width: 100%;
  height: 20px;
  margin: 5px 0;
  cursor: pointer;
}

ul.rwtsxx {
  margin: 0;
  height: 35px;
  float: left;
}

ul.rwtsxx li {
  float: left;
  margin-left: 15px;
  list-style: none;
  line-height: 35px;
}

ul.rwtsxx li span {
  display: block;
  float: left;
  width: 30px;
  height: 15px;
  margin-left: 10px;
  margin-top: 10px;
}

ul.rwtsxx li span:nth-child(1) {
  width: auto;
  height: 35px;
  margin: 0;
  line-height: 35px;
}

ul.rwtsxx li span.span3 {
  background: #409eff;
  // border-radius: 25px 0 0 0;
}

ul.tableul li span.span1,
ul.rwtsxx li span.span1 {
  background: #409eff;
}

ul.rwtsxx li span.span2 {
  background: #409eff;
  // border-radius: 0 0 25px 0;
}

ul.tableul li span.span2 {
  width: 50%;
  background: #409eff;
  // border-radius: 25px 0 0 0;
  float: right;
}

ul.tableul li span.span3 {
  width: 50%;
  background: #409eff;
  // border-radius: 0 0 25px 0;
  float: left;
}

ul.tableul li span.span4,
ul.rwtsxx li span.span4 {
  background: #f33030bf;
}

ul.tableul li.rwname {
  position: absolute;
  top: 0px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  border: 0;
  background: none;
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  cursor: pointer;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 7px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 7px;
  //background-color: #8c8c8c;
  background-color: rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border: 0;
}
</style>

小结

简单的日历组件

朝阳下的迷雾
关注
Vue3 - 最新详细实现日历待办事项功能，日历任务列表管理、日历式日程安排组件、员工日历任务列表、待办任务事项，在日历中列出某个日期中该做什么事情，日历事项任务规划，仿飞书日历日程安排（详细示例代码
王佳斌
06-14 4210
vue3，日历插件，日历插件排班表排课表，fullcalendar，任务管理日历，仿飞书任务待办管理日历，fullcalendar怎么自定义视图切换和翻页按钮，如何修改默认样式，覆盖默认样式，待办任务管理日历，事项列表，待办清单，fullcalendar官方中文文档，日历待办，日历日程管理控件，日程表，月视图，日视图，周视图，怎么不用它原来的按钮而是自定义，日程安排，详细示例代码，飞书日历，日程任务管理，自定义头部，视图选择，事件插入，编辑事件，日历插件排班表排课，vue把列表放到日历中，vue3日历组件农
Vue2 - 最新详细实现日历待办事项功能，日历任务列表管理、日历式日程安排组件、员工日历任务列表、待办任务事项，在日历中列出某个日期中该做什么事情，日历事项任务规划，仿飞书日历日程安排（详细示例代码
最新发布
王佳斌
06-14 3052
vue，nuxt，日历插件，日历插件排班表排课表，fullcalendar，日历待办，日历日程管理控件，日程表，月视图，日视图，周视图，怎么不用它原来的按钮而是自定义，日程安排，详细示例代码，飞书日历，日程任务管理，自定义头部，任务管理日历，仿飞书任务待办管理日历，fullcalendar怎么自定义视图切换和翻页按钮，如何修改默认样式，覆盖默认样式，待办任务管理日历，事项列表，待办清单，fullcalendar官方中文文档，月视图title内容过长显示不全，逾期的任务怎么标红，fullCalendar的使用
了解Vue中日历插件Fullcalendar
强者惜字如金，弱者废话连篇！
01-18 4568
了解Vue中日历插件Fullcalendar
【Vue+Element】实现日历任务展示
TomPig_1024
04-05 2051
使用Vue+Element实现简约日历以及任务
Vue 2.0 入门系列（5）组件实例之任务列表
weixin_33737774的博客
04-26 184
什么是组件 组件，其实很好理解，就是造轮子。比如，这里是一个任务列表： <div id="tasklist"> <ul> <li>做作业</li> <li>写报告</li> <li>读书</li...
使用vue组件写简单的任务管理器todolist
xgxgxgc11399zz的博客
10-13 879
实例 text.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TODO</title> <link rel="stylesheet" href="../css/style1.css"> <link rel="stylesheet" href="../font/dele/dele.cs
Vue项目实战——实现一个任务清单【基于 Vue3
2401_84419493的博客
04-29 344
Vue3.x_任务清单。
vue3+ElementPlus cron组件
04-09
Vue3 + ElementPlus Cron 组件是前端开发中的一个强大工具，它允许开发者在Web应用中实现复杂的定时任务调度功能。这个组件基于Vue3框架，并利用了ElementPlus UI库的组件和设计风格，为用户提供了友好的界面和丰富...
vuefullcalendar一个基于vuejs的全日历组件
08-10
这个组件通常用于展示和管理时间相关的事件，如会议、预约、任务等，用户可以通过日历界面进行添加、编辑和删除操作。 Vue FullCalendar的特性包括但不限于： 1. **自定义事件**：你可以通过Vue的数据绑定机制，...
用vue设计一个日历表
01-18
日历的功能，我们会经常用到，且逻辑比较复杂，小算法较多，花了半天时间写了个，特此详记。 先贴图 功能阐述：返回本月不多说，设置工作日和节假日是为了公司制度需要，后台会有假日表来记录。 为了适应于vue框架，很多jquery的方法用不上，例如addClass及removeClass，所以可能某些地方做的比较繁琐。 <!-- 年份 月份 --> <i class=el-icon-arrow-left @click=pickPre(curren
Calendar:使用vue创建一个日历项目
04-19
日历 日历和待办事项列表可以添加 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。 Vscode调试配置 { "version": "0.2.0", "configu
vue工作日历的组件
高艳艳的博客！
04-27 400
【代码】vue工作日历的组件。
vue日程管理 vue日历日程 日程提醒
maoge_666的博客
04-22 1100
vue日程管理 vue日历日程 日程提醒
Vue中如何进行日历展示与操作？
Java徐师兄的博客
06-14 3579
vue-calendar 支持自定义主题和国际化。我们可以通过为组件传递选项来实现。在上面的示例中，我们通过为组件传递选项来自定义主题。我们定义了dayPopover和day选项，分别用于设置日历中的弹出框和日期样式的颜色。在本文中，我们介绍了如何使用 vue-calendar 和手动编写代码来实现日历功能。使用 vue-calendar 可以快速轻松地实现日历功能，并且支持自定义主题和国际化。手动编写代码可以更加灵活地控制日历的展示和操作，但需要一些额外的工作。
vue日历上每天的日程安排表
zhourongxiang1的博客
03-30 2036
结合了vue-calendar-component和Element UI的table组件。'上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1517 弄''上海市普陀区金沙江路 1519 弄''上海市普陀区金沙江路 1516 弄'点击一天，切换table数据。
VUE篇之日历组件
ae_pppppp的博客
12-13 7844
手写日历组件
vue日历显示当天发生的事情
崔小崔的博客
11-18 1608
自制日历，在日历中显示当天发生的事情
vue3.0项目管理时间轴（计划任务）自定义组件
m0_62949703的博客
11-11 1849
基于项目管理开发需求而封装，可以灵活的输入时间线，并在时间线上，进行不同的计划安排，简单直观，组件引用了antd3.0组件库的popover组件，逻辑清晰简单，可自行更改！希望能够帮助到大家！
使用vue编写一个日期时间选择弹窗
09-10
可以使用 Vue.js 内置的组件库 vue-bootstrap 中的 Datepicker 组件来实现日期时间选择弹窗。首先需要在项目中安装 vue-bootstrap，然后在组件中引入 Datepicker 组件，并在 template 中使用该组件。可以使用 v-model 指令来绑定选择的日期时间值，并通过事件绑定来实现弹窗的显示和隐藏。 示例代码： ```html <template> <div> <b-button v-on:click="showPicker = true" class="m-2"> {{ selectedDate }} </b-button> <b-modal v-model="showPicker" title="Select a date"> <b-form-datepicker v-model="selectedDate" @input="showPicker = false"></b-form-datepicker> </b-modal> </div> </template> <script> import { BModal, BFormDatepicker } from 'vue-bootstrap' export default { components: { BModal, BFormDatepicker }, data() { return { selectedDate: new Date(), showPicker: false } } } </script> ``` 这里使用了 vue-bootstrap 中的 BModal 组件实现弹窗，BFormDatepicker 组件实现日期时间选择。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值