Topic: MDBCalendar plugin does not load events asynchronously
MDBCalendar is a wonderful plugin but unlike the original full calendar library, you can't load your events on the fly and you have to have fed them via the defaultEvents attribute initially. I would like to be able to load my events based on the calendar navigation which is the optimal way for server side queries. Is there no data attribute for this plugin to load the events after initial render?
Example:
function App() {
const [data, setData] = useState([
{
summary: 'JS Conference',
description: '',
start: {
date: '05/05/2023',
},
end: {
date: '05/05/2023',
},
color: {
background: 'rgb(207, 224, 252)',
foreground: 'rgb(10, 71, 169)',
},
},
]);
const loadPrev = () {
setData([
{
summary: 'PHP Conference',
description: '',
start: {
date: '05/04/2023',
},
end: {
date: '05/04/2023',
},
color: {
background: 'rgb(207, 224, 252)',
foreground: 'rgb(10, 71, 169)',
},
},
]);
};
return (
<MDBCalendar
defaultEvents={data}
onPrev={loadPrev}
/>
);
}
in the Calendar plugin you can use the onPrev and onNext handlers and use them to make the appropriate request to the API for new events and using defaultEvents to set the newly downloaded events. If you want to add events after rendering Calendar Plugin you can pass an empty array as defaultEvents and update this prop after loading data from API.
clickstudioltd pro premium priority commented 2 years ago
Sir, this does not work. If you try to change defaultEvents after the initial render, events shown on the calendar will not update.
Grzegorz Bujański staff commented 2 years ago
Can you provide an example of how you update the defaultEvent props? Do you assign state to it and update state or is it just a variable?
clickstudioltd pro premium priority commented 2 years ago
It is assigned via a React state. I reset the state with newly fetched items to show for the current month of the calendar. It's really nothing unusual, I will put an example in my question. I believe the defaultEvents is only being used for the initial value of the internal events state in this component, so there should be a mechanism like an events attribute to update this state after initial setup.
Grzegorz Bujański staff commented 2 years ago
Thank you for reporting. Indeed, there seems to be a problem. We will fix it as soon as possible.
You can hack it that hide calendar before load you data, like this:
const [yourEvents, setYourEvents] = useState([]);
.... your api for loading
{ yourEvents.length > 0 && <MDBCalendar defaultEvents={yourEvents}/> }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 6.0.0
- Device: PC
- Browser: Mozilla Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No