reference-url: https://fullcalendar.io/docs/events-function
The below is a way to provide events as a function to to the FullCalendar. How would I write this in a react functional component, I fetch the data using graphql, which is a bit different.
function(info, successCallback, failureCallback) {
req.get('myxmlfeed.php')
.type('xml')
.query({
start: info.start.valueOf(),
end: info.end.valueOf()
})
.end(function(err, res) {
if (err) {
failureCallback(err);
} else {
successCallback(
Array.prototype.slice.call( // convert to array
res.getElementsByTagName('event')
).map(function(eventEl) {
return {
title: eventEl.getAttribute('title'),
start: eventEl.getAttribute('start')
}
})
)
}
})
and here's my current function, it returns a simple array.. how would I implement the callback and callback fail as they mentioned in the documents.
const fetchData = async () => {
const { searchEvents: myEvents } = await searchEvents()
try {
const data = myEvents.content.forEach((x) => {
x.start = new Date(x.start)
x.end = new Date(x.end)
})
setIsPageLoaded(true)
calendarRef.current.getApi().addEventSource(data)
return clonedata
} catch (err) {
console.log(err)
}
return true
}
I would recommend writing a simple fetchFeed function that only takes care of fetching the data. Using promises, you can avoid the many drawbacks of callback-oriented designs -
function fetchFeed (start, end) {
return new Promise((success, failure) => {
req
.get("myxmlfeed.php")
.type("xml")
.query({ start, end })
.end((err, res) => {
if (err)
failure(err)
else
success(res)
})
})
}
Now we can call fetchFeed with some startDate and some endDate. The positive result can be processed in .then(...) and any error can be addressed in .catch(...) -
fetchFeed(startDate, endDate)
.then(res => {
// ...
})
.catch(err => {
console.log(err)
})
Promises received additional support with async and await syntax that makes writing this kind of program even more natural -
async function updateFeed (...) {
const res = await fetchFeed(startDate, endDate)
for (const e of res.getElementsByTagName("event")) {
// ...
}
}
updateFeed(...).then(console.log).catch(console.error)