Topic: MDBCalendar plugin does not load events asynchronously
clickstudioltd
priority
asked 1 year ago
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}
/>
);
}
japan
priority
answered 1 year ago
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}/> }
Grzegorz Bujański
staff
answered 1 year ago
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 priority commented 1 year 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 1 year ago
Can you provide an example of how you update the defaultEven
t props? Do you assign state to it and update state or is it just a variable?
clickstudioltd priority commented 1 year 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 1 year ago
Thank you for reporting. Indeed, there seems to be a problem. We will fix it as soon as possible.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 6.0.0
- Device: PC
- Browser: Mozilla Firefox
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No