How to load data from database into event calendar?

I want to display my event calendar inline, and I found a demo that shows how to do that: JQuery Event calendar Desktop month view Example | Mobiscroll

Unfortunately, the demo code is completely different than the documentation code and it’s not explained.

In the documentation it only shows how to bind it to an input: Responsive event calendar documentation for JQuery | Mobiscroll

The demo code for the inline calendar shows the following:

mobiscroll.util.getJson('https://trial.mobiscroll.com/events/', function (events) {
        inst.setEvents(events);
    }, 'jsonp');

but it doesn’t explain in what format https://trial.mobiscroll.com/events/ returns data. Your code uses a function called “getJson” but I can’t find any documentation on that either.

I’ve created a PHP script that generates a json string but if I point this function at my script instead of https://trial.mobiscroll.com/events/, I get no data in my calendar. For example, my script returns the following json string:

{“d”:“2020-04-23”,“text”:“Davey Crocket, Tjarda”}

This does not work. What’s the trick, and where is the documentation for this?

1 Like

Hi @Vincent_Wansink ,

You can pass an array of objects to the Event calendar component and you can check the objects supported parameters here.

The url in the demo which you were referring to returns JSONP format for avoiding CORS issues when the users are trying out the demo. If you just changed the url in the demo code, then probably that is the source of the problem, because you were just returning simple JSON format. To fix this you can modify the third parameter to json(from jsonp) or use the jQuery getJson alternative.

Thank Szili, except I’m still having problems. I’ve changed the third parameter to ‘json’ as you suggested, but what my script is returning is still not being populated in the calendar. So I wanted to just test a very simple json object by passing it directly into the setEvents function like so:

inst.setEvents({d:‘2020-04-23’,text:‘Davey Crocket, Tjarda’});

This is still not working. Is there something wrong with this format?

I also tried it with quotes around the keys, but this also doesn’t work.

inst.setEvents({‘d’:‘2020-04-23’,‘text’:‘Davey Crocket, Tjarda’});

I got it working. I was missing the square brackets around the json. So the following works:

inst.setEvents([{d:‘2020-04-23’,text:‘Davey Crocket, Tjarda’}]);