CODEWITHSUNDEEP
angularfullcalendar
Manoj Sanjeewa
Manoj Sanjeewa

Reputation: 1079

angular full calendar change event background color when click

need to change the background color of event when click on the event in angular fullcalendar. I have tried as setting event backgroundColor property within the click event but that was not update in view.

eventClick(e) {
     this.events.forEach(function (event) {
        if(event.id == e.calEvent.id) {
          event.backgroundColor = 'blue';
        }
      });

}

Upvotes: 0

Views: 1340

Answers (1)

Manoj Sanjeewa
Manoj Sanjeewa

Reputation: 1079

I have solved this by adding event id(unique field which I used) as class for each events using 'className' property. then in event click event add following code to add class 'active-event' to clicked event in calendar.

onEventClick(e) {
    $('a.fc-timeline-event.fc-h-event.fc-event').removeClass('active-event'); 
    $('a.fc-timeline-event.fc-h-event.fc-event.'+ e.calEvent.id).addClass('active-event');      
  }

in css add following code

a.fc-timeline-event.fc-h-event.fc-event.active-event {
    background-color: 'red';
}

'a.fc-timeline-event.fc-h-event.fc-event' is classes which applied to all events in calendar.

Upvotes: 1

Related Questions