CODEWITHSUNDEEP
cssangulartypescriptfullcalendar
Agata
Agata

Reputation: 362

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.

HTML

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

TS

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++){
            console.log(data[i][0]);
            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

Upvotes: 0

Views: 4375

Answers (2)

Awais arif
Awais arif

Reputation: 11

If you use bootstrap in your project, then u must use ": host ::ng-deep" before the property u want to modify in the CSS file. This works I have applied it.

e.g. :- : host:: ng-deep color: '#ffffff'

Upvotes: 1

Pam Gaiguer
Pam Gaiguer

Reputation: 56

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 :)

Upvotes: 1

Related Questions