如何在预渲染的日历上使用rerenderEvents()方法

时间:2019-03-23 19:04:19

标签: reactjs fullcalendar fullcalendar-4

更新3-26-2019

我正在尝试使用户能够向日历添加事件,并使这些事件在输入时出现。我正在使用React.js前端,并且可以获取要在新日历中渲染的事件,但不会删除旧日历(我只是在每个日历顶部渲染了 10 + 个日历)其他)。

我尝试过使用.destroy()方法,然后重新渲染日历,但是该方法似乎不可用/无法正常工作,因此我想尝试rerenderEvents()并保留相同的日历对象,但该功能似乎也无法访问。愿意与熟悉 FullCalendar v.4

的任何人一起解决此问题

一旦用户将收集到的数据输入到数据对象中并将其追加到状态中,但是如果我只是镜像上面的内容,它将在旧日历的顶部呈现一个全新的日历。

就像我无法获得渲染后的Calendar对象以进行这些方法调用一样,但是在将其捕获到单独的函数时遇到了麻烦。文档只说是叫.destroy()还是叫.rerenderEvents(),而不是叫他们什么。


//This successfully Renders
    componentOnMount() {
                 var calendarNew = document.getElementById('calendar');



            let newCalendar = new Calendar(calendarNew, {
                plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
                events: this.state.events
            });


            console.log(newCalendar)

            await this.setState({ calendarObj: newCalendar })

            // let myNewEvents = newCalendar.getEvents()
            // console.log(myNewEvents)
            // let stateEvents = this.state.calendarObj.getEvents()
            // console.log(stateEvents)

            this.state.calendarObj.render();


    }

我已经尝试了以下方法来缓解双重渲染...


    async handleNewEvent() {
    // code that creates an object and sets the state to the new event array//
        var newEventArr = existingEvents.concat(newEvent)
        console.log(newEventArr)

        await this.setState({ events: newEventArr })
        await this.setState({ currentIndex: (this.state.currentIndex + 1) })
        this.props.change(this.state.events, this.state.currentIndex)

        //Contains the new event array in the console
        console.log(this.state.events)

       this.state.calendarObj.rerenderEvents();
    }

但是这什么也没做。我什至无法从handleNewEvent()中渲染(),就好像状态无法在其中保留函数,而且我也找不到找到将函数从ComponentDidMount()传递到handleNewEvent()的方法。我不知所措...

0 个答案:

没有答案