| 日历日程插件FullCalendar在Vue中的使用指南 | 您所在的位置：网站首页 › 农历插件lunarplugin › 日历日程插件FullCalendar在Vue中的使用指南 |
日历日程插件FullCalendar在Vue中的使用指南
|
Vue 中好用的日历日程插件FullCalendar使用指南
博主wx: -GuanEr-，加博主进前端交流群 参考资料链接： FullCalendar官网 FullCalendar中文文档 功能： 实现 PC 端日历及日历中添加事件提醒。 本文极尽所能找到了常用功能的设置，并不是全部功能，想要查看特别完成的文档，请移步官网。 一、版本和基本介绍 1.1 版本 Vue：2.6.10 Vue-cli: 3.x @fullcalendar/vue: 5.5.0 FullCalendar 从4.x 开始支持 Vue 1.2 形态FullCalendar 就视图效果而言，提供的日历形态有以下几种 1.2.1 月视图
这是基本的渲染形式，我们可以通过 FullCalendar 预设的参数，配置我们想要的功能，获取我们想要的数据。 比如日历中日程的添加，修改，删除，日历的范围设置，标题设置，按钮设置等等。 二、安装和使用 2.1 在 Vue 项目中安装 FullCalendar为了让日历插件在 Vue 中用起来更便捷，FullCalendar 将日历拆成了小插件，用哪个功能，安装哪个功能，不使用的话可以不安装。 以下是常见工具列表。 npm i @fullcalendar/vue --save # FullCalendar 核心包，包含 calendar 类 npm i @fullcalendar/core --save # 在月视图或日视图中操作事件工具包 npm i @fullcalendar/daygrid --save # 在时间段视图中操作事件工具包 npm i @fullcalendar/timegrid --save # 以列表的形式查看事件工具包 npm i @fullcalendar/list --save # 交互包，提供事件拖放，调整大小，日期单击和可选择操作的功能 npm i @fullcalendar/interaction --save # 为日历引入 bootstrap 4 的主题 npm i @fullcalendar/bootstrap --save点此查看 FullCalendar 为 Vue 提供的所有插件列表 2.2 在 Vue 项目中使用 FullCalendar利用 FullCalendar 封装一个自定义组件 // 引入已经安装好的，项目中所需要的 FullCalendar 插件 import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import timeGridPlugin from '@fullcalendar/timegrid' import interactionPlugin from '@fullcalendar/interaction' import listPlugin from '@fullcalendar/list' export default { name: "my-calendar", components: { FullCalendar }, data() { return { // 日历配置参数，在 三、参数 中有详细介绍 calendarOptions: { plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin], } } } } // main.js // ...其他的配置 // 全局注册 my-calendar import MyCalendar from '../../components/common/my-calendar' Vue.component('my-calendar', MyCalendar);注册好了之后就可以在任意组件中用 调用日历组件。 三、参数 3.1 fullcalendar 的 options 属性FullCalendar 组件的 options 属性是一个对象，详细信息如 3.1.1 普通常见显示设置 属性类型描述示例设置效果localestring 默认值：en 设置语言格式 进入网页选择菜单 Locales 查看所有可设置语言 //initialViewstring 默认值：dayGridMonth 日网格视图，即月视图 设置日历的默认渲染形式 timeGridWeek/headerToolbarobject 默认值：{ left: 'title', center: '', prev: 'next' } 设置日历头部按钮群的操作内容，比如是否存在前一年，后一年的按钮，是否需要当天焦点按钮等等 { left: 'prevYear, prev title next, nextYear today', center: '', right: 'dayGridMonth' } firstDaynumber 默认值：7 设置一周中展示的第一列是星期几 3 weekendsboolean 默认值：true 是否在日历中显示周末 //heightstring设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。600px/contentHeightstring设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。540px/aspectRationumber 默认值：1.35 日历单元格宽高比 2/buttonTextobject设置按钮文本内容{ today: '当天', prev: '前' }/weekNumbersboolean 默认值：false 是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。 true navLinksboolean 默认值：false 是否显示天链接（从日历天的网格天链接中点进去，可以查看当天的所有内容详情） true handleWindowResizeboolean 默认值：true 是否随浏览器窗口大小变化而自动变化。 //eventColorstring 默认值：#3a87ad 日历中事件的默认背景色颜色，优先级低于添加事件时设置的背景色 #3a79eb eventTextColor 默认值：#fff 日历中事件的默认文本颜色，优先级低于添加事件时设置的文本色 #000 dayMaxEventsboolean 默认值：true 时间中网格内容高度超出单元格高度时，是否折叠，如果选择false，则会完全展开网格内容，并自动撑开日历单元格高度 true
3.1.2 普通常见操作设置
属性类型描述editableboolena 事件是否可以进行拖动，缩放修改，优先级低于添加事件时设置的值 eventStartEditableboolean 事件开始时间是否可拖动修改，优先级低于添加事件时设置的值 eventDurationEditableboolean事件结束时间是否可拖动修改，优先级低于添加事件时设置的值selectableboolean是否允许用户通过单击或拖动选择日历中的对象，包括天和时间。defaultEventMinutesnumber 默认值：120 事件默认的时间执行长度，如果事件对象没有指定执行多长时间，则默认执行两个小时 selectMinDistancenumber拖动选中日历时鼠标滑过的距离，这个值越大，鼠标在选中日历单元格时，就需要滑过很大的距离才能选中，可以设置为 0slotEventOverlapboolean 默认值：true 设置视图中的事件显示是否可以重叠覆盖 unselectAutoboolean 默认值：true 点击日历意外的地方时，是否取消选中 dragRevertDurationnumber 默认值：500 如果拖拽不成功，多久回复原状，毫秒 dragOpacity拖动时候的不透明度
3.1.3 options 的 events 键
FullCalenldar 的 options 属性中可以设置一个 events 键，该键是当前日历的事件列表，类型为数组，数组中是对象列表，一个对象代表一个事件，对象中包含的便是事件的设置内容，下标介绍事件的配置选项。 属性类型描述idstring可选，事件唯一标识，重复的事件具有相同的idtitlestring必须，事件在日历上显示的titleallDayboolean是否为全天事件，如果不指定事件在某天的具体时刻，那么这个事件为全天时间。start必须，开始时间end可选，结束时间。如果不选择结束时间，那么事件默认为单天事件urlstring当指定后，事件被点击将打开对应url。classNamearray 事件单元格类名列表，添加之后可以在 css 中单独编写其样式。 ['active-box', 'danger-box'] editableboolean事件是否可编辑，可编辑是指可以移动, 改变大小等。 source object 指向次event的eventsource对象。 color string 事件背景和边框颜色 backgroudColor string 事件背景颜色 borderColor string 事件边框颜色 textColor string 事件文本颜色 3.1.4 可操作事件列表以下是常用的 FullCalendar 事件列表，事件的 callback 都接受一个或多个参数，参数具体内容有哪些，写起来太累了，所以就自己 log 出来看吧，至于参数具体有几个，没找到资料，只能自己试试咯~。 同样的，事件也是直接设置在 options 中。 事件名称描述select选中日历某个单元格，或者某一批单元格时触发。unselect取消选中时触发eventClick点击日历中的某个事件时触发eventRender日程事件渲染时触发eventAfterRender日程事件被渲染后触发eventDestroy日程事件被移除时触发eventDragStart日程事件被拖动之前触发eventDragStop日程事件被拖动之前触发eventDrop日程事件拖拽完成并且时间改变之后触发eventResizeStart日程事件的事件范围被改变之前触发eventResizeStop日程事件的事件范围被改变之后触发eventResize日程事件的时间范围大小被改变成功之后触发 以上就是我总结的 FullCalendar 所有常见用法，有什么建议或意见，评论区交流。 扫码拉你进入前端技术交流群
|
【本文地址】
公司简介
联系我们