Angular 8 | primeng/fullcalendar Styling differently according to event type (loop events), cell bg-color

Question

This is how I am using fullcalendar in my Angular 8 app:

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>

I am having a big trouble finding a way to control the styling of different event types.

I have tried using ng-fullcalendar and/or ngx-fullcalendar but I am facing different issues on the calendar ui itself, it wont load as it supposed to so I prefer using primeng fullcalendar as i have managed to face any other issue except the styling of the different type of events (bg color of cell, event color, event bg color...)

I think that i should do something like:

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

where this.eventColor() would return the color depending on the type of the event, but I dont know how to pass the event parameter inside the function. Is there any way of doing that?

I think I could also find a solution of this by iterating through the events of the calendar after they have been initialized Is there a way of looping through them?

Also, i don't know hot to change the CELL bg-color of an event in general..

Answer 1

Not the solution to my problem, but after searchign a a lot, i could not find an answer so I decided to use the jQuery wayout.

So, I am using fullcalendar with jQuery which I recommend since there is not a lot of documentation for the angular way..

You can follow this tutorial to integrate fullcalendar with jQuery to your Angular App.

After doing this the solution was simple.. i just used 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”);

}

},

Answer 3

Don't know if this will still help you, but I ran into the same issue and I solved it by using a set of classes that represented groups.

In my use case I had 4 "groups" of dates and within those I had a variable amount of "subGroups". on the subGroups object I defined a property and set it to a color like 'red' or 'green'. So each sub group had its own (hardcoded) color.

Then when it was time to setup all the "events" as the fullcalendar calls them I looped through all of my groups, then subgroups and events within those subgroups and when I created the "event" I set the eventColor: subgroup.color. This made sure that all events that were stored within in the subgroup had the color of the parent subGroup.