Topic: MDBCalendar plugin does not load events asynchronously

clickstudioltd priority asked 10 months 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 8 months 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 10 months 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 10 months 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 10 months 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 priority commented 10 months 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 10 months ago

Thank you for reporting. Indeed, there seems to be a problem. We will fix it as soon as possible.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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
Tags