Блог

Я использую пример проекта FullCalendar angular, чтобы узнать, как реализовать @fullcalendar и настроить сервер данных для извлечения массива событий из базы данных.

События загружаются и отображаются правильно (просмотр месяца / недели / дня), но всякий раз, когда я нажимаю событие, браузер перезагружает страницу.

События загружаются путем обновления свойства «события»:

 this.dataService.getData('/events').subscribe(events => {
   this.calendarOptions.events = events;
});
 

События, добавленные с использованием CalendarApi.addEvent() метода, не дают результата и ведут себя так, как ожидалось.

Текущая конфигурация:

 Angular CLI: 10.0.8
Node: 12.14.0
OS: darwin x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: No

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cli                      10.0.8
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0
 

@fullcalendar установлены пакеты:

 ─┬ @fullcalendar/angular@5.4.0
├─┬ @fullcalendar/core@5.4.0
│ ├─┬ @fullcalendar/common@5.4.0
├─┬ @fullcalendar/daygrid@5.4.0
├─┬ @fullcalendar/interaction@5.4.0
├─┬ @fullcalendar/list@5.4.0
├─┬ @fullcalendar/timegrid@5.4.0
 

Свойства события, добавленного из метода источника данных:

 {…}
​
_context: Object { dateEnv: {…}, options: {…}, pluginHooks: {…}, … }
_def: {…}
 allDay: true
 defId: "64"
 extendedProps: Object { eventTypeId: 1, contactName: "Test event 1 Contact", contactPhone: "Test event 1 phone", … }
 groupId: ""
 hasEnd: true
 publicId: "1"
 recurringDef: null
 sourceId: "62"
 title: "Test event 1"
 ui: Object { display: null, startEditable: undefined, durationEditable: undefined, … }
 url: "null"
 <prototype>: Object { … }
_instance: Object { instanceId: "65", defId: "64", range: {…}, … }
<prototype>: Object { setProp: setProp(name, val), setExtendedProp: setExtendedProp(name, val), setStart: setStart(startInput, options), … }
 

Преимущества события, добавленного с помощью метода Calendar.addEvent():

 {…}
_context: Object { dateEnv: {…}, options: {…}, pluginHooks: {…}, … }
_def: {…}​​
 allDay: true
 defId: "78"
 extendedProps: {}
 <prototype>: Object { … }
 groupId: ""
 hasEnd: true
 publicId: "2"
 recurringDef: null
 sourceId: ""
 title: "vbnbn"
 ui: Object { display: null, backgroundColor: "red", borderColor: "red", … }
 url: ""
 <prototype>: Object { … }
_instance: Object { instanceId: "79", defId: "78", range: {…}, … }
<prototype>: Object { setProp: setProp(name, val), setExtendedProp: setExtendedProp(name, val), setStart: setStart(startInput, options), … }
 

Кто-нибудь может предложить какие-либо предложения, почему это может происходить?

Я решил проблему.

Проблема заключалась в том, что для свойства ‘url’ было установлено значение null, которое возвращалось из запроса.

Я удалил столбец url из моей таблицы db, и теперь он работает правильно.