时间戳

首页 > 解决方案 > Angular ng fullcalendar 自定义 Angular 5

angular - Angular ng fullcalendar 自定义 Angular 5

问题描述

我正在将 ng full-calendar 集成到我的项目中，它正确显示在屏幕下方。 日历视图

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

   ],
 };
}

现在我想添加点击事件来选择多个日期并将事件设置为那些选定的日期，但是在完整的日历文档中，他们已经给出了所有 jquery 方法。有谁帮助我如何在 .ts 文件中集成角度项目？

标签： angularangular5fullcalendarfullcalendar-2

解决方案

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

推荐阅读