Reputation: 362
I'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
});
}
}
});
}
Upvotes: 0
Views: 4375
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
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