javascript - Full Calendar loads before the data loads -

My full calendar will load after a few seconds, data will appear. I am loading my data with JSON I have tried to add a loading icon to Loading but it shows the loading icon, calendar and then the data is visible, so this is the same The issue is

Any calendar and data to load at the same time?

This is my code.

  $ (document) .ready (function () {$ ('# calendar'). Fullcalendar ({header: {left: 'previous, next to next', center: 'title' True: 'Month, Basic Options, Basic'}, Default View: 'Original', All Dell Slots: True, Selectable: True, Weekend: Wrong, Theme: True, eventLimit: true, eventLimitClick: 'week', eventTextColor: '# 000000', // Black Event: '/ MEO / GetCalendarEvents /', eventClick: function (calEvent, jsEvent, view) {warning (calEvent.title)}, loading: function (boole) {if (bool) {$ ('# Loading'). Show ();} and {$ ('# l oading') to hide ().}}}});});  

CSS

  & lt; Div id = 'calendar' style = "width: 100%" & gt; & Lt; / Div & gt; & Lt; Div id = "loading" & gt; Loading ... & lt; / Div & gt;  

You want Calendar to appear with preloaded data (no empty Calendar then data appears a few seconds later). My suggestion; First get your data and move your calendar load function to the callback of the function that loads your data.

  Event: MEO / GetCalendarEvents / ',  

Get data through a jquery AJAX call, and load data Initialize the calendar after being done. You will load the calendar with all the events already on it.