Загрузка событий при инициализации с помощью fullcalendar 4 и angular 8

Я обновил полный календарь с v3 до v4 и использую его с angular 8. Проблема заключается в том, как загружать события на init и date change.

Я пробовал с этими настройками:

<full-calendar
        #calendar
        [defaultView]="'timeGridWeek'"
        [plugins]="calendarPlugins"
        [header]="calendarHeader"
        [allDaySlot]="false"
        [slotEventOverlap]="true"
        [editable]="true"
        [selectable]="true"
        [slotLabelFormat]="'HH:mm'"
        [timeZone]="'local'"
        [nowIndicator]="true"
        [aspectRatio]="1"
        [eventTimeFormat]="'HH:mm'"
        [height]="'parent'"
        [firstDay]="1"
        [buttonText]="buttonText"
        [minTime]="'06:00'"
        [maxTime]="'23:00'"
        [views]="views"
        [events]="calendarEvents"
        [weekends]="false"
></full-calendar>

Компонент получает события в [events] и ожидает массив. Я могу загрузить массив при инициализации компонента, но я не знаю, как загружать новые события при изменении даты (вы нажимаете кнопку для следующей недели).

В fullcalendar V3 я загружал такие события:


settings = {
...
   events: function(start, end, timezone, callback) {
     this.callBaclend(start, end)
     .subscribe(resultData=>{
        callback(resultData);
     })
   }
...
}

Эта функция срабатывает каждый раз, когда меняется дата или вид, а в качестве бонуса есть start и end. Как я могу сделать аналогичный вызов в V4 с угловым? Я просматриваю документацию, но не могу найти решение.


typescript angular fullcalendar fullcalendar-4
person Zlatoroh    schedule 19.06.2019    source источник
comment
Компонент получает события в [events] и ожидает массив ... не так ли? Я ожидал, что он примет любой действительный источник события - массив, URL, функцию или объект источника события, который является принято самим fullCalendar. В документации компонента angular особо говорится, что компонент ‹FullCalendar› оснащен всеми опциями FullCalendar! Просто передайте их как свойства. Вы действительно пытались определить источник динамических событий и столкнулись с конкретной проблемой?   -  person ADyson    schedule 19.06.2019
comment
В этом посте я использовал fullcalendar в angular 8 с помощью jquery. Вы можете легко добавлять динамические события. therichpost.com/how-to-implement-fullcalendar-in-angular- 8   -  person Ajay Malhotra    schedule 03.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

В вашем примере сохраните этот html таким же:

<full-calendar
        #calendar
        [defaultView]="'timeGridWeek'"
        [plugins]="calendarPlugins"
        [header]="calendarHeader"
        [allDaySlot]="false"
        [slotEventOverlap]="true"
        [editable]="true"
        [selectable]="true"
        [slotLabelFormat]="'HH:mm'"
        [timeZone]="'local'"
        [nowIndicator]="true"
        [aspectRatio]="1"
        [eventTimeFormat]="'HH:mm'"
        [height]="'parent'"
        [firstDay]="1"
        [buttonText]="buttonText"
        [minTime]="'06:00'"
        [maxTime]="'23:00'"
        [views]="views"
        [events]="calendarEvents"
        [weekends]="false"
></full-calendar>

Затем в соответствующем файле .ts определите calendarEvents как функцию:

export class SomeComponent implements OnInit {

  ...

  constructor() {}

  ...

  calendarEvents = (dates, callback) => {
    console.log('Fetch events for dates:', dates.start, dates.end);

    this.callBackend(dates.start, dates.end)
       .subscribe(resultData => {
         callback(resultData);
       })
  };
}
person Rob    schedule 14.01.2020