我在项目中使用了，el-calender组件，并获取了那三个按钮元素，添加了click事件，但是它原生的翻页事件和切换calender组件日期的事件没有拦截到，要用canlender的哪个属性或函数才能拦截到这两个事件呢？
还有点击非本月日期，同样可以切换月份和组件内日期，又应该如何拦截/重写？
el-calendar 组件提供了一些事件和方法，可以用于拦截和处理翻页和日期切换事件。
1、翻页事件
el-calendar 组件提供了 change 事件，当月份或年份发生变化时会触发该事件。可以在该事件回调函数中获取当前的年份和月份，然后进行相应的处理。
示例代码：
<el-calendar ref="calendar" @change="handleChange"></el-calendar>
...
methods: {
handleChange(date) {
console.log('当前日期：', date);
// 进行相应的处理
}
}
2、日期切换事件
el-calendar 组件提供了 cell-click 事件，当用户点击日期单元格时会触发该事件。可以在该事件回调函数中获取当前点击的日期，然后进行相应的处理。
示例代码：
<el-calendar ref="calendar" @cell-click="handleCellClick"></el-calendar>
...
methods: {
handleCellClick(date) {
console.log('当前日期：', date);
// 进行相应的处理
}
}
3、点击非本月日期事件
el-calendar 组件提供了 prev-month 和 next-month 方法，可以用于切换到上一个月和下一个月。可以在 cell-click 事件回调函数中判断用户点击的日期是否为本月日期，如果不是，则调用相应的方法切换到该日期所在的月份。
示例代码：
<el-calendar ref="calendar" @cell-click="handleCellClick"></el-calendar>
...
methods: {
handleCellClick(date) {
console.log('当前日期：', date);
if (!this.isCurrentMonth(date)) {
this.changeMonth(date);
}
},
isCurrentMonth(date) {
return date.getMonth() === this.$refs.calendar.currentMonth;
},
changeMonth(date) {
const calendar = this.$refs.calendar;
if (date < calendar.displayRange[0]) {
calendar.prevMonth();
} else if (date > calendar.displayRange[1]) {
calendar.nextMonth();
}
}
}
上述代码中，isCurrentMonth 方法用于判断给定日期是否为当前显示的月份。如果不是，就调用 changeMonth 方法切换到该日期所在的月份。changeMonth 方法会根据日期所在的月份，调用 prev-month 或 next-month 方法切换到相应的月份。