PrimeNG schedule custom buttons

问题

Can use full calendar custom buttons in PrimeNG Schedule component?

I've tried to use ElementRef by @ViewChild("calendar-id"), but I get p-shedule object type, without any fullCalendar methods.

customButtons: {
    myCustomButton: {
        text: 'custom!',
        click: function() {
            alert('clicked the custom button!');
        }
    }
},

Custom buttons docs PrimeNG schedule docs

回答1:

The best way to do it today is make your own buttons. It can be done with ElementRef of your calendar @ViewChild("calendar-id").

@ViewChild('calendar-id') calendar;
ngAfterViewInit(): void {
    this.calendar.*;
}

Where * is function from PrimeNG schedule docs - Methods

回答2:

You can get hold of the full calendar by:

@ViewChild('calendar-id') calendar;
ngAfterViewInit(): void {
    this.calendar.schedule.fullCalendar('<method>');
}

The schedule member of the PrimeNG Schedule object is not documented. I discovered it from the implementation.

回答3:

You can achieve what you want with the "options" property of Schedule.

public options : any = {};
...
ngOnInit() {
    this.options.customButtons = {
        myCustomButton: {
            text: 'myCustom',
            icon: 'fa-check',
            click: r => {console.log("clicked");}
          }
    }

And in the template:

   <p-schedule #cal [events]="events" locale="es" [height] ="750" [header]="headerConfig" [options]="options">
 </p-schedule>

Hope it helps

来源：https://stackoverflow.com/questions/41847381/primeng-schedule-custom-buttons