Question

我在fullcalender中添加了一个新事件。在“日”视图中显示时，事件显示为一个div，但当视图更改为“周”时，它显示为两个附加的div。

enter image description here

这是我的脚本代码：

@model Alis.AgentPortal.Models.MeetingVM
@using Alis.AgentPortal.Helpers
@{
    ViewBag.Title = "Calender";
    Layout = "~/Views/Shared/_LayoutforMarketRep.cshtml";
}
@section scripts{
    @Styles.Render("~/Content/Calender")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/scripts")

}


<script type="text/javascript">

    $(document).ready(function () {

        $.ajaxSetup({
            cache: false
        });

        function SetValidate() {
            var valMessage1 = "";
            if ($("#eventTitle").val() == "") {
                valMessage1 = valMessage1 + "Please enter subject.";
                valMessage1 = valMessage1 + "\n";
            }
            if ($("#eventDate").val() == "") {
                valMessage1 = valMessage1 + "Please enter effective date.";
                valMessage1 = valMessage1 + "\n";
            }
            //if ($("#Status").val() == "") {
            //    valMessage1 = valMessage1 + "Please enter Meeting Status.";
            //    valMessage1 = valMessage1 + "\n";
            //}
            var Req = $('#whoRequired').find(":selected").text();
            if (Req == null || Req == "") {
                valMessage1 = valMessage1 + "Please enter required person.";
                valMessage1 = valMessage1 + "\n";
            }
            var numbers = /^[0-9]+$/;
            if (!$('#eventDuration').val().match(numbers)) {
                valMessage1 = valMessage1 + "Please enter appointment length in numeric.";
                valMessage1 = valMessage1 + "\n";
            }

            return valMessage1;
        }

        $("#btnPopupSave").click(function () {

            if (SetValidate() != "") {
                alert(SetValidate());
            }
            else {
                $('#popupEventForm').hide();
                var blkstr = "";
                $.each($("#whoRequired").val(), function (idx2, val2) {
                    blkstr = val2 + "," + blkstr;
                });
                var Reminder = "";
                if ($('#chkReminder').prop('checked')) {
                    Reminder = true;
                } else {
                    Reminder = false;
                }
                var dataRow = {
                    'MeetingId': $('#MeetingId').val(),
                    'Title': $('#eventTitle').val(),
                    'NewEventTime': $('#eventTime').val(),
                    'WhoRequired': blkstr,
                    'Descripttion': $('#txtdescription').val(),
                    'Status': $('#Status').val(),
                    'NewEventDate': $('#eventDate').val(),
                    'Remider': Reminder,
                    'NewEventDuration': $('#eventDuration').val(),
                    'Notes': $('#txtnotes').val(),
                }

                ClearPopupFormValues();

                $.ajax({
                    type: 'POST',
                    url: "/Calender/SaveEvent",
                    data: dataRow,
                    success: function (response) {
                        if (response == 'True') {
                            $('#calendar').fullCalendar('refetchEvents');
                            alert('New event saved!');
                        }
                        else {
                            alert('Error, could not save event!');
                        }
                    }
                });
            }
        });

        var sourceFullView = { url: '/Calender/GetDiaryEvents/' };
        var sourceSummaryView = { url: '/Calender/GetDiarySummary/' };
        var CalLoading = true;

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'agendaDay',
            editable: true,
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15,
            events: '/Calender/GetDiaryEvents/',
            eventClick: function (calEvent, jsEvent, view) {
                ShowEventDetails(calEvent.id);
                //alert(JSON.stringify(calEvent));
                //alert('You clicked on event id: ' + calEvent.id
                //    + "\nSpecial ID: " + calEvent.someKey
                //    + "\nAnd the title is: " + calEvent.title);
            },

            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("");
                $('#eventDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
                $('#eventTime').val($.fullCalendar.formatDate(date, 'HH:mm'));
                ShowEventPopup(date);
            },


            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;

        $('#btnPopupCancel').click(function () {
            ClearPopupFormValues();
            $('#popupEventForm').hide();
        });

        $('#btnInit').click(function () {
            $.ajax({
                type: 'POST',
                url: "/Calender/Init",
                success: function (response) {
                    if (response == 'True') {
                        $('#calendar').fullCalendar('refetchEvents');
                        alert('Database populated! ');
                    }
                    else {
                        alert('Error, could not populate database!');
                    }
                }
            });
        });
    });


    function ShowEventDetails(id) {

        $.ajax({
            type: 'POST',
            url: "/Calender/GetDiaryEventsforBinding",
            data: { 'id': id },
            success: function (data) {
                if (data != null) {


                    $("#MeetingId").val(data.collection[0].MeetingId);
                    $("#eventTitle").val(data.collection[0].MeetingSubject);
                    $("#eventDuration").val(data.collection[0].MeetingDuration);
                    $("#eventDate").val(formatDate(data.collection[0].ScheduledDate));
                    $("#eventTime").val(formatTime(data.collection[0].ScheduledDate));
                    var dataReq = data.collection[0].RequiredPersons;
                    var dataarray = dataReq.split(",");
                    $("#whoRequired").val(dataarray);
                    //$("#whoRequired").prop('disabled', 'disabled');
                    var mstatus = data.collection[0].MeetingStatus;
                    //alert(JSON.stringify(abc))
                    //$("#Status").val(data.collection[0].MeetingStatus);

                    $("#Status option[value= '" + mstatus + "']").attr("selected", "selected");

                    if (data.collection[0].MeetingRemainder == "0") {
                        $("#chkReminder").prop('checked', false)
                    }
                    else { $("#chkReminder").prop('checked', true) }
                    $("#txtdescription").val(data.collection[0].MeetingDescription);
                    $("#txtnotes").val(data.collection[0].Notes);
                }
                else {
                    alert('Error, could not populate database!');
                }
            }
        });

        //$("#eventDate").val(data.collection.EventStart);
        //$("#eventDate").val(data.collection.EventStart);
        $('#popupEventForm').show();
    }

    function ShowEventPopup(date) {
        ClearPopupFormValues();
        $('#popupEventForm').show();
        $('#eventTitle').focus();
    }

    function ClearPopupFormValues() {
        $('#eventID').val('');
        $('#eventTitle').val('');
        $('#txtdescription').val('');
        $('#chkReminder').checked
        $('#eventDuration').val('');
        $('#txtNotes').val('');
        $('#whoRequired').val('');

    }

    function UpdateEvent(EventID, EventStart, EventEnd) {
        var dataRow = {
            'ID': EventID,
            'NewEventStart': EventStart,
            'NewEventEnd': EventEnd
        }

        $.ajax({
            type: 'POST',
            url: "/Calender/UpdateEvent",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(dataRow)

        });
    }
</script>

<link href="~/Content/Calender/fullcalendar.css" rel="stylesheet" />
<script src="~/Scripts/fullcalendar.js"></script>

我尽了最大努力但失败了。请帮我解决这个问题。

Answer 1

问题在于

if (!CalLoading) { if (view.name == 'month') { ....

你会发现你在月份和星期之间发生变化的情况，以及月份和日期之间的情况变化。但是，你不会发现每天和每周之间发生变化的情况。在最后一种情况下，您不会删除在最后一个场景中加载的sourceFullView，并且您再次加载相同的事件。这就是为什么它们重复的原因。

您应该创建else if方案，或添加$('#calendar').fullCalendar('removeEventSource', sourceFullView); 在else声明中

Answer 2

Thanx，这个答案解决了我的问题。

Jquery Fullcalendar事件在周视图中显示两次

2 个答案: