Disable FullCalendar call Ajax - fullcalendar

Question

I'm here again.
I'm using FullCalendar, I use the property "events" to get the values ​​of the agenda and show to the user.
Wanted to know if you have some form of before firing this event, let the FullCalendar disabled until the return to Ajax request?
This is code:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 10,
firstHour: 7,
minTime: '7:00am',
slotEventOverlap: false,
events: '/Agenda/GetDiaryEvents/',
eventClick: function (calEvent, jsEvent, view) {
alert('You clicked on event id: ' + calEvent.id
+ "\nSpecial ID: " + calEvent.someKey
+ "\nAnd the title is: " + calEvent.title
+ "\nMédico: " + calEvent.Medico);
}
});
tks

Answer 1

I don't think there is a single method to disable the calendar completely. But if you are just trying to restrict any user interaction with the calendar you can set the editable, droppable, and selectable attributes to false before the ajax call, then toggle them back in your success/complete ajax callback. This should prevent the user from manipulating anything on the calendar during that time....

Answer 2

The solution I found was this and developed below.
Before calling the events of Ajax, you create a Dialog JQuery without any button, and after it's all ok, it closes automatically.
I want to implement if it goes to show another error message, but as there is, is pretty easy to do ...
<script>
$(document).ready(function () {
$("#loading").dialog({
modal: true,
autoOpen: false,
closeOnEscape: false
});
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 30,
firstHour: 7,
minTime: '7:00am',
slotEventOverlap: false,
/*events: '/Agenda/GetDiaryEvents/',*/
events: {
url: '/Agenda/GetDiaryEvents/',
type: 'GET',
data: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
beforeSend: function() {
$("#loading").parent().children().children('.ui-dialog-titlebar-close').hide();
$("#loading").dialog('open');
},
success: function () {
},
error: function() {
alert('there was an error while fetching events!');
},
complete: function () {
$("#loading").dialog('close');
},
},
eventClick: function (calEvent, jsEvent, view) {
alert('You clicked on event id: ' + calEvent.id
+ "\nSpecial ID: " + calEvent.someKey
+ "\nAnd the title is: " + calEvent.title
+ "\nMédico: " + calEvent.Medico);
}
});
$('#datepicker').datepicker({
inline: true,
onSelect: function (dateText, inst) {
var d = new Date(dateText.substr(3, 2) + "/" + dateText.substr(0, 2) + "/" + dateText.substr(6, 4));
$('#calendar').fullCalendar('gotoDate', d);
},
dateFormat: 'dd/mm/yy',
dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
nextText: 'Próximo',
prevText: 'Anterior'
});
$('.fc-button-prev').click(function () {
alert('prev is clicked, do something');
var view = $('#calendar').fullCalendar('getView');
alert("The view's title is " + view.title);
alert("start: " + view.start);
alert("start: " + view.end);
});
$('.fc-button-next').click(function () {
alert('nextis clicked, do something');
});
});
</script>
<div class="linha">
<div id="datepicker"></div>
</div>
<div class="linha">
<div id='calendar'></div>
</div>
<br />
<br />
<br />
<br />
<div id="loading" title="Processando...">
<p>Aguarde buscando dados...</p><br /><br />
<img src="#Url.Content("~/Content/images/icon_48x48_ajax.png")" title="Carregando" />
<br /><br />
</div>