如何动态更改 Angular FullCalendar 事件颜色（特定事件的）？

Question

我正在开发一个使用 PrimeNG 完整日历组件的 Angular 应用程序，这个：https://primefaces.org/primeng/showcase/#/fullcalendar

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

在这里你可以找到我的全部代码：https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

我发现在尝试动态更改日历上呈现的事件的背景颜色时遇到了一些困难。我必须根据不同的事件信息（开始事件时间，例如：如果事件开始于 07:00 为绿色，如果它开始于 15:00 则为红色，如果它从23:00开始是蓝色的，不过这个逻辑此时并不重要）。

在我的项目中，我将外部事件拖到我的日历中，如下所示：https://fullcalendar.io/docs/external-dragging-demo

所以我想要的是，当我将一个事件拖到我的日历中时，它的背景将具有基于开始时间的特定颜色。

因此，正如您在我的 BitBucket 存储库中看到的那样，我有这个 FullcalendarComponent 处理包含从外部组件接收事件的日历的组件：

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;


  constructor(private eventService: EventService) {}

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

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

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

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

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

        eventReceive: (eventReceiveEvent) => {
          console.log(eventReceiveEvent);
          eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});
          eventReceiveEvent.eventColor = '#378006';
          eventReceiveEvent.event.eventColor = '#378006';
          eventReceiveEvent.event.css('background-color', '#378006');
          this.eventService.addEvent(eventReceiveEvent);
        }
    };

  }

}

我发现添加这个选项 eventColor: '#378006', 我可以更改默认的事件背景颜色...但是这样它是静态的，我可以' t 为不同类型的事件处理不同的颜色（我只是更改了所有事件的默认颜色，所以它不适合我的用例）。

我有这个方法用于修改拖入我的日历的事件：

eventReceive: (eventReceiveEvent) => {
  console.log(eventReceiveEvent);
  eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});
  eventReceiveEvent.eventColor = '#378006';
  eventReceiveEvent.event.eventColor = '#378006';
  eventReceiveEvent.event.css('background-color', '#378006');
  this.eventService.addEvent(eventReceiveEvent);
}

而且我认为它可能是放置此行为的一个很好的候选位置...正如您在我的代码中看到的那样，我尝试使用某种方法来设置事件颜色，但它不起作用.. .当我的页面呈现时，我仍然获得默认事件颜色。

为什么？怎么了？我错过了什么？如何获得所需的行为并通过代码设置事件颜色？

Answer 1

每个活动都支持属性 backgroundColor 来决定活动的背景颜色。

在这里查看：- https://fullcalendar.io/docs/event-object

为了在添加事件时自动做出颜色决定，我将您服务中的承诺更改为可观察。每当您通过 addevent 服务方法推送新事件时。您在组件的 ngoninit 中的订阅将接收更新的数据并应用背景颜色。这也将防止您的原始数据发生变化，因为只有您的组件需要这种颜色才能显示。不是您的原始数据。

服务变化：-

  1. public eventData = new BehaviorSubject(this.events);
  2. getEvents(): Observable<any[]> {
      return this.eventData.asObservable();
     }
  3. addEvent(event) {
      //this.events.push(event);
      //console.log("EVENT:")
      //console.log(event.event.title);
      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]);
     }

更改后的完整服务：-

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

@Injectable()
export class EventService {

  private events = [
    {id: 1, title: 'All Day Event', start: '2017-02-01'},
    {id: 2, title: 'Long Event', start: '2017-02-07', end: '2017-02-10T7:00:00'},
    {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(): Promise<any[]> {
    return this.http.get('assets/json_mock/calendarevents.json')
      .toPromise()
      .then(res => JSON.parse(JSON.stringify(res)).data)
      .then(res => {
        console.log(res);
        // you returned no value here!
        return res;
      })
  }
  */

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

addEvent(event) {
  //this.events.push(event);
  //console.log("EVENT:")
  //console.log(event.event.title);
  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]);
}

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

}

在您的 fullcalendar.component.ts 中，您可以在接收来自服务的事件的地方更改 observable 的颜色，例如：-

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

输出：-

您的完整 fullcalendar.component.ts 更改后：-

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 {
  //backgroundColor
  events: any[];
  options: any;
  header: any;

  //people: any[];

  @ViewChild('fullcalendar') fullcalendar: FullCalendar;


  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.eventService.getEvents().subscribe(events => { this.events = events.map((event) => {
      var date = new Date(event.start);
      var hour = date.getHours();
      event['backgroundColor'] = hour === 5? 'red': (hour === 7 ? 'green' : '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: '06:00:00',

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

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

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

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

  }

}

我将事件服务时间修改为以下以实现图像中的输出。

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

如何动态更改 Angular FullCalendar 事件颜色（特定事件的）？

How to dinamically change Angular FullCalendar event color (of a specific event)?

javascript

fullcalendar

primeng

angular

primeng-calendar