Полный календарь angular js - события, загруженные из базы данных, плохо вписываются в календарь

Мы используем events в fullCalendar для загрузки событий из базы данных, но данные не подходят для календаря. Это экран для печати:

image

Код ниже

/* 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);
            });
        }
    });

«Использование viewRender в fullCalendar для загрузки событий» ... это ваша первая ошибка. Это не то, как вы используете fullCalendar. Обратитесь к fullcalendar.io/docs/events-json-feed или fullcalendar.io/docs/events-function, чтобы узнать, как правильно загружать ваши события.

ADyson 29.10.2018 11:09

если что-то мерцает, это, возможно, указывает на какой-то бесконечный цикл - выполните ведение журнала или отладку консоли в инструментах разработчика браузера, чтобы проверить, что происходит. Использование viewRender для создания событий всегда сопряжено с риском того, что он может повторно запустить viewRender после того, как вы добавили свои события (который затем пытается добавить события снова, и так далее) - есть некоторые обстоятельства, при которых это может произойти. Используйте один из надлежащих задокументированных способов загрузки событий, и вы избежите этого риска.

ADyson 29.10.2018 11:14

если что-то «не подходит» (что, насколько я могу судить, представляет собой отдельную проблему), то проверьте, что ваш собственный CSS ничего не напортачил - вернитесь к CSS по умолчанию fullCalendar и посмотрите, сможете ли вы все еще есть проблема.

ADyson 29.10.2018 11:15

@ADyson Я попытался загрузить свои события, следуя ссылочному URL-адресу, который вы мне показываете. Это не относится ни к одному настраиваемому CSS, но по-прежнему имеет ту же проблему. События не вписываются в календарь. Я провел тестирование, закодировав данные о событиях, тогда они хорошо впишутся в календарь.

Lily.T 30.10.2018 15:38

@ADyson, я обнаружил, что проблема мерцания связана с тем, что я использую $ ('# календарь'). fullCalendar ('визуализация');. Есть ли какой-либо метод после того, как ajax получит данные о событиях из базы данных, тогда я могу попросить календарь снова изменить размер?

Lily.T 30.10.2018 15:45

После того, как я нажал кнопку «следующий», чтобы перейти к следующему месяцу, и снова нажал кнопку «предыдущий», чтобы перейти к предыдущему месяцу, все события хорошо вписываются в календарь.

Lily.T 30.10.2018 15:47

у вас явно есть собственный CSS, основанный на вашем снимке экрана - эти цвета не идут по умолчанию, для начала

ADyson 30.10.2018 16:03

А как вы думаете, зачем нужно просить календарь изменять размер самого себя? Какую проблему вы пытаетесь решить этим?

ADyson 30.10.2018 16:04

Также не могли бы вы обновить свой вопрос сейчас, указав новый способ вызова событий, это очень поможет - спасибо. На самом деле, пожалуйста, покажите весь свой установочный код fullCalendar.

ADyson 30.10.2018 16:05

@ADyson, я уже обновил свой код. Это ссылка, о которой я говорю. bootsnipp.com/snippets/featured/calendar-design

Lily.T 30.10.2018 16:44

"уже обновлено", нет, я опубликовал свой комментарий почти час назад, вы обновили свой вопрос только 15 минут назад.

ADyson 30.10.2018 17:01

В любом случае, этот фрагмент использует fullCalendar 1.6.4, который давно не поддерживается. Во-первых, обновите до поддерживаемой версии и посмотрите, остались ли у вас проблемы. Текущая версия - 3.9.0.

ADyson 30.10.2018 17:01
1
12
507
0

Другие вопросы по теме