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

CodePudding user response：

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

CodePudding user response：

In the Three component,

1. 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.