Vue3中如何使用fullcalendar日历插件
更新时间:2024年01月17日 11:41:36 作者:stephen Curry_
这篇文章主要介绍了Vue3中如何使用fullcalendar日历插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
npm install @fullcalendar/core npm install @fullcalendar/vue3 vue文件中引用 import FullCalendar from "@fullcalendar/vue3" 必须安装一个: npm install @fullcalendar/daygrid npm install @fullcalendar/multimonth npm install @fullcalendar/timegrid
在vue文件中的template中
<FullCalendar v-if="calendarOptions" style="margin-top: 30px" class="calenderCon" ref="fullCalendar" :options="calendarOptions" > </FullCalendar>
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";// 引入需要的视图 let calendarOptions = ref(); // 使用resourceTimelineMonth需安装 onMounted(() => { calendarOptions.value = { plugins: [dayGridPlugin, timeGridPlugin, resourceTimelinePlugin], initialView: "resourceTimelineMonth", // 默认为那个视图(月:dayGridMonth,周:timeGridWeek,日:timeGridDay) headerToolbar: { left: "prev", center: "title", right: "today,next", }, locale: "zh-cn", // 切换语言,当前为中文 eventColor: "#ffffff", // 全部日历日程背景色 initialDate: proxy.$dayjs().format("YYYY-MM-DD"), // 自定义设置背景颜色时一定要初始化日期时间 allDaySlot: false, height: "422px", buttonText: { today: "当前月", day: "日", }, // 日程 businessHours: { daysOfWeek: [1, 2, 3, 4], // Monday - Thursday startTime: "10:00", // a start time (10am in this example) endTime: "18:00", // an end time (6pm in this example) }, // 强调日历上的特定时间段。默认为周一至周五,上午9点至下午5点。 selectConstraint: { daysOfWeek: [1, 2, 3, 4], // Monday - Thursday startTime: "10:00", // a start time (10am in this example) endTime: "18:00", // an end time (6pm in this example) }, // 限制用户选择特定的时间窗口。 // 事件 // eventClick: eventClick, // 点击日历日程事件 // eventDrop: eventDrop, // 拖动日历日程事件 // eventResize: eventResize, // 修改日历日程大小事件 // select: handleDateSelect, // 选中日历格事件 // eventDidMount: this.eventDidMount, // 安装提示事件 // loading: loading, // 视图数据加载中、加载完成触发(用于配合显示/隐藏加载指示器。) // selectAllow: selectAllow, //编程控制用户可以选择的地方,返回true则表示可选择,false表示不可选择 // eventMouseEnter: eventMouseEnter, // 鼠标滑过 editable: true, // 是否可以进行(拖动、缩放)修改 eventStartEditable: true, // Event日程开始时间可以改变,默认true,如果是false其实就是指日程块不能随意拖动,只能上下拉伸改变他的endTime eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变,默认true,如果是false则表示开始结束时间范围不能拉伸,只能拖拽 selectable: true, // 是否可以选中日历格 selectMinDistance: 0, // 选中日历格的最小距离 dayMaxEvents: true, weekends: true, // 是否在任何日历视图中包括周六/周日列。 navLinks: false, // 确定日名和周名是否可单击 schedulerLicenseKey: "GPL-My-Project-Is-Open-Source", // 此配置是为了消除右下角的版权提示 slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠,默认true允许 resourceAreaColumns: [ { headerContent: "车型", field: "room_name", }, { headerContent: "车牌", field: "car_code", }, ], resourceAreaWidth: "15%", resources: resourcesData.value, // 后台给 渲染的数据 events: matchList.value,// 后台给 渲染的数据 }; }) 数据格式(根据实际情况来,均为后台返回): resourcesData.value { id: item.id, room_name: item.car_type, car_code: item.car_code, } matchList.value { id: item.id, resourceId: item.id, title: "用车人:" + item.use_person_name + " 用车时间:" + item.start_time + "~" + item.end_time + "用途:" + item.purpose, start: item.start_time, end: item.end_time, color: "yellow", textColor: "black", }
文档内容比较丰富,可以自行去官网查看
附:官网地址:https://fullcalendar.io/
到此这篇关于Vue3使用fullcalendar日历插件的文章就介绍到这了,更多相关Vue3 fullcalendar日历插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详
defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏,他们不需要导入,且会随着 <script setup> 的处理过程一同被编译掉,这篇文章主要介绍了vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解,需要的朋友可以参考下2023-01-01
最新评论