在Vue框架下使用Fullcalendar

1.安装依赖

npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/interaction

2.页面引用

<template><div class="rili"><FullCalendarref="fullCalendar"style="height: 100%":options="calendarOptions"></FullCalendar></div>
</template><script>
// 引入日历组件
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {name: "dispatch",components: {FullCalendar,},data() {return {calendarOptions: {timeGridPlugin: true, //可显示每日时间段height: 1000,plugins: [dayGridPlugin, interactionPlugin],headerToolbar: {left: "prev,next today",center: "title",right: "dayGridMonth,dayGridWeek,dayGrid",// right: 'agendaWeek,dayGridWeek,dayGrid'},buttonText: {// 设置按钮today: "123",month: "月",week: "周",dayGrid: "天",},allDaySlot: false,editable: true,selectable: true,navLinks: true,displayEventTime: true,displayEventEnd: true, //所有视图显示结束时间initialView: "dayGridMonth", // 设置默认显示月，可选周、日dateClick: this.handleDateClick,eventClick: this.handleEventClick,eventsSet: this.handleEvents,select: this.handleDateSelect,// timezone// 设置日程events: [{id: 1,title: "09:30~11:30 小破孩",start: "2021-07-11",end: "2021-07-13",color: "#f08f00",},{id: 2,title: "9:30~14:30 项目会议",start: "2021-07-14",end: "2021-07-14",color: "#6bb377",},],eventColor: "#f08f00", // 修改日程背景色locale: "zh-cn", // 设置语言weekNumberCalculation: "ISO", // 周数customButtons: {prev: {// this overrides the prev buttontext: "PREV",click: () => {this.prev();},},next: {// this overrides the next buttontext: "PREV",click: () => {this.next();},},today: {text: "今天",click: () => {this.today();},},},},};},mounted() {// 获取用户信息this.calendarApi = this.$refs.fullCalendar.getApi();// 会议室1日程安排let scheduleList0 = [{id: 1,title: "小破孩",userId: 3,beginDate: "2021-07-11 09:30",endDate: "2021-07-13 11:30",remark: "备注内容",status: "#f08f00",},{id: 2,title: "项目会议",userId: 2,beginDate: "2021-07-14 09:30",endDate: "2021-07-14 14:30",remark: "备注内容",status: "#6bb377",},{id: 3,title: "供应商接待",userId: 3,beginDate: "2021-07-18 10:00",endDate: "2021-07-18 12:30",remark: "备注内容",status: "#6bb377",},{id: 4,title: "部门周会",userId: 2,beginDate: "2021-07-18 13:30",endDate: "2021-07-19 15:30",remark: "备注内容",status: "#999",},{id: 5,title: "项目分析会",userId: 1,beginDate: "2021-07-29 14:30",endDate: "2021-07-29 17:00",remark: "备注内容",status: "#6bb377",},];this.getReservationList(scheduleList0);},methods: {prev() {this.calendarApi.prev();},// 切换下一个按钮事件next() {this.calendarApi.next();},// 点击今天按钮today() {this.calendarApi.today();},//在methods中添加点击某一天区域的事件handleDateClick: function (arg) {this.$forceUpdate();console.log(arg, "事件1");},//在methods中添加点击某一日程的事件handleEventClick(calEvent) {console.log(calEvent, "事件2");this.dialogVisible = true; // 显示dialog弹窗let id = calEvent.event.id; // 获取当前点击日程的IDlet info = this.subList.filter((item) => {return item.id == id; // 通过ID进行数据匹配});console.log(info, 123);// this.$nextTick(() => {//   this.form = _.cloneDeep(info[0]); // 数据通过深拷贝赋值到form表单用于编辑//   this.getShowTime(this.form.beginDate, this.form.endDate); // 处理时间回显格式//   console.log(info[0],'数据')// });},//处理时间格式的方法：getShowTime(beginDate, endDate) {this.form.startDate = this.dealWithTime(beginDate);this.form.startTime = this.getHoursMin(beginDate);this.form.endDate = this.dealWithTime(endDate);this.form.endTime = this.getHoursMin(endDate);},// 获取时分时间getHoursMin(value) {return value.substring(11, 16);},// 处理会议时间格式dealWithTime(date) {let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0];return newDate;},//在methods中添加点击某一天日期数字，切换至显示当前所有日程的事件handleEvents(events) {if (events) {console.log(events, "事件3");}},//赋值方法：getReservationList(arrayData) {let newArr = [];this.subList = arrayData;arrayData.forEach((item) => {newArr.push({start: this.dealWithTime(item.beginDate),end: this.addDate(this.dealWithTime(item.endDate), 1),color: item.status,id: item.id,title: `${this.getTitle(item.beginDate, item.endDate)} ${item.title}`,});});this.calendarOptions.events = newArr;},// 日期加1天addDate(date, days) {var d = new Date(date);d.setDate(d.getDate() + days);var mon =d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;let endD = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();return `${d.getFullYear()}-${mon}-${endD}`;},// 获取会议事件titlegetTitle(date1, date2) {let start = date1.substring(11, 16);let end = date2.substring(11, 16);return `${start}~${end}`;},},
};
</script><style>
.rili {position: absolute;top: 100px;width: 100%;height: 80%;
}
</style>

3.api官网地址
https://www.helloweba.net/javascript/445.html

在Vue框架下使用Fullcalendar相关推荐

vue 搜索框header_在Vue框架下使用Fullcalendar
原标题:在Vue框架下使用Fullcalendar Fullcalendar是一个非常受欢迎的日历日程处理的js组件,它功能强大,文档齐全,可定制化高,可与你的项目无缝对接.本站之前有很多文章介绍了F ...
基于vue框架下使用Element-UI获取文件MD5值并上传
基于vue框架下使用Element-UI获取文件MD5值并上传使用插件: spark-md5 .vue页面 <el-uploadclass="avatar-uploader idca ...
html实现pdf导出excel表格,一篇文章详解：Vue框架下轻松实现Excel、PDF导出
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出打印表格经过技术选型,项目组一致决定通过 ...
VUE框架下FPS低解决方式
最近客户发现FPS很低,大模型加载才4,5FPS ,但是之前的用纯js的版本写的用例表现却很好,到30左右,差别这么大也看了很多vue优化的例子, http://jinlong.github.io/ ...
在vue框架下element-ui两种引用阿里云图标库的方法
方法一下载资源到本地 1.搜索想要的图标并添加入库 2.添加入项目 3. 下载解压放入src的文件中, 要在main.js文件中声明引入压缩包中的iconfont.css文件注意文件路径 4.引入 ...
vue框架下的TodoMVC
TodoMVC 案例官网:http://todomvc.com/ 注意进入官网后,获取TodoMVC模板是一个非常不起眼的template. 嘿嘿我这有准备好的压缩包(请看我的主页) 完整的html ...
vue+three.js展示nrrd+vtk3D模型-vue框架集成(下)
nrrd3D模型文件.vtk3D模型文件vue如何使用话不多说,直接上图小白的坎坷路程网上资源视频关于nrrd模型和vtk模型是真的少,公司都没有接触过这方面,职场小白, 累死了要.大家有同感可 ...
vue框架如何转换成普通html,html和vue框架
Vue框架Element的事件传递broadcast和dispatch方法分析前言最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法 ...
vue下使用fullcalendar及简单案例
ps:我真的感觉自己是个前端了,最近天天在写前端.不过很多复杂逻辑,后台处理起来比较麻烦,所以只让后台提供简单数据,前端封装处理数据确实比较方便! 引子:最近公司要做个人日程管理,故鄙人思前想后,选择 ...

在Vue框架下使用Fullcalendar

在Vue框架下使用Fullcalendar相关推荐

最新文章

热门文章