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

发布于 2022-09-13 00:52:59 字数 3616 浏览 13 评论 0

第一次进入会请求数据渲染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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文