vue FullCalendar v5月视图怎么清空所有事件?
第一次进入会请求数据渲染events,后面想改变条件后重新请求数据渲染events,如果不清空数据就会重复,要怎么清空所有事件?
<FullCalendar ref="calendarEl" :options="calendarOptions" />
calendarOptions: {
locale: cnLocale, // 语言(中文),如有多语言需求可引入其它语言
weekends: false, // 是否显示周末
headerToolbar: false, // 隐藏头部
// headerToolbar: { center: 'dayGridMonth' },
plugins: [dayGridPlugin, interactionPlugin],
// initialView: 'dayGridMonth',
firstDay: 0,
// selectable: true,
dayMaxEventRows: true,
moreLinkClassNames: 'moreEvents',
fixedWeekCount: false,
// duration: { days: 3 },
// slotDuration: { months: 2 },
dateIncrement: { months: 1 },
moreLinkContent: (arg) => {
return `还有${arg.num}条...`
},
dayCellContent: (arg) => {
const dom = document.createElement('div')
const argDate = this.formatDate(arg.date)
if (arg.isToday) {
dom.innerHTML = `<span class="fc-custom-date">${argDate}</span><span class="fc-custom-today">今天</span>`
} else {
const T = new Date().getTime()
const T1 = new Date(argDate).getTime()
const d = new Date()
const y = d.getFullYear() + 1
let m = d.getMonth() + 1
m = m < 10 ? '0' + m : m
const T3 = new Date(`${y}-${m}-01`).getTime()
if (T1 < T || T1 >= T3) {
dom.innerHTML = `<span class="fc-custom-date fc-disabled-date">${argDate}</span>`
} else {
dom.innerHTML = `<span class="fc-custom-date">${argDate}</span>`
}
}
const arrayOfDomNodes = [dom]
return { domNodes: arrayOfDomNodes }
},
views: {
dayGridMonth: { // name of view
titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },
duration: { months: 2 },
visibleRange: function (currentDate) {
console.log('currentDate---', currentDate)
// Generate a new date for manipulating in the next step
const startDate = new Date(currentDate.valueOf())
const endDate = new Date(currentDate.valueOf())
// Adjust the start & end dates, respectively
startDate.setDate(startDate.getMonth() + 1)
endDate.setDate(endDate.getMonth() + 2)
return { start: startDate, end: endDate }
}
// other view-specific options here
}
},
contentHeight: 1408, // 设置内容区高度,每天(即格子高度)会平分该高度
eventContent: (arg) => {
// console.log('arg.event------')
// console.log(arg.event)
const dom = document.createElement('div')
dom.className = 'fc-custom-event'
dom.innerText = arg.event.extendedProps.assetType === '121' ? `${arg.event.title}` : `${arg.event.title}: ${arg.event.extendedProps.amount}万元`
const arrayOfDomNodes = [dom]
return { domNodes: arrayOfDomNodes }
},
// dateClick: function (val) {
// alert('hhh' + val.view)
// }
eventClick: (info) => {
console.log('event ---')
console.log(info)
this.eventInfo(info.event)
}
},
现在试了先销毁再render数据也还是重复的,请教一下解决方案。
this.calendarApi.destroy()
this.$nextTick(() => {
this.calendarApi.render()
})
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论