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

Question

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

score 0 · Accepted Answer · answered Sep 29 '21 at 03:37

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>

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

1 Answers1