Agular full calendar view events styling(hover effect)

Question

I want to Add hover effects on Events of Angular Full-calendar-view(using this version ^5.10.2). I tried by using eventMouseEnter and eventMouseLeave functions but it's not helping me to add effects on events. Pic attached to show events on Full calendar.enter image description here

Here is the code: HTML:

<div class="card-body p-0">
        <full-calendar  [options]="calendarOptions"></full-calendar>
      </div>

TS:

export class FullcalendarviewComponent implements OnInit {
  constructor(private modalService: BsModalService,private taskservice:TasksService,public datepipe: DatePipe,public _router:Router) {   }
  ngOnInit(): void {
this.getTaskList();
  }
 
  getTaskList(){
    this.taskservice.getallTaskCalendar().subscribe(data =>{
      this.tasklist=data.Data[1];
      console.log('Task API data of full calendar',this.tasklist);
      this.tasklist = this.tasklist.map((e: any) => ({ Id:e.TaskId,title: e.TaskName, start: e.TaskDueDate,end:this.datepipe.transform(e.TaskDueDate , 'YYYY-MM-dd')+"T24:00:00" ,description:e.TaskDetails,For:e.AccountName,Type:e.TaskType, allDay: true }));
      this.calendarOptions = {
         eventMouseEnter:this.handleEventMouseEnter.bind(this),
         eventMouseLeave:this.handleEventMouseLeave.bind(this),
       eventClick:this.Eventfunc.bind(this),  
        events:this.tasklist,    
      };
    });
  eventType:any;
  handleDateClick(arg) {  
 this.modalService.show(CalendarAddTaskModalComponent);
  }
  handleEventMouseEnter(){
console.log('Mouse entered');
  }
  handleEventMouseLeave(){
    console.log('Mouse out'); 
  } 
  }
}