primeng中的fullcalander风格不起作用答案

【问题标题】：style of fullcalander in primeng doesn't workprimeng中的fullcalander风格不起作用
【发布时间】：2019-05-21 19:26:02
【问题描述】：

primng 中的 fullcalander 样式不起作用

我安装了primeng 7.1.3版和angular 7中的primicons，并尝试使用fullcalander，它只显示日历中的日子，没有任何样式和事件。

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 的样式：边框......以及事件。

【问题讨论】：

标签： angular fullcalendar primeng

【解决方案1】：

Primeng 封装了 FullCalendar，因此它也应该公开样式....不幸的是它没有（当它这样做时，结果在 Angular 7 上不稳定）。因此，您可以选择两条路线（根据您的要求都不是最佳路线）：

您可以直接将 FullCalendar 用于 Angular 并在那里进行主题化。这不是最佳选择，因为您询问了primeng，但它应该是正确的方法，因为FullCalendar 的primeng 层非常薄
您可以在组件中使用::ng-deep 选择器来强制样式并破坏封装。请注意，运算符已被弃用（尽管没有一种干净的方法来实现运算符在角度中所做的事情），因为它破坏了封装，并且当内部日历更改时，您的组件可能会破坏

我是 produ primeng 用户，我知道使用第一个选项可能会很麻烦，但从长远来看，它会带来回报。我建议使用FullCalendar for Angular。

How to customize primeng styles 也可以帮助您，但本质上，它是选项 1。

【讨论】：