如何从 api 动态填充日历标记的日期 - React Native,redux
Posted
技术标签:
【中文标题】如何从 api 动态填充日历标记的日期 - React Native,redux【英文标题】:How to dynamically populate Calendar marked dates from api - React Native, redux 【发布时间】:2021-01-10 14:59:36 【问题描述】:正如标题所说,我需要填充从日历组件中的 API 获取的标记日期(我正在使用“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" ,
/>
这工作正常,但我的问题是如何从 API 动态标记天数。这是我的代码
当我登录时,const 日历返回
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",
,
]
这是完整的代码:
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" ,
/>
每一个建议都会很好。谢谢
【问题讨论】:
【参考方案1】:解决方案:
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
...
/>
注意组件Calendar-markedDates = ,markedDates必须在单个中,因为markedDay是对象。所以你不能像在文档中那样设置
【讨论】:
以上是关于如何从 api 动态填充日历标记的日期 - React Native,redux的主要内容,如果未能解决你的问题,请参考以下文章
在EXCEL中插入日历控件后,如何添加到单元格上(带下拉箭头),点击后出现日历,选择一个日期自动填充并隐
如何在 Google 日历 API v3 中获取特定日期的日历数据?