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);
    }
});

TKS

Answer 1

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

Answer 2

我找到的解决方案是这个并在下面开发。在调用Ajax的事件之前，你创建了一个没有任何按钮的Dialog 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>

禁用FullCalendar调用Ajax

2 个答案: