Dynamically mark dates in react-native-calendars - reactjs

Question

I'am trying to mark dates in react-native-calendars that i get from an api call. Can someone please help?
<Calendar
markingType={'multi-dot'}
markedDates={this.state.dates}
/>
In constructor, I am maintaining
this.state = {dates : []}
I have invoked the function marked() where I am mapping over the data and pushing the dates into another array and then doing a setState as
this.setState({
dates : {
[attendance] : [
{
key: 'vacation',
color: 'blue',
selectedDotColor: 'red'
}
]
}
})
I'am sharing the code I am at liberty to.
P.S : I'am new to this.
Thanks in andvance

Answer 1

please use this library it's easy to customization with custom date styles "react-native-calendar-picker"

Answer 2

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.
Please try;
markedDates={{
'2019-12-9': {
periods: [
{ startingDay: false, endingDay: true, color: '#5f9ea0' },
{ startingDay: false, endingDay: true, color: '#ffa500' },
{ startingDay: true, endingDay: false, color: '#f0e68c' },
]
},
'2019-12-9': {
periods: [
{ startingDay: true, endingDay: false, color: '#ffa500' },
{ color: 'transparent' },
{ startingDay: false, endingDay: false, color: '#f0e68c' },
]
},
}}

Answer 3

I actually had to do the exact same thing recently with react-native-calendars. Here is a simplified version of the function I wrote to create marked dates:
createMarkedDates = (dates) => {
let markedEvents = {};
let numEvents = {};
let uniqueDates = [...new Set(dates)]; //remove duplicate event dates
dates.forEach(function (count) { //if multiple events on one date, determine how many events are on each date
numEvents[count] = (numEvents[count] || 0) + 1;
});
uniqueDates.forEach(function (date) {
let dots = [];
let markedData = {};
for (let i = 0; i < numEvents[date]; i++) {
dots.push(event); //add dots for as many events are on that day
}
markedData['dots'] = dots; //set the array of dots
markedEvents[date] = markedData; //add markers to marked dates
});
};
this.setState({markedDates: markedEvents});
}
dates is an array of dates that is being passed from the API.
This should output you a marked date object with the markings for each date, and also if you need it, it will put multiple dots on a day if it appears more than once in your array.
Also, I believe your dates need to be in ISO date format (YYYY-MM-DD) for react-native-calendars to mark the dates.
I hope this example helps!