0

I am trying to wrap FullCalendar React component with my own functional React component with useContext hook to access MobX store (I might use the store in other components eventually) and observer() to make it react to changes in the store. My component reacts as I would expect, but I have trouble making the FullCalendar component render after a change.

I've tried finding a solution, wrapping <FullCalendar> in <Observer>, playing with autorun() and reaction() but nothing worked. I have to be missing something

This sandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 shows a simplified version of my solution so far.

Clicking the button at the top adds an event to the observable store, which gets shown in a list below it. But the calendar doesn't show the new event. Weirdly enough if I make a change in the code, save it, the CodeSandbox causes the render and the events show up in the calendar.

Moglum
  • 113
  • 2
  • 7
  • 1
    You are passing a static list of events to fullCalendar. That is a one-way, one-time process. FullCalendar takes a copy of the event list you gave it when the calendar was initialised. It does not know when you update that list outside the calendar. There are a few different ways you can tell fullCalendar to automatically fetch new events, or otherwise instruct it to add new events to the calendar. Take a look at https://fullcalendar.io/docs/event-source . If you have any specific questions about the options in there, let me know. – ADyson Oct 02 '19 at 10:24
  • @ADyson I knew I had to be doing something fundamentally wrong. I was looking more towards my usage of MobX and failed to realize the problem was in my usage of FullCalendar. Thank you for pointing me in the right direction. – Moglum Oct 02 '19 at 12:47

1 Answers1

0

Thanks to @ADyson, I found a solution. Instead of passing a static list of events to the FullCalendar component

events={store.events}

I can pass an event fetching function. So in the most trivial case, I can just pass the events from the store to the successCallback function and it works.

events={(fetchInfo, successCallback, failureCallback) => {
  successCallback(store.events);
}}

I've updated the CodeSandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 as well.

Moglum
  • 113
  • 2
  • 7