[SOLVED] FullCalendar angular


enter image description hereI’m using FullCalendar in angular and I would like to change the specific day grid background I have tried some options but it didn’t work.


<full-calendar #calendar [options]="calendarOptions"></full-calendar>


export class CalendarComponent implements OnInit{

      calendarData: CalendarData[] = [];
      calendarVisible = false;
      calendarOptions: CalendarOptions = {
        headerToolbar: {
          right: 'title,prev,next',
          center: '',
          left: 'timeGridDay,timeGridWeek,dayGridMonth'
        initialView: 'dayGridMonth',
        eventColor: '#F4C584',
      @ViewChild('calendar') calendarComponent!: FullCalendarComponent;
      isData = false;
      calendarPlugins = [listPlugin,dayGridPlugin,timeGridPlugin]     
      getCalendar(): void{
        this.calendarService.getCalendar(2022).subscribe((res) => {
          this.calendarOptions.events = [];
          const data  = Object.entries(res.data).map((val: any) => {
            return val;
          for(let i = 0; i < data.length; i++){
            for(let j = 0; j < data[i][1].length; j++){
              this.calendarOptions.events.push( //here I'm pushing into event options array my data
                    title : data[i][1][j].date.split(' ')[0],
                    date: data[i][0] 
                    background: '#000000' //I tried to give a color like this but it didn't work


link to the full calendar


Had the same problem and I discovered that FullCalendar styles for Angular just work after the page is rendered, meaning, if you apply the style into your styles.scss it will work 🙂

For example, i did this:

.fc .fc-daygrid-day.fc-day-today {
  background-color: rgb(229, 248, 225, 0.5) !important;

Hope that it helps 🙂

Answered By – Pam Gaiguer

Answer Checked By – Senaida (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *