As title said I need to populate marked dates which im getting from API in Calendar component (i am using "react-native-calendars": "^1.403.0").
enter code here : <Calendar
markedDates={{
"2020-09-15": { selected: true, marked: true, selectedColor: "blue" },
"2020-09-05": { selected: true, marked: true, selectedColor: "blue" },
}}/>
This is working fine, but my problem is how to dynamically mark days from API. here is my code
const calendar returns when im logging
Array [
Object {
"course_id": 1,
"created_at": "2020-09-08T12:52:05.000000Z",
"date": "2020-09-25",
"description": "Amet quas nemo aliquid cupiditate libero deserunt et excepturi.",
"group_id": 1,
"homework": "Illo eveniet est et non molestiae ut ab atque.",
"id": 571,
"time_duration": 89,
"time_start": "14:49:37",
"title": "Ms.",
"updated_at": "2020-09-08T12:52:05.000000Z",
},
Object {
"course_id": 1,
"created_at": "2020-09-08T12:52:09.000000Z",
"date": "2020-09-30",
"description": "Earum similique molestiae sunt praesentium et ea iste deserunt.",
"group_id": 1,
"homework": "Autem aspernatur beatae in rerum rerum sit harum quis.",
"id": 831,
"time_duration": 89,
"time_start": "21:53:01",
"title": "Prof.",
"updated_at": "2020-09-08T12:52:09.000000Z",
},
]
here is whole code:
const CalendarScreen = (props) => {
const dispatch = useDispatch();
const access_token = useSelector((state) => state.auth.token);
const calendar = useSelector((state) => state.calendarClasses.calendar);
const isCalendarLoading = useSelector(
(state) => state.calendarClasses.isCalendarLoading
);
const obj = Object.fromEntries(calendar.map((item) => ["date", item.date]));
let day= JSON.stringify(obj.date);
useEffect(() => {
dispatch(loadCalendar());
dispatch(getCalendar(access_token, childId));
}, [dispatch, getCalendar]);
return (
<Calendar
markedDates={{
day: { selected: true, marked: true, selectedColor: "blue" },
}}
/>
Every suggestion will be nice. Thanks
Solution:
const CalendarScreen = (props) => {
const dispatch = useDispatch();
const access_token = useSelector((state) => state.auth.token);
const calendar = useSelector((state) => state.calendarClasses.calendar);
const isCalendarLoading = useSelector(
(state) => state.calendarClasses.isCalendarLoading
);
useEffect(() => {
dispatch(loadCalendar());
dispatch(getCalendar(access_token, childId));
}, [dispatch, getCalendar]);
let markedDay = {};
calendar.map((item) => {
markedDay[item.date] = {
selected: true,
marked: true,
selectedColor: "purple",
};
});
return (
<Calendar markedDates={ markedDay }
...
/>
}
Pay attention in component Calendar - markedDates = { } , markedDates must be in with single {}, because markedDay is object. So you cant set like it is in documentation <Calendar markedDatse={{ markedDay }} /> because this will be like markedDates= {{{ }}}.