how can i customize on the event appearance in fullcalender component here is my code import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { FullCalendarComponent } from '@fullcalendar/angular';

@Component({
  selector: 'app-bulkactioncalender',
  templateUrl: './bulkactioncalender.component.html',
  styleUrls: ['./bulkactioncalender.component.scss']
})
export class BulkactioncalenderComponent implements OnInit {
  @ViewChild('eventContainer', { static: true }) eventContainer: ElementRef;
  @ViewChild('fullcalendar', { static: false }) fullcalendar: FullCalendarComponent;
  calendarOptions: CalendarOptions;
  viewOptions: string[] = ['monthly', 'weekly', 'daily'];
  selectedView: string = 'monthly';
  value='dayGridMonth';
  customTitleVisible=true;

  constructor(){}

  ngOnInit(): void {
  
    this.calendarOptions = {
      plugins: [dayGridPlugin,  timeGridPlugin,
        interactionPlugin,],
      
      headerToolbar: {
        left: 'prev',
       center: 'title',
        right: 'next',
      },
      initialView: this.value,
      eventDidMount: this.eventDidMount.bind(this),
      events: this.getEvents.bind(this)
      // events: [
      //   // Add your events here
      //   { title: 'Event 1', date: '2023-08-10' },
      //   { title: 'Event 2', date: '2023-08-12' },
      //   { title: 'Event 3', date: '2023-08-12' },
       
      // ]
    };
  }

  onViewChange(): void {
  this.getSelectedView();
  }

  getSelectedView() {
    if (this.selectedView === 'monthly') {
      this.value= 'dayGridMonth';
      this.renderCalendar();
    } else if (this.selectedView === 'weekly') {
     
      this.value= 'dayGridWeek';
      this.renderCalendar();
    } else if (this.selectedView === 'daily') {
      this.value ='timeGridDay';
      this.renderCalendar();
    }
  }

  renderCalendar(): void {
    if (this.fullcalendar) {
      this.fullcalendar.getApi().changeView(this.value);
    
    }
  }


  eventDidMount(info: any) {
    const eventEl = info.el;
    eventEl.addEventListener('click', (e) => {
      this.handleEventClick(e, info.event);
    });
  }
  getEvents(info: any, successCallback: any, failureCallback: any) {
    const events = [
      { title: 'Event 1', date: '2023-08-10' },
      { title: 'Event 2', date: '2023-08-12' },
      { title: 'Event 3', date: '2023-08-12' },
    ];
    successCallback(events);
  }
  handleEventClick(event: Event, clickedEvent: any) {
    // Access the clicked event and perform actions
    console.log("Hello wolrd")
    console.log(clickedEvent);
  }
  
  // customEventRender(info: any): void {
  //   console.log ("test");
  //   const eventDate = info.event.start;
  //   const weekNumber = Math.ceil((eventDate.getDate() + 6 - eventDate.getDay()) / 7);
  //   const monthName = eventDate.toLocaleString('default', { month: 'long' });
  //   const year = eventDate.getFullYear();
  //   const titleElement = document.createElement('div');
  //   titleElement.classList.add('fc-toolbar-title');
  //   titleElement.innerHTML = `Week${weekNumber}, ${monthName} ${year}`;
  //   info.el.querySelector('.fc-event-title-container').appendChild(titleElement);
  // }
}