普里蒙的富兰德风格不起作用

Question

primng中fullcalander的样式不起作用

我在Angular 7安装Primeng版本7.1.3，并尝试使用Fullcalander，它仅显示Calander的日子，没有任何样式，没有事件。

this is my app.ts code:
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['./app.component.css',"node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css"]
})
export class AppComponent implements OnInit {
  title = 'Client';
  events: any[];
  options: any;
  header: any;
  ngOnInit() {
    this.events= [
      {
          "title": "All Day Event",
          "start": "2016-01-01"
      },
      {
          "title": "Long Event",
          "start": "2016-01-07",
          "end": "2016-01-10"
      },
      {
          "title": "Repeating Event",
          "start": "2016-01-09T16:00:00"
      },
      {
          "title": "Repeating Event",
          "start": "2016-01-16T16:00:00"
      },
      {
          "title": "Conference",
          "start": "2016-01-11",
          "end": "2016-01-13"
      }
  ];
    this.options = {    
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        defaultDate: '2017-02-01',
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true
    };
}
}
this is my app.html code:
<div class="content-section implementation">
  <p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>
</div>

我希望它显示fullcalander的风格：边界....还有事件。

Answer 1

Primeng封装了FullCalendar，因此它也应揭示样式。...不幸的是，它不会(当它做到时，结果在Angular 7上不稳定(。因此，您可以选择两条路线(根据您的请求都不是最佳的(：

1. 您可以直接将FullCalendar用于Angular，并在此处进行主题。这不是最佳的，因为您询问了Primeng，但是它应该是正确的方法，因为FullCalendar的Primeng层非常
2. 您可以在组件中求助于::ng-deep选择器，以强制样式并断开封装。请注意，操作员已被弃用(尽管没有一种干净的方法可以实现Angular中的操作员的操作者(，因为它会破坏包含，并且当内日历更改时您的组件可能会破坏

我是Produ Primeng的用户，并且了解使用第一个选项可能会很麻烦，但从长远来看。我建议将FullCalendar用于Angular。

如何自定义Primeng样式也可以为您提供帮助，但是从本质上讲，它是选项1。