Question

我正在使用PrimeNG Full Calendar组件开发Angular应用程序，这个组件是https://primefaces.org/primeng/showcase/#/fullcalendar

它基于Angular FullCalendar组件，这个组件：https://fullcalendar.io/

在这里您可以找到我的完整代码：https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

所以我有这样的日历：

我现阶段要实现的是，当用户单击特定事件时，将删除此日历中的所有事件（在第二阶段中，我将实现仅删除特定的单击事件，但此刻，我保持逻辑尽可能简单。

这是控制我的日历组件的类：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { EventService } from '../event.service';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import { FullCalendar } from 'primeng';

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html',
  styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements OnInit {

  events: any[];
  options: any;
  header: any;

  //people: any[];

  @ViewChild('fullcalendar') fullcalendar: FullCalendar;

  calendar:any;


  constructor(private eventService: EventService) {}

  ngOnInit() {
    //this.eventService.getEvents().then(events => { this.events = events;});

    this.eventService.getEvents().subscribe(events => { this.events = events.map((event) => {
      var date = new Date(event.start);
      var hour = date.getHours();
      //event['backgroundColor'] = hour === 7? 'red': (hour === 7 ? 'green' : 'black');

      //let events = this.calendar.getEvents();
      //events[

      console.log("EVENTS: " + this.events);

      if(hour === 7) {
        event['backgroundColor'] = 'red';
      }
      else if(hour === 15) {
        event['backgroundColor'] = 'green';
      }
      else if(hour === 23) {
        event['backgroundColor'] = 'black';
      }


      return event;
    })});

    this.options = {
        plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
        defaultDate: '2017-02-01',
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        nextDayThreshold: '09:00:00',
        allDayDefault: false,

        dateClick: (dateClickEvent) =>  {         // <-- add the callback here as one of the properties of `options`
          console.log("DATE CLICKED !!!");
        },

        eventClick: (eventClickEvent) => {
          console.log("EVENT CLICKED !!!");
          console.log(eventClickEvent.event.id);
          //this.eventService.removeEventById(eventClickEvent.event.id);
          this.eventService.removeEventById(eventClickEvent.event.id).subscribe(events => console.log(events));


            /*
            events => { this.events = events.map((event) => {
            var date = new Date(event.start);
            var hour = date.getHours();

            console.log("EVENTS: " + this.events);

            if(hour === 7) {
              event['backgroundColor'] = 'red';
            }
            else if(hour === 15) {
              event['backgroundColor'] = 'green';
            }
            else if(hour === 23) {
              event['backgroundColor'] = 'black';
            }

            return event;
          })});
          */
        },

        eventDragStop: (eventDragStopEvent) => {
          console.log("EVENT DRAG STOP !!!");
        },

        eventReceive: (eventReceiveEvent) => {
          console.log(eventReceiveEvent);
          //eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});



          //eventReceiveEvent['backgroundColor'] = 'red';
          this.eventService.addEvent(eventReceiveEvent);
        }
    };

  }

  ngAfterViewInit() {

    this.calendar = this.fullcalendar.getCalendar();
    console.log("CALENDAR: " + this.calendar);

  }

}

您可以看到 ngOnInit（）方法，我正在订阅服务的 getEvents（）方法，该方法将呈现事件的列表返回为Observable（我是之所以这样做，是因为在返回的输出中，我为不同的事件类型处理了不同的颜色，但这与我的问题没有严格的联系……它工作正常）。

因此，如您所见，该组件类包含此挂钩方法 eventClick：（eventClickEvent），用于处理对日历事件的点击。我当时想调用定义在我的服务中的delete events方法，然后再次呈现它，但是它不起作用（我已经尝试了几次，但是不起作用）。我也不确定这是否是解决问题的正确方法。

据我所了解的 ngOnInit（）方法，我已经订阅了日历事件数组，因此将这个数组的内容链接起来，将发布此更改，并且应再次呈现它，我尝试了也是这样，但是它不起作用...所以我认为我可能在Angular逻辑中缺少了一些东西。

这是我的服务类别的代码：

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http'
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class EventService {

  private events = [];

  /*
  private events = [
    {id: 1, title: 'All Day Event', start: '2017-02-01'},
    {id: 2, title: 'Long Event', start: '2017-02-07', end: '2017-02-10'},
    {id: 3, title: 'Repeating Event', start: '2017-02-09T16:00:00'},
    {id: 3, title: 'test', start: '2017-02-20T07:00:00'},
  ];
  */

  private people = [
    {id: 1, name: "PERSONA 1"},
    {id: 2, name: "PERSONA 2"},
    {id: 3, name: "PERSONA 3"},
    {id: 4, name: "PERSONA 4"},
    {id: 5, name: "PERSONA 5"},
  ]

  public eventData = new BehaviorSubject(this.events);

  constructor(private http: HttpClient) {}

  getEvents(): Observable<any[]> {
    return this.eventData.asObservable();
  }


  addEvent(event) {
    //console.log(event.event.start);
    //console.log(event);
    const newEvent = {id: 5, title: event.event.title, start: event.event.start, end: event.event.end};
    this.events.push(newEvent);
    this.eventData.next([...this.events]);
    //console.log(this.events);
  }

  removeEventById(id:number): Observable<any[]>  {
    console.log("EVENTDATA: " + this.eventData.getValue());

    return this.eventData.asObservable();
  }


  /*
  removeEventById = (id:number) => {
    this.events = [];
    //return this.events.filter(each=>each.id!=id);

  }
  */

  getPeople(): Promise<any[]> {
    return Promise.all(this.people)
        .then(res => {
          console.log(res);
          return res;
        })
  }

}

