数据库更改后，Angular Fullcalendar视图将折叠

Question

所以我从一周开始就有这个问题，我对此感到非常震惊。

我正在Ionic和Firebase的帮助下构建一个Angular研究组织/帮助应用程序。

我的数据存储在Firestore数据库中，我的功能之一是，当用户向数据库中添加Subject时，它也会自动创建一个事件。我正在使用fullcalendar作为应用程序的日历。

我的主要问题是，当一个事件被添加到数据库中(仅通过另一个视图(时，日历视图会崩溃我只是通过另一个视图说的，因为我在日历中有一个事件添加页面(基本上日历视图仍然存在，但添加表单在它的顶部(，当我在那里添加事件时，日历可以显示它，不会崩溃。

完整日历折叠屏幕截图

我的日历组件订阅了数据库中的事件，代码如下：

return this.db.collection('users').doc(this.getUser()).collection('events').valueChanges();

我的活动日历订阅：

ngOnInit() {
this.service.getEventsValue().subscribe(value => {
this.events = [];
value.forEach((doc) =>{
this.events.push({
title:doc.title, 
daysOfWeek: [doc.daysOfWeek], 
startRecur: doc.startDay, 
startTime: doc.startTime,
endTime: doc.endTime,
endRecur:'2021-12-10',
color: doc.color
});
});
this.calendarOptions.events = this.events;
});
}

日历模块：

FullCalendarModule.registerPlugins([
dayGridPlugin,
intercationPlugin,
timegridPlugin
])

我的日历选项：

calendarOptions: CalendarOptions = {
headerToolbar: {
left: 'prev,next today',
center: 'addEventButton',
right: 'timeGridWeek,timeGridDay'
},
initialView: 'timeGridWeek',
weekends: false,
buttonText: {
today:    'Ma',
month:    'Hónap',
week:     'Hét',
day:      'Nap',
list:     'Lista'
},
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
locale: "hu",
eventClick: function(info){
console.log(info);
},
droppable: true,
// editable: true,
customButtons:{
addEventButton: {
text: 'Esemény hozzáadása',
click: () => {
this.router.navigate(['overview/calendar/add-event']);
}
}
}
};

Answer 1

尝试设置：encapsulation: ViewEncapsulation.None