2

In react native calendar there are markedDates which are providing the planned events. The code for a manual entry is following:
markedDates={{
'2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
'2012-05-17': {marked: true},
'2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
'2012-05-19': {disabled: true, disableTouchEvent: true}
}}
What do I have to do to set the markedDates dynamically out of an array?

That is the line from the render():
markedDates={this.state.selectedDate, this.state.markedDates}

This is executed in componentDidMount:
var selectedDate = {}
selectedDate[dateString] = { selected: true, selectedColor: '#c4c4c4', text: { color: 'black' } }
this.setState({ selectedDate: selectedDate })

Dynamically mark dates in react-native-calendars This is a link to a similar question but it doesn't really answer it or I don't understand the answer. Both is possible

Benjamin Müller
  • 51
  • 4
  • share your array or your source code or check this - https://stackoverflow.com/a/59602003/9432559 – SDushan Apr 27 '20 at 14:11
  • @SDushan thanks for the link. What is in the moment file? – Benjamin Müller Apr 28 '20 at 08:36
  • ```moment``` is a library that handles dates & times -https://momentjs.com/ – SDushan Apr 28 '20 at 08:44
  • @SDushan is there a way to combine you code with the following code? [this.state.selected]: { selected: true, selectedColor: '#c4c4c4', text: { color: 'black' } } – Benjamin Müller Apr 28 '20 at 14:42
  • you have to convert your data according to the above structure. if you need more help, share your code. – SDushan Apr 28 '20 at 18:22
  • I did this but when I try to display the data like markedDates={this.state.selectedDate, this.state.markedDates} it onla shows the selectedDate value – Benjamin Müller Apr 29 '20 at 13:34
  • could you share your values of ```state```. – SDushan Apr 29 '20 at 13:40
  • this.state = { selected: undefined, today: '', todaydatestate: '', datestringglob: '', markedDates: {}, selectedDate: {}, eventprogram: [], eventday: 'Heute', todayreal: '' }; – Benjamin Müller Apr 29 '20 at 14:18
  • @SDushan here is the value of the state. var selectedDate = {} selectedDate[dateString] = { selected: true, selectedColor: '#c4c4c4', text: { color: 'black' } } – Benjamin Müller Apr 30 '20 at 07:17
  • could you update your question with the current code. – SDushan Apr 30 '20 at 07:21
  • i'm looking for the same answer, i got a set of dates (holidays and other days) in a json structure from an api, my problem is that i'm not entirely sure how to set every day from this json to have a specific color like, json array -> {textColor: 'red', {backgroundColor: 'blue} for every day coming from this api – Nicolas Silva May 06 '20 at 15:27

1 Answers1

2

with an array who looks like

['yyyy-mm-dd','yyyy-mm-dd','yyyy-mm-dd']

you can just map on it like that :

var customMarkedDates = {};
var arrayOfDates =  ['2020-11-06','2020-11-25','2020-08-12'];
arrayOfDates.map((day) => {
          customMarkedDates[day] = {
            customStyles: {
              container: {
                backgroundColor: "red",
              },
              text: {
                color: "white",
                fontWeight: "bold",
              },
            },
          };
        });

this.setState({customMarkedDates: customMarkedDates})

Then you can call it in your calendar like markedDates={this.state.customMarkedDates} and change it when you need to.

InovaXion
  • 21
  • 2