那怎么了？我想念什么？正确解决我的问题的聪明解决方案是什么？

Answer 1

从fullcalendar.io开发的

primeng fullcalendar，您可以过滤数据，然后分配给eventData。我在Demo

中创建了您的代码

 this.eventService.removeEventById(eventClickEvent.event.id).subscribe(events => console.log(events));

使用您的方法

removeEventById(id:number): Observable<any[]>  {
    this.events=this.events.filter(each=>each.id!=id);
    this.eventData.next([...this.events]);
    return this.eventData.asObservable();
}

Answer 2

在使用Observables时，可以将map运算符与Array.prototype.filter结合使用：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

removeEventById(id:number): Observable<any[]>  {    
    return this.getEvents()
        .pipe(
            map(items => items.filter(item => item.id == id))
        );    
}

The whole work example can be seen at the stackblitz.

因此您的服务应如下所示：

@Injectable()
export class MyServices {
    private events = [
        {   
          id: 1,
          title: 'Foo 1',
          date: '2020-06-07'
        },
        {
          id: 2,
          title: 'Foo 2',
          date: '2020-06-08'
        },
        {
          id: 3,
          title: 'Foo 3',
          date: '2020-06-05'
        }
    ];

    public eventData = new BehaviorSubject(this.events);

    constructor() { }

    sayHello() {        
        console.log("Say Hello");
    }

    getEvents(): Observable<any[]> {
        return this.eventData.asObservable();
    }


  addEvent(event) {
    const newEvent = {id: 5, title: event.event.title, 
        start: event.event.start, end: event.event.end};
    this.events.push(newEvent);
    this.eventData.next(Object.assign({}, this.events));
  }

  removeEventById(id:number): Observable<any[]>  {    
    return this.getEvents()
      .pipe(
        map(items => items.filter(item => item.id == id))
      );    
  }    
}

和your.component.ts可能看起来像这样：

export class AppComponent implements OnInit {
    options: any;
    eventsModel: any;
    @ViewChild('fullcalendar') fullcalendar: FullCalendarComponent;
    @ViewChild('external') external: ElementRef;

    constructor(private myServices: MyServices){
        this.myServices.sayHello();
    }

    eventClick(model) {
        this.myServices.removeEventById(model.id)
            .subscribe(s => this.eventsModel = s);       
    }

Answer 3

所以您应该准备的东西很少。

用于删除所有事件。

在events.service中

select a.id,a.req_id,a.curr,sum(a.rcpt_amt) rcpt_amt,sum(a.enc_log_amt) enc_log_amt,sum(c.enc_rcpt_amt) enc_rcpt_amt
from
(
select a.id id ,a.req_id req_id ,a.curr curr,sum(rcpt_amt) as rcpt_amt,sum(enc_log_amt) as enc_log_amt
from ins_rcpt a
left join enc_log b
on a.req_id=b.req_id
group by id,req_id,curr
) a
left join enc_rcpt c 
on a.enc_id = c.enc_id
group by id,req_id,curr;

在 fullCalendar.component.ts fullCalendar选项中：-

public deleteEvents() {
   this.events = [];
   this.eventData.next(this.events);
 }

用于删除特定事件。

首先，您的日历中应为每个事件提供一个唯一的ID。当前，在您的addEvent方法中，您将为每个事件赋予相同的ID。即5.首先让我们修复它。

eventClick: (eventClickEvent) => {
      console.log("EVENT CLICKED !!!");
      this.eventService.deleteEvents();
    }

这样，无论何时将事件添加到您的日历中，您都将拥有唯一的事件ID。

现在单击事件后，您正在调用一个方法，即removeEventById（）。那应该写成：-

public currentId = 1;

public addEvent() {
      const newEvent = {id: this.currentId++, title: event.event.title, start: event.event.start, end: event.event.end};
   //Remaining Add Event Code.
}

注意：-从事件单击对象收到的ID是字符串，而数组中的ID是数字。因此，我在接收到的ID中添加了+，以解析其数量以匹配ID并删除必要的项。没有它，删除将无法工作。

在 fullCalendar.component.ts fullCalendar选项中：-

removeEventById(id): Observable<any[]>  {
    this.events = this.events.filter((event) => event.id!==+id);
    this.eventData.next(this.events);
    return this.eventData.asObservable();
}

如何从该PrimeNG FullCalendar中动态删除事件（单击事件）？

3 个答案: