vue-full-calendar的使用
一、下载
npm install vue-fullcalendar
<template>
<full-calendar
:config="config"
:events="events"
></full-calendar>
</template>
<script>
import { FullCalendar } from 'vue-full-calendar'
import "fullcalendar/dist/fullcalendar.css";
export default {
components: { FullCalendar },
data() {
return {
events: [{
title: '事件内容', // 事件内容
start: '2019-05-20 09:00:00', // 事件开始时间
end: '2019-05-21 12:00:00', // 事件结束时间
color: 'rgba(9, 9, 9, 0.2)' // 事件的显示颜色
config: {
buttonText: { today: "今天", month: "月", week: "周", day: "日" },
locale: "zh-cn",
editable: false, //是否允许修改事件
selectable: false,
eventLimit: 4, //事件个数
allDaySlot: false, //是否显示allDay
defaultView: "month", //显示默认视图
eventClick: this.eventClick, //点击事件
dayClick: this.dayClick, //点击日程表上面某一天
methods: {
// 点击事件
eventClick (event, jsEvent, pos) {
console.log('eventClick', event, jsEvent, pos)
// 点击当天
dayClick (day, jsEvent) {
console.log('dayClick', day, jsEvent)
</script>
其他的事件添加方式和eventClick一样,具体有哪些的可以参考
http://keenwon.com/143.html
或者https://blog.csdn.net/supingemail/article/details/48371927