Using remote data with event calendar - need example

Event calendars & schedulers
1

I am using an event calendar - the relevant sample code shows:

    onPageLoading: function (event, inst) {
    let year = event.month.getFullYear(),
        month = event.month.getMonth();

    mobiscroll.util.http.getJson('https://trial.mobiscroll.com/monthlyevents/?year=' + year + '&month=' + month + '&vers=5', function (data) {
        let events = [];

        for (let i = 0; i < data.length; i++) {
            events.push({
                start: data[i].start,
                end: data[i].end || '',
                allDay: data[i].allDay,   // set to always false in constructor
                title: data[i].title,
                color: data[i].color
            });
        }

I beiieve that the 4th line, which ends in function(data) is passing ‘data’ parameter in (from where, I don’t know). Is this the data used to build the events on the calendar. How do I get my own data (which is an array of objects) to display in the code? Any help is appreciated.

CC

2

Hello @Cindy1 :wave:

We have two solutions main solutions for loading events into Mobiscroll components:

  1. Loading inline data - where you need to pass the event array to the data option.

  2. Loading events from remote API - this is what you need - The calendar can be populated by passing an array to the data option, that you can get it from a remote API. The important thing to remember is that events need to be in a format that the calendar understands.

I’ll try to explain how this second solution works. As you can see from the Event Calendar demos (in most cases) the events are loaded from an external link with the help of getJson function.
This means if you open the link: https://trial.mobiscroll.com/events/?vers=5&callback=? - which is passed to the getJson, you will see the events but also, that is the place where you need to pass the event properties.

Also, if you need more help regarding the getJson function, you will find relevant information in this article: Common errors and how to fix them | Mobiscroll Help Center - make sure to check section: 9. Events are not loaded/shown in the Event Calendar

So, the solution would be simple, if you want to load events from a remote API, make sure to customize, change the link which is passed in the getJason function.

One more thing: you shared the code for the loading on demand example, but you will need to use the remote API example as I mentioned above. Besides that, the same is applicable to the loading evens on demand solution as well.

Let me know if this explains.

4

I think the solution that fits what I am doing best is the inline one. I call the remote database, run a query, and get the dates back (use AJAX call - I’m using Javascript). The call returns an array that contains an array for each record returned. However, I can’t get the ‘data’ key to take this. Can you point me to any examples of this? Thanks -

5

Hi @Cindy1,

I think the missing part that you are looking for is the setEvents method of the eventcalendar instance.
In the example you shared in your initial message, this part is missing. The function you referred to (that processes the “data”) only creates the array from a remote source.

If you already have the events array you will need to call the setEvents method to apply those events to the eventcalendar. For example:

var inst = mobiscroll.eventcalendar('#eventcalendar');

// lets say you have your events in the myevents array:
var myEvents = [/*...*/];

// set the events to the eventcalendar
inst.setEvents(events);

Let us know if that helps!