如何从 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是对象。所以你不能像在文档中那样设置 因为这就像markedDates= 。

【讨论】:

以上是关于如何从 api 动态填充日历标记的日期 - React Native,redux的主要内容,如果未能解决你的问题,请参考以下文章

Python实现日历壁纸动态标记

在EXCEL中插入日历控件后,如何添加到单元格上(带下拉箭头),点击后出现日历,选择一个日期自动填充并隐

My97DatePicker日历插件特殊日期做标记的使用

如何在 Google 日历 API v3 中获取特定日期的日历数据?

如何显示带有突出显示日期的 jquery 日历并禁止单击(只读)

验证 RadDatePicker (Telerik Controls) 的日历控制