2

I use the dayHeaderContent prop from Full Calendar V5 to Inject certain extra content, Whenever I change or update an event and whenever the calendar re renders, the dayHeaderContent prop is being called and my new content is displayed on the top, It all works fine.

The issue comes when I update the event using the eventDrop and eventResize, The event card itself updates fine, but the dayHeaderContent on the top does not re render, until I manually re fetch the events or click the next page and come back to current page.

Is there a way I can make the dayHeaderContent render eveytime eventDrop and eventResize is used? I know I could just use the calendar refresh or refetch event source, But I cannot do that because I am supplying just one single event source static array of events, So I cannot use the refresh methods.

// Here's how I am supplying my events, here data is a static array
calendarRef.current.getApi().addEventSource(data)

// I want the below Inject function to run eveytime an event is update via eventDrop and eventResize props 
      const injectDayHeaderContent = (args) => {
        if (args.view.type === 'timeGridWeek') {
          return (
            <span>
                {convertDecimalToHHMM(showHours)}
            </span>
          )
        }
      }
    return(
      <FullCalendar
        .....
        .....
        dayHeaderContent={injectDayHeaderContent}
      />
    )
WildThing
  • 969
  • 1
  • 12
  • 30

0 Answers0