React-native-calendars: calendar view not refreshing

[apppro123]

I have the problem that the calendar view doesnt refresh though my events which i give in markedDates change. I have to mention that i created my own Day component for that. Maybe there is the problem (maybe with ShouldComponentUpdate, the description is not very clear on that) but i dont think so.

Thanks for every response on this!!

[brlocky]

Hi, I also had that problem.

The markedDates property from Calendar is an object, a complex object. So by simple cloning it like const newObject = { ...this.state.markedDates } is not copying it, weird but this case is creating a reference, so because of this the Calendar was not refreshing.
Using JSON parse to enforce the new object creation worked fine.

let calendarEvents = JSON.parse(JSON.stringify(this.state.originalMarkedDates))

[apppro123]

Thank you for you help!

[evolquez]

Hi @brlocky, I tried your solution and it works properly but I have a doubt. In your comment you said that the sentence const newObject = { ...this.state.markedDates } is creating a reference, basically a new reference and you said that this is the reason why the calendar is not refreshing, but in the documentation there is a disclaimer by the author that said

Make sure that markedDates param is immutable. If you change markedDates object content but the reference to it does not change calendar update will not be triggered.

If I'm not wrong, the author specify that we should create a new reference in order to refresh the calendar, I tried creating a new object using spread properties but it doesn't work.

Could you please explain me why JSON.parse is making the job done right.

Thanks in advance!

[brlocky]

That should work. Are you using component state to ensure component update?

Besides json stringify I also tryed other clone solutions. And none has worked.

[evolquez]

@brlocky yes I'm using component state, my component re-render every time my state change, but the calendar wasn't.

For now your solution saved my day, I spend few hours trying to figure out what was wrong with my implementation even using object spread properties.

Thanks!

[umkhan65]

@brlocky Your solution works great

[fullstact69]

I have customized dayComponent. But after I get values from Json, Calendar is not refreshed. How can I fix this?

[dl-husky73]

Just want to add here as well. This solution worked for me, thanks brlocky! Thx to archieherbias for sending this solution to my issue! Great stuff.

I simply changed my markedDates copy from straight hook copy to your suggestion, let newDates = JSON.parse(JSON.stringify(gMarkedDates)) and then resetting the hook once a parameter modified worked perfectly! Another problem solved! :) That closed the issue for me!

[vlade2008]

I have customized dayComponent. But after I get values from Json, Calendar is not refreshed. How can I fix this?

Just add a const markedDates = { }; yourArray.forEach((data) => { Object.assign(markedDates, { [data.date]: { selected: your state if selected } }); });
markedDates={markedDates}
it will render the daycomponent my friend . I hope it will help you

[dagan-arbox]

it doesn't not seem to help me, did all suggestions.
on event, I change markedDates as @brlocky , but nothing change untill any press event on calendar.

[arunkmoury]

You can try this this.setState({markedDates: {}}, function(){ this.setState({markedDates: newMarkedDates})
This is working every time anywhere in this plugin for this type of issue
@brlocky is also working fine

[Nehal-29]

@brlocky
Your solution had worked for everyone.
Can you help me where I'm wrong here?

let getMarkedDates = () => {
        let dates = {[selectedDate]: {selected: true, disableTouchEvent: true, selectedDotColor: Colors.accent}}
        let markedDates = JSON.parse(JSON.stringify(dates));
        return markedDates
    };

    return(
        <View>
            <Calendar
                minDate={props.minimumDate}
                maxDate={props.maximumDate}
                onDayPress={({dateString}) => {
                    props.selectDate(dateString);
                }}
                disableMonthChange={false}
                firstDay={1}
                current={selectedDate}
                markedDates={getMarkedDates()}
                theme={getTheme()}
                renderHeader={renderCalendarHeader}

            />
        </View>
    );

whenever this selectedDate changes I want to re-render my calendar component.

[zhlee1997]

let calendarEvents = JSON.parse(JSON.stringify(this.state.originalMarkedDates))

U are amazing @brlocky

[arnaudambro]

You can try this this.setState({markedDates: {}}, function(){ this.setState({markedDates: newMarkedDates})
This is working every time anywhere in this plugin for this type of issue
@brlocky is also working fine

JSON.parse(JSON.stringify()) didn't work for me, this reset and set state is tricky but it worked. Two hours lost on this ! But the lib is still great, thanks !

[walheredia]

Hi Guys, is there any way you can proivde an example with code? I've tried all your sugestions here but it doesn't work.
I really appreciate all your help!

[arnaudambro]

this.setState({ markedDatesToShow: {} }, () =>
  this.setState({
    markedDatesToShow: yourNewMarkedDates,
  })
);