style of fullcalander in primeng doesn't work

Question

style of fullcalander in primng doesn't work

i install primeng version 7.1.3 and also primeicons in angular 7 and try to use fullcalander and it show only the days in the calander without any styles and without the events.

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>

i want it to show the styles of the fullcalander: the borders.... and also the events.

score 0 · Answer 1 · answered May 21 '19 at 11:26

Primeng encapsulates FullCalendar, therefore it should expose the styles too.... unfortunately it does not (and when it does, the results are not stable on angular 7). Hence you can choose two routes (neither is optimal per your request):

you can directly use FullCalendar for angular and do your theming there. This is not optimal because you asked about primeng, however it should be the right approach as the primeng layer for FullCalendar is very thin
you can resort to ::ng-deep selector in your component to force the style and break encapsulation. Please note that the operator is deprecated (although there is not a clean way to achieve what operator does in angular) because it breaks the encpasulation and your component may break when inner calendar changes

I am a produ primeng user and understand that using the first option could be a hassle, but it pays out on the long term. I would suggest using FullCalendar for Angular.

How to customize primeng styles could also help you, but essentially, it is option 1.

style of fullcalander in primeng doesn't work

1 Answers1