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