角度5

Question

我正在将ng full-calendar集成到我的项目中，该项目正确显示在屏幕下方。 Calendar view

下面是我的.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'
    }

   ],
 };
}

现在，我想添加click事件以选择多个日期并将事件设置为那些选定的日期，但是在全日历文档中，他们提供了所有jquery方法。谁能帮我如何集成到.ts文件的angular项目中？

Answer 1

当在整个日历中选择多个日期时，您可以调用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>