Salut,
je suis en train de mettre en place un calendrier sur un site avec le module Big-Calendar de React. Pour cela je récupère la liste des évènements stockés dans la base de donnée en faisant un fetch
sur l’API dans la fonction getEvents
. Le problème c’est que je dois mettre le résultat de ce fetch dans une variable qui est accessible en dehors de la Promise (la variable events
dans le code ci-dessous) pour pouvoir la passer en argument au calendrier.
J’ai lu pas mal de truc sur l’utilisation des Promise et le code asynchrone en JS mais j’arrive toujours pas à résoudre mon problème, donc je pense que je mis prends juste mal… :/
Le code est le suivant :
import React, { Fragment, useMemo } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import {
Calendar,
Views,
DateLocalizer,
momentLocalizer
} from 'react-big-calendar'
import DemoLink from './calendar_example/DemoLink.component.js'
//import events from './calendar_example/event'
import * as dates from './calendar_example/dates'
const mLocalizer = momentLocalizer(moment)
async function getEvents() {
response = await fetch('/api/events')
.then(
result => {
return result.json()
},
error => {
console.error("Error getting the events: " + error)
}
)
events = response.results
addOneHour = d => {
d.setHours(d.getHours() + 1)
return d
}
let formatted_events = [] // Events formatted for BigCalendar
for (e of events) {
formatted_events.push(
{
id: e.id,
title: e.name,
desc: e.description,
start: new Date(e.date),
end: addOneHour(new Date(e.date))
}
)
}
return formatted_events
}
const ColoredDateCellWrapper = ({ children }) =>
React.cloneElement(React.Children.only(children), {
style: {
backgroundColor: 'lightblue'
}
})
/**
* We are defaulting the localizer here because we are using this same
* example on the main 'About' page in Storybook
*/
export default function Basic ({
localizer = mLocalizer,
showDemoLink = true,
...props
}) {
const { components, defaultDate, max, views } = useMemo(
() => ({
components: {
timeSlotWrapper: ColoredDateCellWrapper
},
defaultDate: new Date(2015, 3, 1),
max: dates.add(dates.endOf(new Date(2015, 17, 1), 'day'), -1, 'hours'),
views: Object.keys(Views).map((k) => Views[k])
}),
[]
)
return (
<>
<div className='height600' {...props}>
<Calendar
components={components}
defaultDate={defaultDate}
events={events}
localizer={localizer}
max={max}
showMultiDayTimes
step={60}
views={views}
/>
</div>
</>
)
}
Basic.propTypes = {
localizer: PropTypes.instanceOf(DateLocalizer),
showDemoLink: PropTypes.bool
}
Merci d’avance pour votre aide
PS : Je suis désolé, le titre du post est pourri mais je savais vraiment pas quoi mettre pour être explicite