FullCalendar v4 Angular 7 自定义按钮

Question

我正在我的组件 html（angular 版本 7）中设置 fullCalendar v4，但似乎无法使用自定义按钮。

我尝试了多种不同的语法组合，但还没有找到正确的组合。我也去看了FC提供的demo工程，没找到自定义按钮的例子

component.html

<full-calendar
            #calendar
            defaultView="dayGridMonth"
            [customButtons]="{
                            filter: {
                            text: 'filter',
                            click: 'open()'
                            }
                        }"
            [header]="{
                center: 'title',
                left: 'filter,dayGridMonth,timeGridWeek,timeGridDay',
                right: 'prev, next today'
            }"
            [plugins]="calendarPlugins"
            [events]="selectedEvents"
                         ></full-calendar>

            <!-- <div class="col col-md-offset-1">
                <div class="card card-calendar">
                    <div class="card-content">
                        <div id="fullCalendar"></div>
                    </div>
                </div>
            </div> -->
        </div>

comp.ts

open() {
        var type = '';
        var content = this.login;
        this.getLocationBatches();
        this.getRooms();
        if (type === 'sm') {
            console.log('aici');
            this.modalService.open(content, { size: 'sm' }).result.then(
                result => {
                    this.closeResult = `Closed with: ${result}`;
                },
                reason => {
                    this.closeResult = `Dismissed ${this.getDismissReason(
                        reason
                    )}`;
                }
            );
        } else {
            this.modalService.open(content).result.then(
                result => {
                    this.closeResult = `Closed with: ${result}`;
                },
                reason => {
                    this.closeResult = `Dismissed ${this.getDismissReason(
                        reason
                    )}`;
                }
            );
        }
    }

点击自定义按钮时出错

ERROR TypeError: customButtonProps.click.call is not a function
    at HTMLButtonElement.buttonClick (main.js:6035)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17280)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)
defaultErrorLogger @ core.js:15714
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15762
next @ core.js:17761
schedulerFn @ core.js:13505
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13489
(anonymous) @ core.js:17311
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17248
onHandleError @ core.js:17311
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:198
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770

我从 v3 升级而来，在 v3 中我的日历工作得很好。对于 v4，所有功能都在 html 中处理，并且在语法上略有不同。

Answer 1

尝试使用其中一种方法，但您需要在组件端定义该选项，请查看演示：

click: () => this.open()

或

click: this.open.bind(this)

WORKING DEMO

FullCalendar v4 Angular 7 自定义按钮

FullCalendar v4 Angular 7 Custom Button

angular

fullcalendar

angular7

fullcalendar-4