Angular 8 | primeng/fullcalendar 根据事件类型(循环事件)、单元格 bg-color 设置不同的样式

Question

这就是我在 Angular 8 应用程序中使用全日历的方式:

calendar.component.ts:

export class MyCalendarComponent implements OnInit {
  public plantedActivities: PlantedActivityModel[]
  public actuatorActivities: ActuatorActivityModel[]
  events
  options
  constructor(
    private service: CalendarService,
  ) {
  }

  ngOnInit() {
    this.events = [];
    this.options = {
      plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      defaultDate: '2020-03-01',
      header: {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      editable: true,
      dateClick: (e) => {
        console.log(e)
      },
      eventClick: (e) => {
        console.log(e)
      }
    };

    this.service.currentAll.subscribe(res => {
      this.plantedActivities = res.plantedActivities
      for (let plantActivity of this.plantedActivities) {
        this.events = [... this.events,
        {
          "title": "Planted: " + plantActivity.plant.englishName,
          "start": plantActivity.date,
           type: 'plant'
        }];
      }

      this.actuatorActivities= res.actuatorActivities
      for (let actuatorActivity of this.actuatorActivities) {
        this.events = [... this.events,
        {
           "title": actuatorActivity.actuator.title + ": " + actuatorActivity.action_took,
           "start": actuatorActivity.date,
           type: 'actuator'

        }]
      }
   }
}

calendar.component.html

<div class="container">
  <p-fullCalendar [events]="events" [options]=options></p-fullCalendar>
</div>

我很难找到一种方法来控制不同事件类型的样式。

我试过使用 ng-fullcalendar和/或 ngx-fullcalendar但我在日历 UI 本身面临不同的问题，它不会像预期的那样加载，所以我更喜欢使用 primeng fullcalendar，因为我已经设法面对除了不同类型事件的样式之外的任何其他问题 (单元格背景颜色、事件颜色、事件背景颜色...)

我认为我应该这样做:

this.options = {
  ...
  eventColor: this.eventColor(),
  eventTextColor: "#fff",
};

this.eventColor() 会根据事件的类型返回颜色，但我不知道如何在函数内部传递事件参数。有什么办法吗？

我想我也可以通过在初始化后遍历日历事件来找到解决方案有没有循环遍历它们的方法？

此外，我一般不知道如何更改事件的 CELL bg-color..

Answer 1

不是我的问题的解决方案，但经过大量搜索后，我找不到答案，所以我决定使用 jQuery 方法。

因此，我将 fullcalendar 与我推荐的 jQuery 结合使用，因为没有很多关于 Angular 方式的文档..

可以关注this tutorial将 fullcalendar 与 jQuery 集成到您的 Angular 应用程序中。

在这样做之后，解决方案很简单..我只是使用了 eventRender

  $("#calendar").fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    navLinks: true,
    editable: true,
    eventLimit: true,
    events: _this.events,
    eventTextColor: "white",
    eventRender: function (event, element) {
      if (event.type == "planted") {
        element.css('background-color', '#08b394');
      } else {
        element.css('background-color', '#2a7568');
      }
    }


  });