title: Performance issue of full calendar when binding calendar events using angular js
body: <p>How to bind the data to full calendar using angular js i have tried it but I am getting performance issues like events are loading slowly and some buttons are not working</p>
  
  <p>Events are missing when I am seeing previous dates </p>
  
  <p>Here is my code</p>
  
  <pre><code>  $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 &lt; $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("&lt;i class='icon-plus txttheme plus pull-right pad4 cal_add_back' style='cursor:pointer'; &gt;&lt;/i&gt;");
  
        // 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 &lt; 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("&lt;div class='input-append date' id='caldate' data-date='2014-01-10' data-date-format='yyyy-mm-dd'&gt;&lt;input class='span2 hide' size='16' type='text' value='12-02-2012'&gt;&lt;span class='add-on'&gt;&lt;i class='icon-calendar txttheme'&gt;&lt;/i&gt;&lt;/span&gt;&lt;div&gt;");
                jQuery('#caldate').datepicker({
                    "setDate": new Date(),
                    format: 'yyyy-mm-dd'
                }).on('changeDate', function () {
                    var dateText = jQuery('.span2').val();
                    jQuery('.fc-day-number').append("&lt;i class='icon-plus txttheme plus pull-right pad4 cal_add_back' style='cursor:pointer'; &gt;&lt;/i&gt;");
                    jQuery('#calendar').fullCalendar('gotoDate', new Date(dateText));
                });
            }
  
        });
        // DSP
        jQuery(".icon-plus").remove();
        jQuery('.fc-day-number').append("&lt;i class='icon-plus txttheme plus pull-right pad4 cal_add_back' style='cursor:pointer'; &gt;&lt;/i&gt;");
        // 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);
        });
  </code></pre>