禁用 FullCalendar 调用 Ajax

Question

我又来了。我正在使用FullCalendar，我使用属性"events"来获取议程的值并显示给用户。

想知道在触发此事件之前，您是否有某种形式，让 FullCalendar 禁用，直到返回 Ajax 请求？

这是代码：

$('#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);
    }
});

传统知识

Answer 1

我认为没有一种方法可以完全禁用日历。但是，如果您只是尝试限制用户与日历的任何交互，则可以在 ajax 调用之前将可编辑、可删除和可选属性设置为 false，然后在成功/完整的 ajax 回调中将它们切换回来。这应该可以防止用户在此期间操作日历上的任何内容。

Answer 2

我找到的解决方案是这个，并在下面开发。在调用 Ajax 的事件之前，你创建一个不带任何按钮的对话框 JQuery，一切正常后，它会自动关闭。

如果它显示另一个错误消息，我想实现，但事实上，很容易做到......

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