selected day background color and text color not changing on press

[cgrady3]

Description

doing calendar with multi dot marking. selectedDayBackgroundColor and selectedDayTextColor not changing on day press

no error messages

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: [email protected]
• npm ls react-native: [email protected]

Also specify:

1. Device/emulator/simulator & OS version: working on expo go

[Inbal-Tish]

@cgrady3 Hi. Please add a snippet of your code and try new version to see if fixed.

[Joseph-LouisLagrange]

I also encountered this problem, I directly used <Calendar/>,but it can display but cannot select the day number

[Nadeemkhan122]

hi also facing this issue.

[DejiAwoniyi]

Also facing this issue. has it been solved?

[FaysalBsata]

i have to switch libraries because of this issue

[Nziranziza]

I am also having the same issue!

[Inbal-Tish]

@cgrady3 @Joseph-LouisLagrange @Nadeemkhan122 @DejiAwoniyi @Nziranziza Can someone please provide a code snippet so I can have an example to work with? I need to see what you're doing to give an answer/solution.

[Inbal-Tish]

@cgrady3 If you're passing these keys in the theme prop you should know that it's not dynamic. The theme prop is passed once to the stylesheet and is not updated by a state change. In your case, where you want to change the SELECTED day background and text colors, I'll suggest using the markedDates prop. To the selected date you can pass selectedColor and selectedTextColor keys which will change dynamically as the selected date changes. For example:

  const [selected, setSelected] = useState(INITIAL_DATE);
  const [bgColor, setBgColor] = useState('blue');
  const [textColor, setTextColor] = useState('red');

  const onDayPress = useCallback((day) => {
    setSelected(day.dateString);
    setBgColor('orange');
    setTextColor('black');
  }, []);

  const markedDates = useMemo(() => {
    return {
      [selected]: {
        selected: true,
        disableTouchEvent: true,
        selectedColor: bgColor,
        selectedTextColor: textColor
      },
      ['2022-07-22']: {
        dotColor: 'red',
        marked: true
      }
    };
  }, [selected]);

[WhiteClouds2009]

@Inbal-Tish just simple used, and it cannot show the selected <Calendar />

[Inbal-Tish]

@Inbal-Tish just simple used, and it cannot show the selected <Calendar />

Of course not, the selected date is controlled by the user, meaning you need to mark it if you want.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.