vue FullCalendar v5月视图怎么清空所有事件？

• Z时代
• 2024-02-26
• 分类：IT

第一次进入会请求数据渲染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()
      })

以上是 vue FullCalendar v5月视图怎么清空所有事件？ 的全部内容， 来源链接： utcz.com/p/935854.html