Angular js完整日历-从数据库加载的事件不太适合日历

Question

在events中使用fullCalendar从数据库中加载事件，但它与日历的配合并不理想。这是打印屏幕：

下面的代码

/* initialize the external events
    -----------------------------------------------------------------*/
    $('#external-events div.external-event').each(function () {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });

    var calendar = $('#calendar').fullCalendar({
        eventClick: function (calEvent, jsEvent) {
            if (calEvent.url) {
                window.open(calEvent.url, "_blank");
                return false;
            } else {
                var title = prompt('Event Title:', calEvent.title, {
                    buttons: {
                        Ok: true,
                        Cancel: false
                    }
                });

                if (title) {
                    //user type something and click OK
                    calEvent.title = title;
                    $('#calendar').fullCalendar('updateEvent', calEvent);
                    //update event to DB
                    vm.submitCalendarItem(calEvent.title, calEvent.start, calEvent.id);

                } else if (title === '') {
                    //user click OK, but input field empty
                    $('#calendar').fullCalendar('removeEvents', calEvent._id);

                    //delete event
                    vm.deleteCalendarItem(calEvent.id);

                } else {
                    //user click cancel
                }
            }
        },

        header: {
            left: 'title',
            center: 'month',
            right: 'prev,next today'
        },

        height: 350,
        editable: true,
        firstDay: 1, //  1(Monday) this can be changed to 0(Sunday) for the USA system
        selectable: true,
        defaultView: 'month',
        axisFormat: 'h:mm',

        columnFormat: {
            month: 'ddd',    // Mon
            week: 'ddd d', // Mon 7
            day: 'dddd M/d',  // Monday 9/7
            agendaDay: 'dddd d'
        },

        titleFormat: {
            month: 'MMMM yyyy', // September 2009
            week: "MMMM yyyy", // September 2009
            day: 'MMMM yyyy'                  // Tuesday, Sep 8, 2009
        },

        allDaySlot: false,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );

                //submit new event to DB
                vm.submitCalendarItem(title, start, '');
            }

            calendar.fullCalendar('unselect');
        },

        disableDragging: true,
        droppable: true, // this allows things to be dropped onto the calendar
        drop: function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        },

        viewRender: function (view, element) {
            var selectedDate = $('#calendar').fullCalendar('getDate');
            vm.SelectedYear = selectedDate.getFullYear();
            vm.SelectedMonth = selectedDate.getMonth() + 1;
        },
        events: function (start, end, callback) {
            $.getJSON("/Dashboard/GetCalenderItemsList?month=" + vm.SelectedMonth + "&year=" + vm.SelectedYear + "", function (response) {
                if (response.success) {
                    vm.DashboardItemsList = [];
                    vm.MappedDashboardItemsList = [];
                    vm.DashboardItemsList = response.CalendarItems
                } else {
                    alert(response.responseMsg);
                }

                for (var i = 0; i < vm.DashboardItemsList.length; i++) {
                    if (vm.DashboardItemsList[i]) {
                        var startDate = new Date(parseInt(vm.DashboardItemsList[i].EventDate.substr(6)));
                        if (vm.DashboardItemsList[i].Link == null) {
                            var dashboardObj = {
                                id: vm.DashboardItemsList[i].CalendarItemId,
                                title: vm.DashboardItemsList[i].Text,
                                start: new Date(startDate.getFullYear(), (startDate.getMonth()), startDate.getDate()),
                                url: ''

                            }

                            vm.MappedDashboardItemsList.push(dashboardObj);

                        } else {
                            var dashboardObj = {
                                id: vm.DashboardItemsList[i].CalendarItemId,
                                title: vm.DashboardItemsList[i].Text,
                                start: new Date(startDate.getFullYear(), (startDate.getMonth()), startDate.getDate()),
                                url: window.location.protocol + '//' + window.location.hostname + '/' + vm.DashboardItemsList[i].Link
                            }
                        }
                    }
                }

                callback(vm.MappedDashboardItemsList);
            });
        }
    });