首页 > 其他分享 >vue fullcalendar日历拖拽插入整理

vue fullcalendar日历拖拽插入整理

时间:2022-12-09 14:11:33浏览次数:42  
标签:vue fullcalendar 日历 视图 item res date 拖拽

<!--交易时间管理 -->
<template>
  <div class="container">
    <Row>
      <Col span="6">
        <div class="module-title">假期列表</div>
        <div class="date-box" id="list-group-item">
          <div
            class="flex-b box list-group-item"
            v-for="item in entrynameList"
            :key="item.name"
          >
            <div>{{ item.projectNo }}</div>
            <div class="circle" :class="item.color">
              {{ item.projectName }}
            </div>
          </div>
        </div>
      </Col>
      <Col span="18">
        <FullCalendar ref="fullCalendar" :options="calendarOptions" />
      </Col>
    </Row>
  </div>
</template>
  
  <script>
import { selectMyInfo, insertInfo, queryList } from "@/api/my-api.js";
import * as moment from "moment";
import "@fullcalendar/core/vdom"; // solves problem with Vite
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
export default {
  name: "TradingTimeManage",
  components: {
    FullCalendar,
  },
  data() {
    return {
      eventEl: null,
      calendarOptions: {
        //?拖拽日历配置
        plugins: [dayGridPlugin, interactionPlugin],
        firstDay: 1, // 把每周设置为从周一开始
        header: {
          // 日历头部
          left: "prev,next today",
          center: "title",
          right: "custom",
        },
        /* 设置按钮文字 */
        buttonText: {
          today: "今天",
        },
        initialView: "dayGridMonth",
        locale: "zh-cn", //? 配置中文
        selectable: true, //可编辑
        // dayMaxEvents: true,
        slotMinutes: 15,
        editable: false, // 日历上是否可拖拽
        droppable: true,
        dropAccept: ".list-group-item",
        drop: this.drop,
        customButtons: {
          prev: {
            // this overrides the prev button
            text: "PREV",
            click: () => {
              this.prevMethod();
            },
          },
          next: {
            // this overrides the next button
            text: "PREV",
            click: () => {
              this.nextMethod();
            },
          },
          today: {
            text: "今天",
            click: () => {
              this.todayMethod();
            },
          },
        },
        events: [],
      },
      start: null,
      end: null,
      calendarEvents: [],
      entrynameList: [],
    };
  },
  mounted() {
    let _this = this;
    var containerEl = document.getElementById("list-group-item");
    // 初始化外部事件
    new Draggable(containerEl, {
      itemSelector: ".list-group-item",
    });
    _this.holidayEvent(); // 调用获取视图活动数据方法
    _this.entryname();
  },
  methods: {
    /** 上个月  */
    prevMethod() {
      this.$refs.fullCalendar.getApi().prev(); // 更新上个月视图
      this.holidayEvent(); // 调用获取视图活动数据方法
    },
    /** 下个月  */
    nextMethod() {
      this.$refs.fullCalendar.getApi().next(); // 更新下个月视图
      this.holidayEvent(); // 调用获取视图活动数据方法
    },
    /** 今天  */
    todayMethod() {
      this.$refs.fullCalendar.getApi().today(); // 更新今天视图
      this.holidayEvent(); // 调用获取视图活动数据方法
    },
    /** 获取视图活动数据方法 */
    holidayEvent() {
      // 获取当前视图日历的范围
      let _this = this;
      let time =
        _this.$refs.fullCalendar.getApi().currentDataManager.state.dateProfile
          .renderRange;
      _this.start = Date.parse(moment(time.start).format()); // 视图开始时间
      _this.end = Date.parse(moment(time.end).format()); // 视图结束时间
      // 从接口获取数据,更新日历视图活动
      selectMyInfo({ start: _this.start, end: _this.end }).then((res) => {
        if (res.code === 200) {
          const data = res.result;
          const arr = [];
          data.forEach((item) => {
            console.log(item);
            const obj = {
              id: item.id,
              title: item.title,
              start: item.workdate,
              end: item.dayEnd,
              allDay: true,
              backgroundColor: item.name === "工作日" ? "green" : "#3788d8",
            };
            arr.push(obj);
          });
          _this.calendarOptions.events = arr;
        }
      });
    },
    drop(date, allDay) {
      let typeNumber = null;
      const firstChildName = null;
      const obj = {
        projectId: date.draggedEl.firstChild.innerHTML,
        workdate: date.dateStr, // 开始时间
        // dayEnd: Date.parse(
        //   moment(date.dateStr)
        //     .add(date.draggedEl.lastChild.innerHTML, "days")
        //     .format()
        // ), // 结束时间
        // dayNum: date.draggedEl.lastChild.innerHTML,
      };
      // 拖拽后,新增日历活动接口调用
      insertInfo([obj]).then((res) => {
        if (res.code === 200) {
          const data = res.data;
          this.holidayEvent(); // 调用获取视图活动数据方法
        }
      });
    },
    //项目列表
    entryname() {
      let _this = this;
      queryList({ id: "1" }).then((res) => {
        _this.entrynameList = res.result;
      });
    },
  },
};
</script>
  
  <style lang="less" scoped>
.circle {
  background-color: #3788d8;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}
.blue {
  background-color: #3788d8;
}
.green {
  background-color: green;
}
.date-box {
  //border: 1px solid #ccc;
  border-radius: 5px;
}
.box {
  margin-top: 15px;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 5px;
}

.is-selected {
  color: #1989fa;
}
</style>
  
  

 

标签:vue,fullcalendar,日历,视图,item,res,date,拖拽
From: https://www.cnblogs.com/hged/p/16968773.html

相关文章

  • vue3 使用vue3-video-play
    1.安装版本"vue3-video-play":"^1.3.1-beta.6",2.在main.ts中进行组件注册import{createApp}from'vue'importAntdfrom'ant-design-vue'importAppfrom'......
  • vue之vue-router路由
    vue-router简介:VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路......
  • vue之element-ui
    注意:命令行都要使用管理员模式运行第一步:创建vue工程下面处理项目,创建安装依赖等,都是在命令行进行处理。创建一个工程(vue)vueinitwebpackvue安装依赖,我们需要安装vue-ro......
  • vue3 Vuex使用
    首先src下要有src\store\index.jsindex.js先引入creatStoreimport{createStore}from'vuex'exportdefaultcreateStore({state(){return{......
  • 基于Python+Django+Vue+MYSQL的社团管理系统
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • Avue 在table表中悬浮显示数据
      <templateslot-scope="scope"slot="details"><el-popovertrigger="hover"placement="top"><!--客户名称、原数据、更新后数据-......
  • 原生开发小程序 和 wepy 、 mpvue 对比
    1.三者的开发文档以及介绍:原生开发小程序文档:​​点此进入​​​ wepy开发文档:​​​点此进入​​​ mpvue开发文档:​​​点此进入​​2.三者的简单对比:以下用一张图来......
  • vue 搜索框高亮
    核心代码keySign(title){lets=this.text;//搜索框的值(您要标红的关键字)varstr=title;//列表标题(原文本)//去除中间空格且字符之......
  • 第一个vue-cli程序
    什么是vue-clivue-cli官方提供的一个脚手架。用于快速生成一个vue的项目模板预先定义好的目录结构及基础代码,就好比在创建Maven项目时可以选择创建一个骨架项目......
  • vue3.x keep-alive 写法
     <template><divid="app"class="container"><router-viewv-slot="{Component}"><keep-alive:include="['peopleList','addressList'......