Vue日历插件 fullcalendar 使用

Fullcalendar安装

• 安装所需要的npm包

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list
npm install --save @fullcalendar/interaction
npm install --save @fullcalendar/core @fullcalendar/resource-timeline

• 导入

 import FullCalendar from '@fullcalendar/vue';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 import '@fullcalendar/core/main.css';
 import '@fullcalendar/daygrid/main.css';
 import '@fullcalendar/timegrid/main.css';
 import '@fullcalendar/list/main.css';

• 注册组件

components: {
     FullCalendar
   },

• 写入template

<FullCalendar class="fullcalendar" defaultView="dayGridMonth" locale="zh-cn" :plugins="calendarPlugins"
     :buttonText="buttonText" :header="{
     left: 'prev,next today',
     center: 'title',
     right: 'dayGridMonth,timeGridWeek,timeGridDay, list'
   }" @dateClick="handleDateClick" @eventClick="handleEventClick" @dayClick="dayClick"
     schedulerLicenseKey= 'GPL-My-Project-Is-Open-Source'
    :events="events" />

• data和methods

data() {
     return {
       calendarPlugins: [dayGridPlugin, timeGridPlugin, listPlugin],
       buttonText: {
         today: "今天",
         month: "月",
         week: "周",
         day: "日",
         list: '表'
       },
       events: [{
         title: '国庆节',
         date: '2019-10-01',
         color: '#2196F3',
         start: '2019-10-01',
         end: '2019-10-07'
       }, ]
     };
   },
   methods: {
     handleDateClick(arg) {
       console.log(arg);
       if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
         this.calendarEvents.push({ // add new event data
           title: 'New Event',
           start: arg.date,
           allDay: arg.allDay
         })
       }
     },
     handleEventClick(info) {
       console.log(info);
       alert('Event: ' + info.event.title)
     },
     dayClick(e,js){
       console.log(e,js);
     }
   },

event事件

属性	说明
id	string 或者 int 类型，事件的唯一标识。重复事件的不同实例应该都具有相同的ID。
title	String，必选，事件名称。
allDay	布尔型，true或false，可选项。事件是否发生在特定的时间。 该属性影响是否显示事件的时间。 此外，在议程视图中，确定是否显示在“全天”部分。
start	事件开始日期/时间，必选。格式为ISO8601字符串或UNIX时间戳
end	事件结束日期/时间，可选。格式为ISO8601字符串或UNIX时间戳
url	事件链接地址，字符串，可选。当单击事件的时候会跳转到对应的url。
className	string 或者 Array 类型，可选。一个css类（或者一组），附加到事件的 DOM 元素上。
editable	true或false，可选。只针对当前的单个事件，其他事件不受影响。
startEditable	true或false，可选。覆盖当前事件eventStartEditable选项
durationEditable	true或false，可选。覆盖当前事件的eventDurationEditable选项
resourceEditable	true或false，可选。覆盖当前事件的 eventResourceEditable选项
rendering	允许渲染事件，如背景色等。可以为空，也可以是"background", or"inverse-background"
overlap	true或false，可选。覆盖当前事件的eventOverlap选项。如果设置为false，则阻止此事件被拖动/调整为其他事件。 还可以防止其他事件在此事件中被拖动/调整大小。
constraint	事件id，“businessHours”，对象，可选。覆盖当前事件的eventConstraint选项。
source	Event Source Object事件源
color	和 eventColor 作用一样，设置事件的背景色和边框。
backgroundColor	和 eventBackgroundColor 作用一样，设置事件的背景色。
borderColor	和 eventBorderColor 作用一样，设置事件的边框。
textColor	和 eventTextColor 作用一样，设置事件的文字颜色