在Vue框架下使用Fullcalendar
2020/1/5 14:05:22
本文主要是介绍在Vue框架下使用Fullcalendar,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Fullcalendar(v4)是一个非常受欢迎的日历日程处理的js组件,它功能强大,文档齐全,可定制化高,可与你的项目无缝对接。今天我们来看看如何在Vue框架下使用Fullcalendar。
查看演示
安装Fullcalendar
首先第一步当然是安装FullCalendar相关的依赖。我们需要安装Vue适配、核心包以及任何你想添加的功能插件。
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
FullCalendar v4以核心代码和插件形式提供给用户安装,因此我们需要哪些功能,就直接安装对应的插件即可。使用时可以参照:功能插件列表。
如何使用
首先我们建立一个Main.vue文件,在模板中编写:
<FullCalendar defaultView="dayGridMonth" locale="zh-cn" firstDay="1" weekNumberCalculation="ISO" :eventTimeFormat="evnetTime" :header="header" @dateClick="handleDateClick" :plugins="calendarPlugins" :events="calendarEvents" @eventClick="handleEventClick" />
我们在<template/>
中定义了<FullCalendar/>
组件,包括属性和方法。
defaultView
:表示当前默认使用的是月份视图,就是看到的是一个月的视图。还有日视图和周视图等。
locale
:本地化,我们使用中文简体。
firstDay
:一周的第一天,我们中文习惯是星期一是一周的第一天。
weekNumberCalculation
:与firstDay
配合,设置成ISO
,一周第一天为星期一。
header
:日历的头部设置,包括标题,左右按钮设置等。
events
:日程事件内容。
更多属性方法可以查看文档:官方文档。v3版本中文文档请移步:https://www.helloweba.net/javascript/445.html。
然后在javascript部分,先导入组件和样式。
import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction' import '@fullcalendar/core/main.css';
接着,将数据定义好,包括接口、事件内容等等,以及方法调用。注意,需要使用Fullcalendar功能插件,必须在calendarPlugins
定义好。
export default { components: { FullCalendar }, data() { return { calendarPlugins: [ dayGridPlugin, interactionPlugin ], header: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, evnetTime: { hour: 'numeric', minute: '2-digit', hour12: false }, calendarEvents: [ { title: '部门会议', start: new Date() } ] } }, methods: { handleDateClick(arg) { if (confirm('您是否要在' + arg.dateStr + '添加一个新的事件?')) { this.calendarEvents.push({ // add new event data title: '新的事件', start: arg.date, allDay: arg.allDay }) } }, handleEventClick(info) { alert('Event: ' + info.event.title); info.el.style.borderColor = 'red'; } } }
保存,执行npm run dev
,就可以看到Fullcalendar渲染的日程页面了。
Fullcalendar官网还提供了在React和Angular框架下使用方法。
这是一个简单的vue fullcalendar实例,有关Fullcalendar的应用敬请关注文章:
这篇关于在Vue框架下使用Fullcalendar的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)