React Native calendrer working properly but I want if add event to specific date in date color change

Question


function Four({ navigation, route }) {
    const { dateTime } = route.params;
    const [name, setName] = useState();
    const [note, setNote] = useState();
    const [des, setDes] = useState();
    const [result, setResult] = useState();

    return (
        <View>
            <TextInput
                value={dateTime}
            />
            <Text>{'\n'}</Text>

            <TextInput
                placeholder="Enter Event Title"
                value={name}
                onChangeText={value => {
                    setResult(value);
                    setName(value);
                }}
            />
            <Text>{'\n'}</Text>

            <TextInput
                placeholder="Enter Note"
                value={note}
                onChangeText={value => {
                    setNote(value);
                    setResult(value);
                }}
            />

            <Text>{'\n'}</Text>

            <TextInput
                placeholder="Enter Description"
                value={des}
                onChangeText={value => {
                    setDes(value);
                    setResult(value);
                }}
            />
            <Text>{'\n'}</Text>
            <Button
                title="add event"
                onPress={() =>
                    navigation.navigate('three', {
                        paramKey: dateTime,
                        paramKey1: name,
                        paramKey2: note,
                        paramKey3: des
                    })
                }
            />
        </View>
    );

}

This is my output

I want to like this
if I selected 23-12-2022 date this date in the calendar background color change
and It didn't change until I reloaded the app
and also if I add a new event then the first event is not removed in flatlist it display all the event when I'm not deleted myself

https://stackoverflow.com/questions/74770059/react-native-calendar here is code... — , Dec 13 '22 at 04:25
I don't totally understand what you're trying to achieve. So what you want is the background color of that calendar date to change when you click a date? and right now, it only change when you reload the app? is that right? — jted95, Dec 13 '22 at 04:27
Same as an android calendar because when you select a date, the background color changes. but I want when I create an event on a date, its color turns on green, which indicates that there is an event, so I reload the app. Do this until the background color changes — , Dec 13 '22 at 04:36
@DharaPatel, so you want the date which has event to have different color (ex, green) on the calendar and you want the event list to persist and not change for each date change, right? — jted95, Dec 13 '22 at 04:44
@DharaPatel, ok. I'll try to answer it after I finish my work — jted95, Dec 13 '22 at 08:09

score 0 · Answer 1 · answered Dec 13 '22 at 04:31

You can take one state and modify it when click on date for add event and apply it to marked dates.

<Calendar
  markingType={'custom'}
  markedDates={{
    '2018-03-28': {
      customStyles: {
        container: {
          backgroundColor: 'green'
        },
        text: {
          color: 'black',
          fontWeight: 'bold'    
        },
      }
     }
  }}
/>

score 0 · Answer 2 · answered Dec 13 '22 at 11:48

In the Three component,

Change the states from a single string to an array of string, and adjust the input in Calendar component.

change

const [date, setDate] = useState("")

to

const [dates, setDates] = useState([]);
const markedDates = useMemo(() => {
  const result = {};
  for (let i = 0; i < dates.length; i++) {
    const el = dates[i];
    result[el] = {
      customStyles: {
        container: {
          backgroundColor: 'green',
        },
        text: {
          color: 'black',
          fontWeight: 'bold',
        },
      },
    };
  }
  return result;
}, []);


...
      <Calendar
        markedDates={markedDates}
        current={getCurrentDate().toString()}
        minDate={getMinDate().toString()}
        maxData={'2050-01-01'}
        monthFormat={'MMMM yyyy'}
        onDayPress={(day) => {
          setDate(day.dateString);
          setDateColor('#000');
        }}
        hideArrows={false}
        hideExtraDays={true}
        disableMonthChange={false}
        firstDay={1}
        theme={{
          todayTextColor: 'red',
        }}
      />
...

This way, you can have multiple markedDates.

What you have to do next is to connect it to your form where you make new event. I can't help make everything from scratch, so this part need to be from you.

React Native calendrer working properly but I want if add event to specific date in date color change

This is my output

2 Answers2