如何在React FullCalendar中使用事件作为函数?

问题描述 投票:0回答:3

我目前需要在数据库中动态加载事件,但是经过多次尝试,我仍然没有让它与 React FullCalendar 一起使用。有人成功让它工作吗?

在这种方法中,我成功地将事件加载到日历中,但是,我的 API 正在不断被调用。这让我认为这是因为我在事件中没有箭头函数

const [events, setEvents] = useState(0);
const getEvents = async () => {
    //Get events from database
    const theEvents = await ...
    setEvents(theEvents);
};

const returnEvent = () => {
    getEvents();
    return events;
}

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {returnEvent()}
/> 

但是,如果我这样做

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {() => returnEvent()}
/> 

我的 API 被连续调用,并且日历上没有加载任何事件。我认为如果你对事件执行箭头函数,则任何事件都不会加载,因为当我执行类似的操作时,它甚至不起作用。

const returnEvent = () => {
    let todayStr = new Date().toISOString().replace(/T.*$/, '') // YYYY-MM-DD of today
    const events = [
      {
        id: createEventId(),
        title: 'All-day event',
        start: todayStr
      },
      {
        id: createEventId(),
        title: 'Timed event',
        start: todayStr + 'T12:00:00'
      }
    ]
    // getEvents();
    return events;
}

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {() => returnEvent()}
/> 

但是,如果我改变

events = {returnEvent()}
它确实有效。有人可以发送一个示例或指导我如何在 React FullCalendar 中将事件作为函数调用吗?

reactjs fullcalendar
3个回答
1
投票

我只是在解决同样的问题,这就是我工作的方式。

我必须将从 api 调用收到的事件放入 successcallback 中。

  <FullCalendar
         displayEventEnd
        initialView="dayGridMonth"
        headerToolbar={{
          left: "prev,next",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay"
        }}
        plugins={[dayGridPlugin, timeGridPlugin]}
        events={(info, successCallback) => getEvents(info, successCallback)}
      />

 const getEvents = (info : any, successCallback: any) =>{
     getAcademicCalendarEvents(info.startStr, info.endStr).then((events) =>{
      successCallback(events)
      })
     }

0
投票

当您将该行更改为

events = {returnEvent()}
时,事件将被分配给调用
returnEvent()
的返回值。

您无需从

returnEvent()
返回任何内容,因为
events
在您的申请状态下可用。如果您想将
events
状态传递给
<FullCalendar>
,您只需将其传递给
events = {events}
属性即可。

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events={events}
/>

显然,当应用程序首次呈现时,事件不会保存任何有意义的内容,因为它被初始化为

0

如果您希望将事件初始化为 API 调用的响应,您可以在

useState
回调函数中返回它:

const [events, setEvents] = useState(() => {
    const res = await fetch('/api/events');
    const data = await res.json();

    return data;
})

0
投票

将其留在这里以防仍然需要:

import React, { useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

const DynamicCalendar = () => {
  const [events, setEvents] = useState([]);

  const fetchEvents = async (start, end) => {
    const response = await fetch(`https://api.example.com/events?start=${start}&end=${end}`);
    const data = await response.json();
    setEvents(data);
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      events={events}
      datesSet={(info) => fetchEvents(info.startStr, info.endStr)}
    />
  );
};
© www.soinside.com 2019 - 2024. All rights reserved.