Question 33625 in React native Question posted in
The official React Native documentation can be found here.

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


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

}

enter image description here

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

Tags:

2

Answers


  1. 0

    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'    
        },
      }
     }
  }}
/>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search