Angular 8 | primeng / fullcalendar стилизация по-разному в зависимости от типа события (l oop events), ячейка bg-color

Question

Вот как я использую fullcalendar в своем приложении 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'

        }]
      }
   }
}

календарь. component. html

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

У меня большие проблемы с поиском способа управления стилизацией различных типов событий .

Я пытался используя ng-fullcalendar и / или ngx-fullcalendar , но я сталкиваюсь с различными проблемами в самом пользовательском интерфейсе календаря, он не загружается так, как предполагалось, поэтому Я предпочитаю использовать primeng fullcalendar поскольку мне удалось столкнуться с любой другой проблемой, кроме стилизации событий различного типа (bg цвет ячейки, цвет события, цвет события bg ...)

Я думаю, что я должен что-то сделать например:

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

, где this.eventColor () будет возвращать цвет в зависимости от типа события, но я не знаю, как передать параметр события внутри функции. Есть ли способ сделать это?

Я думаю, что я мог бы также найти решение этой проблемы, перебирая события календаря после их инициализации Есть ли способ циклического прохождения их?

Кроме того, я не знаю, как горячо изменить CELL bg-цвет события в общем ..

Answer 1

Не решение моей проблемы, но после многочасового поиска я не смог найти ответ, поэтому решил использовать выход jQuery.

Итак, я использую fullcalendar с jQuery, который Я рекомендую, поскольку документации по angular не так много.

Вы можете следовать этому руководству , чтобы интегрировать 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');
      }
    }


  });

Answer 2

        var calendar = new Calendar(calendarEl, {
          events: [
            // my event data
          ],
          eventColor: '#378006'
        });


This may help you

Got from  https://fullcalendar.io/docs/eventColor


--> For single date color (Below code)

dayRender: function (date, cell) {
var today = $.fullCalendar.moment();
var end = $.fullCalendar.moment().add(7, ‘days’);

if (date.get(‘date’) == today.get(‘date’)) {

cell.css(“background”, “#e8e8e8”);

}

},