Событие Jquery Fullcalender отображается дважды в режиме недели

Question

Я добавил новое событие в fullcalender. Событие отображается как один div, когда отображается в представлении «День», но отображается как два прикрепленных div, когда представление изменено на «Неделя».

Вот мой код сценария:

@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, этот ответ решить мою проблему.