PrimeNG 计划自定义按钮

Question

可以在 PrimeNG Schedule 组件中使用完整的日历自定义按钮吗？

我尝试通过@ViewChild("calendar-id") 使用 ElementRef，但我得到了 p-shedule 对象类型，没有任何 fullCalendar 方法。

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

Custom buttons docs PrimeNG schedule docs

Answer 1

今天最好的方法是制作自己的按钮。可以使用日历的 ElementRef @ViewChild("calendar-id").

来完成

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

其中 * 是 PrimeNG 计划文档中的函数 - Methods

Answer 2

您可以通过以下方式获取完整日历：

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

未记录 PrimeNG Schedule 对象的 schedule 成员。我是从实现中发现的。

Answer 3

您可以通过 "options" 属性 Schedule 实现您想要的。

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

并且在模板中：

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

希望对您有所帮助

PrimeNG 计划自定义按钮

PrimeNG schedule custom buttons

fullcalendar

primeng

angular