Настройка angular ng fullcalendar для angular 5

Я интегрирую полный календарь в свой проект, он правильно отображается на экране ниже. Просмотр календаря

Ниже приведен код моего файла .ts.

 export class OfcalendarComponent implements OnInit {
   calendarOptions: Options;
   displayEvent: any;
   @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
   constructor() { }

   ngOnInit() {
   this.calendarOptions = {
    editable: true,
    eventLimit: false,
    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month'
  },
  selectable: true,
  events: [
    {
      title  : 'event1',
      start  : '2018-06-08',
      rendering: 'background'
    }

   ],
 };
}

Теперь я хочу добавить событие щелчка, чтобы выбрать несколько дат и установить событие для выбранной даты, но в документации fullcalendar они предоставили все методы jquery. Кто-нибудь помогает мне, как я могу интегрироваться в проект angular в файле .ts?


angular fullcalendar angular5 fullcalendar-2
person Ajinkya More    schedule 26.06.2018    source источник
comment
Typescript компилируется до JavaScript, а jQuery - это просто JavaScript с причудливым синтаксисом наверху. FullCalendar в любом случае требует jQuery, поэтому трудно понять, в чем проблема. В любом случае, для вашего требования я хочу добавить событие щелчка, чтобы выбрать несколько дат ... Я думаю, вам, вероятно, нужен обратный вызов select? fullcalendar.io/docs/select-callback. Поэтому в объекте параметров календаря просто добавьте еще один параметр _1 _... и т. Д., Как и другие параметры, за исключением того, что вы предоставляете функцию обратного вызова в качестве значения параметра.   -  person ADyson    schedule 26.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете вызвать функцию ts, когда выбрано несколько дат в полном календаре, а затем вы можете делать свои вещи.

this.calendarOptions = {
    editable: true,
    eventLimit: false,
    selectable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listMonth'
    },
    events: data
  };
  
    eventSelect(event){
     console.log(event.start,event.end);
      }
    <ng-fullcalendar #ucCalendar [options]="calendarOptions" 
        (select)="eventSelect($event.detail)"
        ></ng-fullcalendar>

person Kishan    schedule 18.03.2019