mark multiple dates dynamically react native wix

Question

I'm using react-native-calendars. This library provides ability to mark dates on the calendar once mark parameter is passed to calendar object. I tried passing an array of objects but didn't worked sending multiple dates as below didn't worked as well.

How to dynamically mark multiple dates on it?

var nextDay =['2018-06-01',
       '2018-06-05',
       '2018-06-08',  
       '2018-06-07',
       '2018-06-18',
       '2018-06-17',
       '2018-05-28',
       '2018-05-29'];

   const mark = {
    [nextDay]: {selected: true, marked: true}
   };

this.state(
{
mark: mark,
})

          <Calendar
      onDayPress={this.onDayPress}      
      current={new Date()}
      minDate={'2018-05-24'}
      onMonthChange={(month) => {console.log('month changed', month)}}
      hideArrows={false}
      hideExtraDays={true}
      disableMonthChange={false}
      firstDay={1}
      hideDayNames={false}
      showWeekNumbers={false}
      onPressArrowLeft={substractMonth => substractMonth()}
      onPressArrowRight={addMonth => addMonth()}
      markedDates={this.state.mark}

          theme={{
            backgroundColor: '#ffffff',
            calendarBackground: '#ffffff',
            textSectionTitleColor: '#b6c1cd',
            selectedDayBackgroundColor: '#00adf5',
            selectedDayTextColor: '#ffffff',
            todayTextColor: '#00adf5',
            dayTextColor: '#2d4150',
            textDisabledColor: '#d9e1e8',
            dotColor: '#00adf5',
            selectedDotColor: '#ffffff',
            arrowColor: 'orange',
            monthTextColor: 'blue',
            textMonthFontWeight: 'bold',
            textDayFontSize: 16,
            textMonthFontSize: 16,
            textDayHeaderFontSize: 16
          }}
    />

@devedv it would be great if you accept the answer, so it will help others too. — Kirankumar Dafda, Dec 04 '18 at 06:08

Kirankumar Dafda · Accepted Answer · 2018-12-27T13:30:43.673

8

There is one hack to create an object you wanted to create from the date array,

Option is using reduce to convert the array into an object and just follow the code i have implemented using pure javascript

Call function after you successfully get value in nextDay array

constructor(props){
    super(props);
    this.state = {
        marked: null,
    };
}
componentDidMount() {
    this.anotherFunc();
}

// call function after you successfully get value in nextDay array

anotherFunc = () => {
    var obj = nextDay.reduce((c, v) => Object.assign(c, {[v]: {selected: true,marked: true}}), {});
    this.setState({ marked : obj});
}

Now add this state to your calendar element

<Calendar
    ...
    markedDates={this.state.marked}
    ...
/>

See the question I have asked for the same on SO

edited Dec 27 '18 at 13:30

answered May 30 '18 at 06:29

Kirankumar Dafda

2,354
5
29
56

Hey! How to use the customStyle option with the above solution? – kinza Jul 16 '18 at 07:52
You can add in the `obj` var in `{selected: true, marked: true, customStyles: {text:{ color: "red" }}}` something like this. – Kirankumar Dafda Jul 16 '18 at 08:33
It's work for me.. Thanks a lot.. can you tell me what is the meaning of empty cult braces in another function. `anotherFunc = () => { var obj = nextDay.reduce((c, v) => Object.assign(c, {[v]: {selected: true,marked: true}}),` **{}** `); this.setState({ marked : obj}); }` – Chanaka Dec 04 '18 at 06:09
1

@Chanaka the empty {} in the of reduce is the initial value. This means that the initial value is an empty object – Kirankumar Dafda Dec 04 '18 at 06:15
1

Here it should be changed is not it? `this.state = { marked: null, };` otherwise i get a warn **Warning: Failed prop type: Invalid prop `markedDates` of type `boolean` supplied to `CalendarList`, expected `object`.** – Chanaka Dec 04 '18 at 06:37
1

@Chanaka I have created example of this before 6 months so I have not that code, let me know if this removes warning, I will update it. – Kirankumar Dafda Dec 04 '18 at 06:42
1

@KirankumarDafda cahnge `this.state = { marked: null, };` then warn is gone. – Chanaka Dec 04 '18 at 06:47

score 2 · Answer 2 · edited Jul 02 '21 at 13:28

2

This is how I did it and it worked :

const nextDate = [
  '2021-06-28',
  '2021-06-29',
  '2021-07-04',
  '2021-07-5',
  '2021-09-06',
  '2021-08-05',
];

let mark = {};

nextDate.forEach(day => {
  mark[day] = {
    marked: true,
  };
});

Then Put the mark Object inside the markedDates in the Calendar

markedDates={mark}

Make sure the dates are in object structure

edited Jul 02 '21 at 13:28

crodev

1,323
6
22
39

answered Jun 28 '21 at 19:33

Bestine

64
3

score 0 · Answer 3 · answered Aug 18 '22 at 05:08

const [markedDates, setMarkedDates] = useState({});
    const type = { key: "1", color: red };
            
    const keys = Object.keys(arr);
                         keys.map((key) => {
                            const itemValue = arr[key]
                       
                                mark[key] = {
                                    dots: [type]
                                }
            
                                return null
                            
                        })
setMarkedDates(mark)
        
        then you can pass to markedDates={markedDates}

mark multiple dates dynamically react native wix

3 Answers3

Linked