在react fullcalendar中从数据库映射现有事件时遇到问题

Question

我在用要显示的事件字段映射数据库列时遇到问题。我正试图在乌蒂尔内部添加我的呼叫。

----Event.jsx-----
import React from "react";
import FullCalendar, { formatDate } from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { INITIAL_EVENTS, createEventId } from "./Util";
export default class EventCalander extends React.Component {
state = {
weekendsVisible: true,
currentEvents: [],
};

render() {
return (
<div className="demo-app">
{this.renderSidebar()}
<div className="demo-app-main">
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay",

}}
initialView="timeGridWeek"
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
weekends={this.state.weekendsVisible}
initialEvents={ INITIAL_EVENTS } // alternatively, use the `events` setting to fetch from a feed
select={this.handleDateSelect}
eventContent={renderEventContent} // custom render function
eventClick={this.handleEventClick}
eventsSet={this.handleEvents} // called after events are initialized/added/changed/removed
/* you can update a remote database when these fire: 
eventAdd={async function()}
eventChange={function()}
eventRemove={function() }*/
/>
</div>
</div>
);
}
renderSidebar() {
return (
<div className="demo-app-sidebar">
<div className='demo-app-sidebar-section'>
<h2>Instructions</h2>
<ul>
<li>Select dates and you will be prompted to create a new event</li>
<li>Drag, drop, and resize events</li>
<li>Click an event to delete it</li>
</ul>
</div> 
<div className="demo-app-sidebar-section">
<label>
<input
type='checkbox'
checked={this.state.weekendsVisible}
onChange={this.handleWeekendsToggle}
></input>
toggle weekends
</label> 
</div>
<div className="demo-app-sidebar-section">
<h2>All Events ({this.state.currentEvents.length})</h2>
<ul>{this.state.currentEvents.map(renderSidebarEvent)}</ul>
</div>
</div>
);
}
handleWeekendsToggle = () => {
this.setState({
weekendsVisible: !this.state.weekendsVisible,
});
};
handleDateSelect = (selectInfo) => {
let title = prompt("Please enter a new title for your event");
let calendarApi = selectInfo.view.calendar;
calendarApi.unselect(); // clear date selection
if (title) {
calendarApi.addEvent({
id: createEventId(),
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay,
});
}
};
handleEventClick = (clickInfo) => {
if (
confirm(
`Are you sure you want to delete the event '${clickInfo.event.title}'`
)
) {
clickInfo.event.remove();
}
};
handleEvents = (events) => {
this.setState({
currentEvents: events,
});
};
}
function renderEventContent(eventInfo) {
return (
<>
<b>{eventInfo.timeText}</b>
<i>{eventInfo.event.title}</i>
</>
);
}
function renderSidebarEvent(event) {
return (
<li key={event.id}>
<b>
{formatDate(event.start, {
year: "numeric",
month: "short",
day: "numeric",
})}
</b>
<i>{event.title}</i>
</li>
);
}

这是我打电话的地方。我正在尝试替换INITIAL_events中的硬编码事件，并将其替换为数据库中的值，但我无法将数据库值映射为事件属性。

-----Util.js-----
let eventGuid = 129;
let todayStr = new Date().toISOString().replace(/T.*$/, ""); // YYYY-MM-DD of today
initialEvents ={
async function() {
const response = await fetch(
"http://localhost:2999/getall");
const data = await response.json();
console.log(data.length);
console.log(data);
}
}
export const INITIAL_EVENTS = [ 
{
id: createEventId(),
title: "All-day event",
start: todayStr,
},
{
id: createEventId(),
title: "Timed event",
start: todayStr + "T12:00:00",
},
];
export function createEventId() {
return String(eventGuid++);
}

`

Answer 1

这是一个在日历中动态填充数据库数据的解决方案。我声明了状态变量-DBEvents:[]，调用函数calendarValue((来代替INITIAL_EVENTS，后者调用rest来获取数据。

----Event.jsx-----
import React from "react";
import FullCalendar, { formatDate } from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { INITIAL_EVENTS, createEventId } from "./Util";
export default class EventCalander extends React.Component {
state = {
weekendsVisible: true,
currentEvents: [],
DBEvents:[],
};
calendarValue = (events) => {
const response = fetch(
"http://localhost:2999/get");
events = response.json();
this.setState({
DBEvents: events,
});
return this.state.DBEvents;
}
render() {
return (
<div className="demo-app">
{this.renderSidebar()}
<div className="demo-app-main">
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay",

}}
initialView="timeGridWeek"
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
weekends={this.state.weekendsVisible}
initialEvents={ () => this.calendarValue() } // alternatively, use the `events` setting to fetch from a feed
select={this.handleDateSelect}
eventContent={renderEventContent} // custom render function
eventClick={this.handleEventClick}
eventsSet={this.handleEvents} // called after events are initialized/added/changed/removed
/* you can update a remote database when these fire: 
eventAdd={async function()}
eventChange={function()}
eventRemove={function() }*/
/>
</div>
</div>
);
}
renderSidebar() {
return (
<div className="demo-app-sidebar">
<div className='demo-app-sidebar-section'>
<h2>Instructions</h2>
<ul>
<li>Select dates and you will be prompted to create a new event</li>
<li>Drag, drop, and resize events</li>
<li>Click an event to delete it</li>
</ul>
</div> 
<div className="demo-app-sidebar-section">
<label>
<input
type='checkbox'
checked={this.state.weekendsVisible}
onChange={this.handleWeekendsToggle}
></input>
toggle weekends
</label> 
</div>
<div className="demo-app-sidebar-section">
<h2>All Events ({this.state.currentEvents.length})</h2>
<ul>{this.state.currentEvents.map(renderSidebarEvent)}</ul>
</div>
</div>
);
}
handleWeekendsToggle = () => {
this.setState({
weekendsVisible: !this.state.weekendsVisible,
});
};
handleDateSelect = (selectInfo) => {
let title = prompt("Please enter a new title for your event");
let calendarApi = selectInfo.view.calendar;
calendarApi.unselect(); // clear date selection
if (title) {
calendarApi.addEvent({
id: createEventId(),
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay,
});
}
};
handleEventClick = (clickInfo) => {
if (
confirm(
`Are you sure you want to delete the event '${clickInfo.event.title}'`
)
) {
clickInfo.event.remove();
}
};
handleEvents = (events) => {
this.setState({
currentEvents: events,
});
};
}
function renderEventContent(eventInfo) {
return (
<>
<b>{eventInfo.timeText}</b>
<i>{eventInfo.event.title}</i>
</>
);
}
function renderSidebarEvent(event) {
return (
<li key={event.id}>
<b>
{formatDate(event.start, {
year: "numeric",
month: "short",
day: "numeric",
})}
</b>
<i>{event.title}</i>
</li>
);
}