1

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'); 
  } 
  }
}
Rohan Raza
  • 11
  • 1
  • This is a repeated question in https://stackoverflow.com/questions/72603972/agular-full-calendar-view-events-styling. Please, edit the question whenever you want to add more information, but don't repeat it in a new one – VFG Jun 14 '22 at 10:32

0 Answers0