- 安装FullClendar插件 根据自己的需求安装基本功能还是高级功能。
// 仅使用基本功能的 安装此命令
npm install fullcalendar
// 如若需使用高级功能(含基本功能) 使用此命令安装
npm install fullcalendar-scheduler两种功能说明参考官网介绍:https://fullcalendar.io/docs/initialize-globals
- 基本功能
vue代码
<template> <div> <FullCalendar :options="calendarOptions" /> </div> </template> <script> import FullCalendar from "@fullcalendar/vue"; import dayGridPlugin from "@fullcalendar/daygrid"; export default { name: "WorkOrderSearch", components: { FullCalendar }, data() { return { calendarOptions: { plugins: [dayGridPlugin], initialView: "dayGridMonth" } }; } }; </script>
效果如图:
- 2
- 3
- 4