全日历 angular

Question

我在 angular 中使用 FullCalendar，我想更改特定日期的网格背景我已经尝试了一些选项，但没有用。

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

Answer 1

遇到了同样的问题，我发现 Angular 的 FullCalendar 样式在页面呈现后才起作用，这意味着，如果您将样式应用到 styles.scss 中，它将起作用 :)

例如，我这样做了：

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

希望对您有所帮助:)

全日历 angular

FullCalendar angular

css

fullcalendar

typescript

angular