стиль fullcalander в primeng не работает

Question

стиль fullcalander в primng не работает

Я устанавливаю primeng версии 7.1.3, а также примитивы в angular 7 и пытаюсь использовать полный каландр, и он показывает только дни в каландре без каких-либо стилей и без событий.

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>

Я хочу, чтобы он отображал стили полного каландра: границы .... а также события.

Answer 1

Primeng инкапсулирует FullCalendar, поэтому он должен также раскрывать стили .... к сожалению, это не так (и когда это происходит, результаты не стабильны на angular 7).Следовательно, вы можете выбрать два маршрута (ни один из них не является оптимальным для вашего запроса):

1. , вы можете напрямую использовать FullCalendar для угловых и делать их там.Это не оптимально, потому что вы спросили о primeng, однако это должен быть правильный подход, так как слой primeng для FullCalendar очень тонкий
2. , вы можете прибегнуть к селектору ::ng-deep в своем компоненте, чтобы принудить стиль и нарушить инкапсуляцию,Обратите внимание, что оператор устарел (хотя не существует чистого способа добиться того, что оператор делает в угловых), потому что он нарушает инкапсуляцию и ваш компонент может сломаться при изменении внутреннего календаря

Я продюсерПользователь primeng и понимает, что использование первого варианта может быть хлопотным, но оно окупается в долгосрочной перспективе.Я бы предложил использовать FullCalendar для Angular .

Как настроить стили primeng также может помочь вам, но, по сути, это вариант 1.