Dynamically mark dates in react-native-calendars

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

I need to mark dates that i am getting from the api. I'am not able to do that. — vihith, Dec 09 '19 at 09:14
I am using it as another variable to push the dates after mapping it. — vihith, Dec 09 '19 at 10:16

score 0 · Answer 1 · answered Dec 09 '19 at 09:40

0

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

answered Dec 09 '19 at 09:40

savan patel

254
1
5

– savan patel Dec 09 '19 at 09:41
customDatesStyles.push({ date:"12/8/2019", style: {backgroundColor:"yellow"}, textStyle: {color: 'black'}, containerStyle: [], }); – savan patel Dec 09 '19 at 09:41
Thank you. But i want it to be done by react-native-calendars. – vihith Dec 09 '19 at 09:50

score 0 · Answer 2 · answered Dec 09 '19 at 14:15

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' },
      ]
    },
  }}

score 0 · Answer 3 · answered Dec 09 '19 at 15:44

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!

Dynamically mark dates in react-native-calendars

3 Answers3

Linked