Alpine.js初始化FullCalendar：自定义年份切换按钮及图标修改问题

错误原因 #

• 自定义按钮的click回调中，this指向的是当前按钮实例，而非Alpine.js的x-data上下文，因此无法访问this.calendar。
• FullCalendar现代版本（非jQuery封装版）的方法调用方式是直接调用实例方法，比如calendar.prevYear()，而非calendar('prevYear')这种jQuery风格的写法。

修正后的代码 #

将click回调改为箭头函数（箭头函数会继承外层init函数的this，即x-data上下文），同时修正方法调用形式：

<div
     x-data="{
         calendar: null,
         events: [],
        
         init() {
             this.calendar = new FullCalendar.Calendar(this.$refs.calendar, {
                 initialDate: '2022-12-19',
                 initialView: 'dayGridMonth',
                 selectable: true,
                 unselectAuto: false,
                 editable: true,
                 customButtons: {
                  prevYear: {
                    text: '<<',
                    click: () => {
                     this.calendar.prevYear()
                    }
                  },
                  nextYear: {
                    text: '>>',
                    click: () => {
                     this.calendar.nextYear()
                    }
                  }
                },
                 headerToolbar: {
                  left: 'prevYear',
                  center: 'title',
                  right: 'nextYear'
                },
                views: {
                  dayGridMonth: { 
                    titleFormat: {  year: 'numeric' }
                  }
                }
             })
    
             this.calendar.render()
         },
     }"
    >
     <div x-ref="calendar"></div>
</div>

如果不想用箭头函数，也可以在init函数里先保存x-data上下文：

init() {
    const self = this;
    this.calendar = new FullCalendar.Calendar(this.$refs.calendar, {
        // 其他配置不变
        customButtons: {
            prevYear: {
                text: '<<',
                click: function() {
                    self.calendar.prevYear()
                }
            },
            nextYear: {
                text: '>>',
                click: function() {
                    self.calendar.nextYear()
                }
            }
        }
    })
    this.calendar.render()
}

有两种实用方案：

方案1：通过CSS替换默认图标 #

FullCalendar的默认prev/next按钮有专属CSS类，可通过自定义样式覆盖默认图标（支持背景图或字体图标）：

/* 替换上一页按钮图标（以Font Awesome为例） */
.fc-prev-button .fc-icon-chevron-left {
    display: none;
}
.fc-prev-button::after {
    content: '\f060';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* 替换下一页按钮图标 */
.fc-next-button .fc-icon-chevron-right {
    display: none;
}
.fc-next-button::after {
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

方案2：重新定义默认按钮，自定义内容 #

在customButtons中重新定义prev/next按钮，自定义按钮的文本/HTML，同时调用FullCalendar默认切换方法：

<div
     x-data="{
         calendar: null,
         events: [],
        
         init() {
             this.calendar = new FullCalendar.Calendar(this.$refs.calendar, {
                 // 其他配置不变
                 customButtons: {
                  prev: {
                    html: '<i class="fa fa-angle-left"></i>',
                    click: () => {
                        this.calendar.prev()
                    }
                  },
                  next: {
                    html: '<i class="fa fa-angle-right"></i>',
                    click: () => {
                        this.calendar.next()
                    }
                  }
                },
                 headerToolbar: {
                  left: 'prev',
                  center: 'title',
                  right: 'next'
                }
             })
    
             this.calendar.render()
         },
     }"
    >
     <div x-ref="calendar"></div>
</div>

这种方式可完全自定义按钮内容，同时保留FullCalendar原生的切换逻辑。

内容的提问来源于stack exchange，提问作者Haseeb ur Rehman