我目前需要在数据库中动态加载事件,但是经过多次尝试,我仍然没有让它与 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 中将事件作为函数调用吗?
我只是在解决同样的问题,这就是我工作的方式。
我必须将从 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)
})
}
当您将该行更改为
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;
})
将其留在这里以防仍然需要:
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)}
/>
);
};