Vue 应用程序中的 FullCalendar 4.0
FullCalendar 4.0 within a Vue application
我正在使用没有 jquery 的 fullCalendar v4.0。我是这样初始化的
<div id="calendar"></div>
在数据对象中我有这个。
calendar: null,
config: {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
axisFormat: 'HH',
defaultView: 'timeGridWeek',
allDaySlot: false,
slotDuration: '00:60:00',
columnFormat: 'dddd',
titleFormat: 'dddd, MMMM D, YYYY',
defaultDate: '1970-01-01',
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
eventLimit: true,
eventOverlap: false,
eventColor: '#458CC7',
firstDay: 1,
height: 'auto',
selectHelper: true,
selectable: true,
timezone: 'local',
header: {
left: '',
center: '',
right: '',
},
select: (event) => {
this.selectCalendar(event)
},
header: false,
events: null
}
}
虽然在数据变量中有一个日历,但现在我可以从任何地方 render()
和 destroy()
它。
但我在处理日历事件时遇到问题:
比如
select: (event) => {
this.selectCalendar(event)
}
我在 methods: {}
中定义了另一个方法 selectCalendar()
以在 select 中调用它,但我收到一个错误
Uncaught TypeError: Cannot read property 'selectCalendar' of undefined
我想对 select
、eventClick
、eventDrop
、eventResize
做一些操作,但我无法调用配置中的方法。
还有什么方法可以定义select或任何方法为
select: this.selectCalendar
所以它会直接向定义的方法发送一个事件?
我已经尝试过 vue-fullcalendar,但它对我不起作用。任何帮助将不胜感激。
Vue v.2.5.21
我使用的是 vue full calendar,你可以像下面的代码一样处理 fullcalendar 的事件
<full-calendar :event-sources="eventSources" @event-selected="myEventSelected"></full-calendar>
export default{
methods:{
caculateSomething(event){
//do st here
},
myEventSelected(event){
//do st here
this.caculateSomething(event)
console.log(event)
}
}
}
我就是这样解决的。
- 在html
<div id="calendar"></div>
在你的 data() => {}
calendar: null,
config: {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
axisFormat: 'HH',
defaultView: 'timeGridWeek',
allDaySlot: false,
slotDuration: '00:60:00',
columnFormat: 'dddd',
columnHeaderFormat: { weekday: 'short' },
defaultDate: '1970-01-01',
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
eventLimit: true,
eventOverlap: false,
eventColor: '#458CC7',
firstDay: 1,
height: 'auto',
selectHelper: true,
selectable: true,
timezone: 'UTC',
header: {
left: '',
center: '',
right: '',
},
header: false,
editable: true,
events: null
}
第一次不要在配置中定义任何 select
、resize
或 dropEvent
,但是随后要呈现日历的部分会执行类似这样的操作
if (this.calendar == null) {
console.log(this.schedule)
let calendarEl = document.getElementById('calendar');
let calendarConfig = this.config
let select = (event) => {
this.selectCalendar(event)
}
let eventClick = (event) => {
this.clickCalendar(event)
}
let eventDrop = (event) => {
this.dropCalendar(event)
}
let eventResize = (event) => {
this.resizeCalendar(event)
}
calendarConfig.select = select;
calendarConfig.eventClick = eventClick;
calendarConfig.eventDrop = eventDrop;
calendarConfig.eventResize = eventResize;
this.calendar = new Calendar(calendarEl, calendarConfig);
this.calendar.render();
this.renderEvents()
}
现在您可以用自己的方法处理 FullCalendar 的那些事件了。
还有 this.calendar
中的日历使您能够在 methods: {}
中从任何地方销毁它
在 FullCalendar 4.0 中,事情发生了变化,但更加简单。
这些是附加到 FullCalendar 事件的方法
selectCalendar(event) {
this.calendar.addEvent(event)
},
clickCalendar(event) {
if (window.confirm("Are you sure you want to delete this event?")) {
let findingID = null
if (event.event.id === "") {
findingID = event.el
} else {
findingID = event.event.id
}
let removeEvent = this.calendar.getEventById( findingID )
removeEvent.remove()
}
},
dropCalendar(event) {
},
resizeCalendar(event) {
},
destroyCalendar() {
if (this.calendar != null) {
this.calendar.destroy();
this.calendar = null
}
}
当您添加活动时。您可以在事件中通过 el
找到它,但自定义事件应该具有唯一 ID。通过它您可以找到并删除它。
我正在使用没有 jquery 的 fullCalendar v4.0。我是这样初始化的
<div id="calendar"></div>
在数据对象中我有这个。
calendar: null,
config: {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
axisFormat: 'HH',
defaultView: 'timeGridWeek',
allDaySlot: false,
slotDuration: '00:60:00',
columnFormat: 'dddd',
titleFormat: 'dddd, MMMM D, YYYY',
defaultDate: '1970-01-01',
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
eventLimit: true,
eventOverlap: false,
eventColor: '#458CC7',
firstDay: 1,
height: 'auto',
selectHelper: true,
selectable: true,
timezone: 'local',
header: {
left: '',
center: '',
right: '',
},
select: (event) => {
this.selectCalendar(event)
},
header: false,
events: null
}
}
虽然在数据变量中有一个日历,但现在我可以从任何地方 render()
和 destroy()
它。
但我在处理日历事件时遇到问题:
比如
select: (event) => {
this.selectCalendar(event)
}
我在 methods: {}
中定义了另一个方法 selectCalendar()
以在 select 中调用它,但我收到一个错误
Uncaught TypeError: Cannot read property 'selectCalendar' of undefined
我想对 select
、eventClick
、eventDrop
、eventResize
做一些操作,但我无法调用配置中的方法。
还有什么方法可以定义select或任何方法为
select: this.selectCalendar
所以它会直接向定义的方法发送一个事件?
我已经尝试过 vue-fullcalendar,但它对我不起作用。任何帮助将不胜感激。
Vue v.2.5.21
我使用的是 vue full calendar,你可以像下面的代码一样处理 fullcalendar 的事件
<full-calendar :event-sources="eventSources" @event-selected="myEventSelected"></full-calendar>
export default{
methods:{
caculateSomething(event){
//do st here
},
myEventSelected(event){
//do st here
this.caculateSomething(event)
console.log(event)
}
}
}
我就是这样解决的。
- 在html
<div id="calendar"></div>
在你的
data() => {}
calendar: null, config: { plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin], axisFormat: 'HH', defaultView: 'timeGridWeek', allDaySlot: false, slotDuration: '00:60:00', columnFormat: 'dddd', columnHeaderFormat: { weekday: 'short' }, defaultDate: '1970-01-01', dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], eventLimit: true, eventOverlap: false, eventColor: '#458CC7', firstDay: 1, height: 'auto', selectHelper: true, selectable: true, timezone: 'UTC', header: { left: '', center: '', right: '', }, header: false, editable: true, events: null }
第一次不要在配置中定义任何 select
、resize
或 dropEvent
,但是随后要呈现日历的部分会执行类似这样的操作
if (this.calendar == null) {
console.log(this.schedule)
let calendarEl = document.getElementById('calendar');
let calendarConfig = this.config
let select = (event) => {
this.selectCalendar(event)
}
let eventClick = (event) => {
this.clickCalendar(event)
}
let eventDrop = (event) => {
this.dropCalendar(event)
}
let eventResize = (event) => {
this.resizeCalendar(event)
}
calendarConfig.select = select;
calendarConfig.eventClick = eventClick;
calendarConfig.eventDrop = eventDrop;
calendarConfig.eventResize = eventResize;
this.calendar = new Calendar(calendarEl, calendarConfig);
this.calendar.render();
this.renderEvents()
}
现在您可以用自己的方法处理 FullCalendar 的那些事件了。
还有 this.calendar
中的日历使您能够在 methods: {}
在 FullCalendar 4.0 中,事情发生了变化,但更加简单。
这些是附加到 FullCalendar 事件的方法
selectCalendar(event) {
this.calendar.addEvent(event)
},
clickCalendar(event) {
if (window.confirm("Are you sure you want to delete this event?")) {
let findingID = null
if (event.event.id === "") {
findingID = event.el
} else {
findingID = event.event.id
}
let removeEvent = this.calendar.getEventById( findingID )
removeEvent.remove()
}
},
dropCalendar(event) {
},
resizeCalendar(event) {
},
destroyCalendar() {
if (this.calendar != null) {
this.calendar.destroy();
this.calendar = null
}
}
当您添加活动时。您可以在事件中通过 el
找到它,但自定义事件应该具有唯一 ID。通过它您可以找到并删除它。