在Vue框架下使用Fullcalendar

原创文章 作者:月光光 2019年12月14日 20:03helloweba.net 标签:JavaScript  Vue.js  Fullcalendar 

Fullcalendar是一个非常受欢迎的日历日程处理的js组件,它功能强大,文档齐全,可定制化高,可与你的项目无缝对接。本站之前有很多文章介绍了Fullcalendar(v3)的使用。今天我们来看看如何在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官网还提供了在ReactAngular框架下使用方法。

这是一个简单的vue fullcalendar实例,更复杂高级的应用敬请关注本站后面推出的相关文章。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/621.html

0条评论