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;

如何获取fullcalendar以在初始渲染时显示日历？

1 个答案: