reactjsreact-nativereact-native-calendars

React native calendar wix/react-native-calendars multi-dot not working


Hi I need to update the multi-dot on the calendar on monthly changes

It seems like it's only working on debug mode. The document says the marked date object is immutable. How do I refresh the calendar on new markedDates object

const [calenderDots, setCalenderDots] = useState({});

const pins = [
  { key: 'medication', color: 'green' },
  { key: 'doctorNote', color: 'red' },
];

const formatDots = (data) => {
  return data.reduce((initial, current) => {
    return Object.assign(initialValue, { [data?.date]: { dots: pins } });
  });
};

const fetchMonthlyData = async (date) => {
  const response = await fetchData(date);
  setCalenderDots(formatDots(response));
};

return <Calendar onMonthChange={fetchMonthlyData} markedDates={calenderDots} />;

Any idea on this issue. I could not find any better solution. Please help

I'm facing exactly this issue


Solution

  • Since marked dates not working for me. I have used render day props to implement dots under each day

    return <Calendar 
             onMonthChange={fetchMonthlyData} 
             //markedDates={calenderDots}
             dayComponent={({date})=><CustomDotsComponent date={date} />}
             />;
    
    //dots <Text>&bull;</Text>