Question

我有一个FullCalendar，它从使用从网址中提取的array(selectedEvents)的函数获取Location ID。数组与日历一样建立onInit，但是日历上有一个超时以便允许事件填充。当日历最初从网站的另一部分导航到时，默认位置的事件不会显示，但会填充到selectedEvents数组中。当我单击另一个位置的日历时，将填充事件，然后正确显示它们。因此，日历可以正常工作。我认为在日历的首次初始化期间，日历将优先于事件的总填充，即使它被包装在超时中也是如此。我以前曾经在SO上看到过这个问题，但是没有得到回答。

我已经尝试过延长日历的超时时间

   getLocationEvents(location: PFLocation) {
    // if (this.allEvents) {
    this.selectedEvents = [];
    if (location.events) {
        console.log(location.events);
        this.eventIdArray = location.events;
        for (let event of this.eventIdArray) {
            this.eventService.get(event).subscribe(data => {
                console.log(data);
                this.selectedEvents.push(data);
            });
        }
    } else {
        return;
    }
    console.log(this.selectedEvents);
    return this.selectedEvents;
}

getBatchEvents(location: PFLocation) {
    var that = this;
    if (this.allEvents) {
        if (location.batches) {
            let batches = location.batches;
            for (let batch of batches) {
                this.batchService.get(batch).subscribe(data => {
                    for (let event of data.events) {
                        this.eventService
                            .get(event)
                            .subscribe(eventData => {
                                console.log(eventData);

                              this.selectedEvents.push(eventData);
                            });
                    }
                });
            }
            console.log(this.selectedEvents);
            console.log('out of Batch Events');
            return this.selectedEvents;
        }
    }
    if (!this.allEvents) {
        this.selectedEvents = [];
        if (location.batches) {
            let batches = location.batches;
            for (let batch of batches) {
                this.batchService.get(batch).subscribe(data => {
                    for (let event of data.events) {
                        this.eventService
                            .get(event)
                            .subscribe(eventData => {
                                console.log(eventData);

                           this.selectedEvents.push(eventData);
                            });
                    }
                });
            }
            console.log(this.batchEvents);
            console.log('out of Batch Events');
            return this.selectedEvents;
        }
    }
}

getAllEvents(location: PFLocation) {
    this.allEvents = true;
    var that = this;
    that.getLocationEvents(location);
    that.getBatchEvents(location);
}

ngOnInit() {
    let that = this;
    this.sub = this.route.params.subscribe(params => {
        this.locationId = params['locationid'];
        this.userService
            .getLocation(this.locationId)
            .subscribe(location => {
                console.log('Out of on Init');
                this.selectedLocation = JSON.parse(
                    JSON.stringify(location)
                );
                that.getAllEvents(this.selectedLocation);
                console.log(this.selectedLocation);
            });`enter code here`
        console.log(this.selectedLocation);
        if (this.locationId) {
            const today = new Date();
            const y = today.getFullYear();
            const m = today.getMonth();
            const d = today.getDate();
            $('#fullCalendar').fullCalendar('removeEvents');
            $('#fullCalendar').fullCalendar(
                'addEventSource',
                that.selectedEvents
                );
            setTimeout(function() {
                $('#fullCalendar').fullCalendar({
                    viewRender: function(view: any, element: any){
                        // We make sure that we activate the 
                   perfect scrollbar when the view isn't on Month
                        if (view.name != 'month') {
                            var elem = $(element).find('.fc- 
                             scroller')[0];
                            let ps = new PerfectScrollbar(elem);
                        }
                    },
                    header: {
                        left: 'title',
                        center: 'month, agendaWeek, agendaDay',
                        right: 'prev, next, today'
                    },
                    defaultDate: today,
                    selectable: true,
                    selectHelper: true,
                    views: {
                        month: {
                            // name of view
                            titleFormat: 'MMMM YYYY'
                            // other view-specific options here
                        },
                        week: {
                            titleFormat: ' MMMM D YYYY'
                        },
                        day: {
                            titleFormat: 'D MMM, YYYY'
                        }
                    },
                    eventLimit: true, // allow "more" link when 
                     too many events
                    select: function(start: any, end: any) {
                        that.openEventForm();
                    },
                    eventClick: function(event, jsEvent) {
                        that.completeEventForm(event);
                    }
                });
            }, 500);
        }
    });
}

我希望日历会在我第一次导航到该页面时填充。

Answer 1

除了重构后端并消除意大利面条式代码之外，一旦有人指出日历是如何初始化的，这也不是一个难题。首先，日历必须抓住DOM元素，然后才抓住事件源。如果它没有捕获#calendar，那么它将不会捕获事件源，直到下一次对其进行初始化，并且此时它正在使用旧的事件源数据（如果按我的代码进行设置）。首先需要执行“ viewRender”，然后是“ removeEvents”，然后是“ addEventSource”。

console.log(data.map((e) => e.favourite));

在事件加载之前初始化FullCalendar

1 个答案: