Javascript 使用angular js绑定日历事件时完整日历的性能问题

如何使用angular js将数据绑定到完整日历我已经尝试过了，但是我遇到了性能问题，比如事件加载缓慢，一些按钮不起作用

当我看到以前的日期时，事件丢失

这是我的密码

  $scope.InsertBiometricData = function InsertBiometricData() {
      var eventInfo = JSON.parse(document.getElementById("lblInfo").value);
      var data = {
          BodyWeight: $scope.BodyWeight,
          Waistline: $scope.WaistLine,
          Date: eventInfo.WorkOutDate
      }
      console.log(data);
      dataFactory.postData(config.APIs.AddBiometricData, obj, data).success(function (InsertData) {
          $scope.loading = false;
          alert("Inserted Sucessfully");
      }).error(function (error) {
          $scope.Status = 'Unable to load customer data: ' + error.message;
      });
  }

  $scope.GetAnswers = function GetAnswers(q, obj, divID) {
      for (var idx = 0; idx < $scope.Questions.length; idx++) {
          if (q.QuestionId == $scope.Questions[idx].QuestionId) {
              $scope.QandA[idx] = {
                  QuestionId: q.QuestionId,
                  Question: q.Question,
                  QuestionAnswerId: obj.QuestionAnswerId,
                  AnswerChoice: obj.AnswerChoice,
                  DivID: divID
              }
          }
      }
  }

  $scope.AddActivity = function AddActivity() {          
      var eventInfo = JSON.parse(document.getElementById("lblInfo").value);         
      var data = {
          WorkOutCategoryId: $scope.ActivityOption.WorkOutCategoryId,
          NoofSets: $scope.SetsOption.SetId,
          NoofWeeks: $scope.WeeksOption.WeekId,
          //Distance: parseInt($scope.distance, 10),
          //DistanceUnit: 'km',
          DurationHrs: parseInt($scope.HH, 10),
          DurationMins: parseInt($scope.MM, 10),
          DurationSecs: parseInt($scope.SS, 10),
          //RecommendationLevel: parseInt(jQuery("#sliderrange").val(), 10),
          //RecommendationFeelLevel: parseInt(jQuery("#feelrange").val(), 10),
          Comments: $scope.comments,
          WorkOutDate: eventInfo.WorkOutDate
      };
      dataFactory.postData(config.APIs.AddActivities, obj, data).success(function (AddActivities) {
          $scope.loading = false;
          loadEvents();
          jQuery('#activity').modal("hide");
          alert(AddActivities.Message);
      }).error(function (error) {
          $scope.Status = 'Unable to load customer data: ' + error.message;
      });
  };


  $scope.UpdateEvent = function UpdateEvent() {
      var eventInfo = JSON.parse(document.getElementById("lblInfo").value);
      if (/^himself$/i.test(eventInfo.RecommendedBy) == true) {
          var data = {
              WorkOutCategoryId: $scope.UpdateActivityOption.WorkOutCategoryId,
              NoofSets: $scope.UpdateSetsOption.SetId,
              NoofWeeks: $scope.UpdateWeeksOption.WeekId,
              //Distance: parseInt($scope.distance, 10),
              //DistanceUnit: 'km',
              DurationHrs: parseInt($scope.UpdateHH, 10),
              DurationMins: parseInt($scope.UpdateMM, 10),
              DurationSecs: parseInt($scope.UpdateSS, 10),
              //RecommendationLevel: parseInt(jQuery("#sliderrange").val(), 10),
              //RecommendationFeelLevel: parseInt(jQuery("#feelrange").val(), 10),
              Comments: $scope.comments,
              WorkOutDate: eventInfo.WorkOutDate
          };
          console.log(data);
          dataFactory.postData(config.APIs.EditActivity, obj, data).success(function (EditActivities) {
              $scope.loading = false;
              loadEvents();
              jQuery('#myModal').modal("hide");
              alert(EditActivities.Message);
          }).error(function (error) {
              $scope.Status = 'Unable to load customer data: ' + error.message;
          });
      } else {
          alert("Can't Update");
      }
  };

  $scope.DuplicateEvent = function DuplicateEvent() {

      var data = JSON.parse(document.getElementById("lblInfo").value);
      var o = {
          UserWorkOutRecommendationId: data.UserWorkOutRecommendationId,
          WorkOutDate: data.WorkOutDate
      };
      dataFactory.postData(config.APIs.DuplicateActivity, obj, o).success(function (d) {
          loadEvents();
          jQuery('#divDuplicateActivity').modal("hide");
          //              alert(d.Message);
      }).error(function (error) {
          $scope.Status = 'Unable to load customer data: ' + error.message;
      });

  };

  $scope.DeleteEvent = function DeleteEvent() {

      var data = JSON.parse(document.getElementById("lblInfo").value);

      if (/^himself$/i.test(data.RecommendedBy) == true) {
          dataFactory.postData(config.APIs.DeleteActivity, obj, data).success(function (d) {
              loadEvents();
              jQuery('#divDeleteActivity').modal("hide");
              //                  alert(d.Message);
          }).error(function (error) {
              $scope.Status = 'Unable to load customer data: ' + error.message;
          });
      } else {
          alert("Can't Delete");
      }

  };

 var dc = function dc(events, o) {
      jQuery('#calendar').fullCalendar('removeEvents');
      jQuery('#calendar').fullCalendar('addEventSource', events);
      jQuery('.fc-button-prev span').click(function () {

          var ob = {
              StartDate: ((o.StartDate - (7 * 24 * 60 * 60))),
              EndDate: ((o.StartDate - (1 * 24 * 60 * 60)))
          };
          getEvents(ob, dc);
      });

      // DSP
      jQuery(".icon-plus").remove();
      jQuery('.fc-day-number').append("<i class='icon-plus txttheme plus pull-right pad4 cal_add_back' style='cursor:pointer'; ></i>");

      // DSP
      jQuery('.fc-button-next span').click(function () {
          var ob = {
              StartDate: (o.EndDate + (1 * 24 * 60 * 60)),
              EndDate: (o.EndDate + (7 * 24 * 60 * 60))
          };
          getEvents(ob, dc);
      });

      jQuery('.fc-button-today').click(function () {
          var o = {
              StartDate: (parseInt((new Date().getTime() / 1000), 10) - (1 * 24 * 60 * 60)),
              EndDate: (parseInt((new Date().getTime() / 1000), 10) + (5 * 24 * 60 * 60))
          };
          getEvents(o, dc);
      });
  };


  var drawCalender = function drawCalender(events, o) {
      jQuery('#calendar').empty();
      jQuery('#calendar').fullCalendar({
          header: {
              left: 'basicWeek',
              center: '',
              right: 'prev,title,today,next'
          },
          height: 200,
          firstDay: 1,
          defaultView: 'basicWeek',
          editable: true,
          events: events,
          eventResize: function (event, dayDelta, minuteDelta, revertFunc) {


              alert(
                    "The end date of " + event.title + "has been moved " +
                    dayDelta + " days and " +
                    minuteDelta + " minutes."
                );

          },
          eventDrop: function (calEvent, dayDelta, minuteDelta, allDay, revertFunc) {
              console.log(calEvent);
              var data = {
                  WorkOutCategoryId: calEvent.WorkOutCategoryId,
                  UserWorkOutRecommendationDateId: calEvent.UserWorkOutRecommendationDateId,
                  UserWorkOutRecommendationId: calEvent.UserWorkOutRecommendationId,
                  CategoryName: calEvent.title,
                  WorkOutDate: parseInt((((new Date((calEvent.start).toJSON().split("T")[0])).getTime() + (dayDelta * 24 * 60 * 60 * 1000)) / 1000), 10),
                  RecommendedBy: 1,
                  Distance: calEvent.Distance,
                  DurationHrs: calEvent.DurationHrs,
                  DurationMins: calEvent.DurationMins,
                  DurationSecs: calEvent.DurationSecs,
                  NoOfSets: calEvent.NoOfSets,
                  NoOfWeeks: calEvent.NoOfWeeks,
                  CoachId: obj.UserId
              };

              console.log(data);

              dataFactory.postData(config.APIs.EditActivity, obj, data).success(function (EditActivities) {
                  $scope.loading = false;
                  jQuery('#myModal').modal("hide");
                  //                      alert(EditActivities.Message);
              }).error(function (error) {
                  $scope.Status = 'Unable to load customer data: ' + error.message;
              });



          },
          eventClick: function (calEvent, jsEvent, view) {
              var eventInfo = {
                  WorkOutCategoryId: calEvent.WorkOutCategoryId,
                  UserWorkOutRecommendationDateId: calEvent.UserWorkOutRecommendationDateId,
                  UserWorkOutRecommendationId: calEvent.UserWorkOutRecommendationId,
                  CategoryName: calEvent.title,
                  WorkOutDate: parseInt(((new Date((calEvent.start).toJSON().split("T")[0])).getTime() / 1000), 10),
                  RecommendedBy: calEvent.RecommendedBy

              };
              function setSelectBoxByText(etxt) {
                  var eid = document.getElementById("updateDDActivity");
                  for (var i = 0; i < eid.options.length; ++i) {
                      if (eid.options[i].text === etxt)
                          eid.options[i].selected = true;
                  }
              }
              alert(JSON.stringify(eventInfo));
              setSelectBoxByText(calEvent.title);
              document.getElementById("lblInfo").value = JSON.stringify(eventInfo);
              jQuery('#example1').popover('show');
              var popwid = jQuery('.popover').width();
              jQuery('.popover').css('left', jsEvent.pageX - (popwid / 2) + 'px');
              jQuery('.popover').css('top', jsEvent.pageY + 'px');

          },
          eventAfterRender: function (event, element, view) {
              jQuery('body').on('click', '.plus', function (e) {
                  var offset = jQuery(this).offset();
                  var left = e.pageX;
                  var top = e.pageY;
                  jQuery('#A1').popover('show');
                  var popwidth = jQuery('.popover').width();
                  jQuery('.popover').css('left', (left - (popwidth / 2)) + 'px');
                  jQuery('.popover').css('top', (top + 10) + 'px');
                  console.log(event);
              });

              jQuery('.fc-button-today').html("<div class='input-append date' id='caldate' data-date='2014-01-10' data-date-format='yyyy-mm-dd'><input class='span2 hide' size='16' type='text' value='12-02-2012'><span class='add-on'><i class='icon-calendar txttheme'></i></span><div>");
              jQuery('#caldate').datepicker({
                  "setDate": new Date(),
                  format: 'yyyy-mm-dd'
              }).on('changeDate', function () {
                  var dateText = jQuery('.span2').val();
                  jQuery('.fc-day-number').append("<i class='icon-plus txttheme plus pull-right pad4 cal_add_back' style='cursor:pointer'; ></i>");
                  jQuery('#calendar').fullCalendar('gotoDate', new Date(dateText));
              });
          }

      });
      // DSP
      jQuery(".icon-plus").remove();
      jQuery('.fc-day-number').append("<i class='icon-plus txttheme plus pull-right pad4 cal_add_back' style='cursor:pointer'; ></i>");
      // DSP
      jQuery('.fc-button-prev span').click(function () {
          var ob = {
              StartDate: ((o.StartDate - (7 * 24 * 60 * 60))),
              EndDate: ((o.StartDate - (1 * 24 * 60 * 60)))
          };
          getEvents(ob, dc);

      });

      jQuery('.fc-button-next span').click(function () {
          var ob = {
              StartDate: (o.EndDate + (1 * 24 * 60 * 60)),
              EndDate: (o.EndDate + (7 * 24 * 60 * 60))
          };
          getEvents(ob, dc);
      });

---

Arshaw FullCalendar的完整AngularJS指令

用户界面日历