React-native-calendars: How to dynamically mark date

[robinlery]

Description

I have a Calender component, where I would like to mark a date which is the next day (nextDay).

export default class CustomCalender extends React.Component {
    render() {
        const today = moment().format("YYYY-MM-DD");
        const nextWeekDay = moment().add(7, 'days').format("YYYY-MM-DD");
        const nextDay = moment().add(1, 'days').format("YYYY-MM-DD");

        const mark = {
            '2017-08-16': {selected: true, marked: true}
        };

        return (
            <View style={styles.container}>
                <Text style={styles.labelText}>Select a date</Text>
                <Calendar
                    minDate={today}
                    maxDate={nextWeekDay}
                    onDayPress={(day) => {
                        console.log('selected day', day)
                    }}

                    markedDates={mark}
                />
            </View>
        )
    }
}

Expected Behavior

How can I use the data of nextDay for the mark constant instead of _'2017-08-16'_?

Environment

"react": "16.0.0-alpha.12",
"react-native": "^0.47.0",
"react-native-calendars": "^1.5.8",

[Coconuthack]

Hmm wouldn't these constants better be represented as the state of your custom calendar component and then you would need to calculate nextDay const, convert it to the YYYY-MM-DD format with a toString function of some kind and then construcr the 'mark' object with this string representation? New to this, just thinking out loud, hope it helps.

[overengineered]

@robinlery use it like this:

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

[francisrod01]

So... how to toggle (mark/unmark) dates when dayPress was called?
I tried to do this with Object.keys(), push and splice but mark haven't a index to manipulate this.

I've been working to do this with clean JS:

#283 - How to update markedDates from onDayPress event

[sfm2222]

This doesn't work for marking multiple dates:

```
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}
};

```

Any suggestions?

[kinza88]

@sfm2222 did you find any solution?

[TimurAsayonok]

@sfm2222 @kinza88 This method doesn't work because will get this wrong structure at the end you. You have to have structure like this:

    const mark = {
      '2018-06-05': { selected: true, marked: true },
      '2018-06-07': { selected: true, marked: true },
      '2018-06-18': { selected: true, marked: true }
    }

So, you have to work with your nextDay array and change this array to object correct structure.
Example, try this (updated after @ekowcharles suggestions):

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

    let newDaysObject = {};

    nextDays.forEach((day) => {
      newDaysObject[day] = {
          selected: true,
          marked: true
      };
    });

[abn0rmal-d0ct0r]

@sfm2222 @kinza88 This method doesn't work because will get this wrong structure at the end you. You have to have structure like this:

    const mark = {
      '2018-06-05': { selected: true, marked: true },
      '2018-06-07': { selected: true, marked: true },
      '2018-06-18': { selected: true, marked: true }
    }

So, you have to work with your nextDay array and change this array to object correct structure.
Example, try this:

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

    let newDaysObject = {};

    nextDays.forEach((day) => {
      newDaysObject = {
        ...newDaysObject,
        [day]: {
          selected: true,
          marked: true
        }
      };
    });

Hello

Regarding this part of the code,
newDaysObject = {
... newDaysObject,

Are we supposed to put anything in the dotted (...) area?

Advance thanks for your help

[TimurAsayonok]

@abn0rmal-d0ct0r Hi, no this (...) area is property spread notation. You should read more about it =)

[nihp]

How to defaultly mark the dates upto 3 dates from current date

[ekowcharles]

This doesn't work for marking multiple dates:

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}
   };

Any suggestions?

Spreading the new mark array tends to exponentially increase the complexity of the function and eventually reduce its performance.

Much simpler solution without having to spread the new mark array for each date:

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

let mark = {};

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

[gonzaloconcep]

@sfm2222 @kinza88 This method doesn't work because will get this wrong structure at the end you. You have to have structure like this:

    const mark = {
      '2018-06-05': { selected: true, marked: true },
      '2018-06-07': { selected: true, marked: true },
      '2018-06-18': { selected: true, marked: true }
    }

So, you have to work with your nextDay array and change this array to object correct structure.
Example, try this (updated after @ekowcharles suggestions):

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

    let newDaysObject = {};

    nextDays.forEach((day) => {
      newDaysObject[day] = {
          selected: true,
          marked: true
      };
    });

Hi everyone, first time for me working here. I'm with React Native. That's no giving me expected or any error. Any idea? Should I pass anything in state or call it in a function inside componendDidMount or similar? Thanks you

[khadijaSalak]

you have just to add that in your Calendar Component:
markedDates={

newDaysObject
}

@sfm2222 @kinza88 This method doesn't work because will get this wrong structure at the end you. You have to have structure like this:

    const mark = {
      '2018-06-05': { selected: true, marked: true },
      '2018-06-07': { selected: true, marked: true },
      '2018-06-18': { selected: true, marked: true }
    }

So, you have to work with your nextDay array and change this array to object correct structure.
Example, try this (updated after @ekowcharles suggestions):

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

    let newDaysObject = {};

    nextDays.forEach((day) => {
      newDaysObject[day] = {
          selected: true,
          marked: true
      };
    });

Hi everyone, first time for me working here. I'm with React Native. That's no giving me expected or any error. Any idea? Should I pass anything in state or call it in a function inside componendDidMount or similar? Thanks you

you have just to add this on ur Calendar Component:
markedDates={

newDaysObject
}