Search code examples
react-nativereact-native-calendars

React Native Calendars - markedDates color not working

I just want to set some dates in the calendar to have a certain different background colors, this is the code:

import {Calendar} from 'react-native-calendars';
...
    <Calendar
      markedDates={{
        '2023-05-05': {
          color: '#ff0000',
        },
        '2023-05-06': {
          color: '#00ff00',
        },
      }}
   />
...

But it's not working, why though?

enter image description here

Im using version 1.1279.0

Solution

  • According to the source code in react-native-calendars, the markedDates object only use following props.

    MarkingProps extends DotProps {
  type?: MarkingTypes;
  theme?: Theme;
  selected?: boolean;
  marked?: boolean;
  today?: boolean;
  disabled?: boolean;
  inactive?: boolean;
  disableTouchEvent?: boolean;
  activeOpacity?: number;
  textColor?: string;
  selectedColor?: string;
  selectedTextColor?: string;
  customTextStyle?: StyleProp<TextStyle>;
  customContainerStyle?: StyleProp<ViewStyle>;
  dotColor?: string;
  //multi-dot
  dots?: DOT[];
  //multi-period
  periods?: PERIOD[];
  startingDay?: boolean;
  endingDay?: boolean;
  accessibilityLabel?: string;
  customStyles?: CustomStyle;
}

    If you want background colors on your dates, you can set selected as true and fill in selectedColor prop.

    <Calendar
  markedDates={{
    '2023-05-05': {
      selected: true,
      selectedColor: '#ff0000',
    },
    '2023-05-06': {
      selected: true,
      selectedColor: '#ff0000',
    },
  }}
/>