我如何得到完整的日历显示日历在初始渲染

Question

当我最初加载日历时，它会加载带有所有标题/按钮的日历，而不是实际的日历本身。我必须按下"今天"按钮，它才能载入今天这一周的日历。知道如何在初始加载时做到这一点吗?如果有帮助，这是我正在使用的代码。我不知道这里发生了什么，我从别人那里继承了这件作品，这是我第一次看到这个完整的日历插件。

function calendar() {
    //gets saved events
    var sourceFullView = { url: '/Calendar/GetDiaryEvents/' };
    var sourceSummaryView = { url: '/Calendar/GetDiarySummary/' };
    var CalLoading = true;
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        editable: true,
        allDaySlot: false,
        selectable: true,
        slotMinutes: 15,
        events: '/Calendar/GetDiaryEvents/',
        eventClick:
            function(calEvent) {
                //modal located at the bottom of the page
                var modalElementId = $("#modal");
                //url located in the Calendar controller. CalEvent Id referes to event id
                var url = GetUrlPath() + '/Calendar/OpenDetailsModal?id=' + calEvent.id;
                var appointmentId = calEvent.id;
                //These are defined at the top of the page
                $('#DiaryEventID').val(appointmentId);
                $('#DiaryEventID').val("");
                var viewModel = new CalenderViewModel(appointmentId);
                showEditModal(null, viewModel, url, modalElementId);
                $('.modal-backdrop').removeClass('modal-backdrop');
            },
        eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
            if (confirm("Confirm move?")) {
                UpdateEvent(event.id, event.start);
            } else {
                revertFunc();
            }
        },
        eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
            if (confirm("Confirm change appointment length?")) {
                UpdateEvent(event.id, event.start, event.end);
            } else {
                revertFunc();
            }
        },
        dayClick: function(date, allDay, jsEvent, view) {
            $('#eventTitle').val("");
            setTimeout(ShowClientEventModal(), 100);
            for (i = 0; i < 2; i++) {
                if (date != "") {
                    $('#eventClientDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
                    $('#eventClientTime').val($.fullCalendar.formatDate(date, 'HH:mm'));
                    $("#eventClientDate").datepicker({ dateFormat: 'dd/mm/yy' });
                }
            }
        },
        viewRender: function(view, element) {
            if (!CalLoading) {
                if (view.name == 'month') {
                    $('#calendar').fullCalendar('removeEventSource', sourceFullView);
                    $('#calendar').fullCalendar('removeEvents');
                    $('#calendar').fullCalendar('addEventSource', sourceSummaryView);
                } else {
                    $('#calendar').fullCalendar('removeEventSource', sourceSummaryView);
                    $('#calendar').fullCalendar('removeEvents');
                    $('#calendar').fullCalendar('addEventSource', sourceFullView);
                }
            }
        }
    });
    CalLoading = false;
}

更多信息，这很奇怪，但是当我在浏览器上按F12进入开发人员工具时，日历突然呈现，好像我按了今天按钮。但是，当我打开调试器进入日历页面时，它呈现的标题没有日历内容。这到底是怎么回事?

Answer 1

我建议您尝试删除与CalLoading相关的所有代码，因此从顶部删除变量赋值，删除整个viewRender函数，并在底部删除变量赋值给false。它看起来像某种类型的函数不显示事件，直到它们全部加载，或类似的东西，我的猜测是它不能正常工作。

编辑:看起来该函数在月视图上将事件源交换为sourceSummaryView，而在任何其他视图上交换为sourceFullView，因此删除此功能仍将日历默认为sourceFullView，但我不知道两者的区别，因此您只需要尝试看看它是如何工作的。

var CalLoading = true;
viewRender: function(view, element) {
    if (!CalLoading) {
        if (view.name == 'month') {
            $('#calendar').fullCalendar('removeEventSource', sourceFullView);
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', sourceSummaryView);
        } else {
            $('#calendar').fullCalendar('removeEventSource', sourceSummaryView);
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', sourceFullView);
        }
    }
}
CalLoading = false;