<!--交易时间管理 --> <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