完整的日历事件绑定到 Angular 中的下一个上一个、一个月、一周和一天视图的自定义按钮

Question

我在我的 angular 项目中使用了 fullcalendar。我想将默认方法（如前视图、下视图、月视图、周视图和日视图）绑定到自定义按钮。

请帮我解决这个问题。

Answer 1

我得到了执行此类操作所需的解决方案。

someMethod() {
    let calendarApi = this.calendarComponent.getApi();
    calendarApi.next(); // For next
    calendarApi.prev(); // For prev
    calendarApi.changeView('timeGridDay'); // changing view
    calendarApi.changeView('timeGridDay', '2017-06-01'); // change view for specific date
    calendarApi.changeView('timeGrid', {
                         start: '2017-06-01',
                         end: '2017-06-05'
                    }); // For changing week view or month view accodring to date.
  }

感谢@ADyson 的宝贵时间和支持

Answer 2

将下面的代码放在你初始化日历的地方。

this.calendarOptions = {


customButtons: {
   prev: { // this overrides the prev button
     text: 'PREV',
     click: () => {
     const calendarApi = this.calendarComponent.getApi();
     calendarApi.prev();
   }
   },
   next: { // this overrides the next button
     text: 'NEXT',
     click: () => {
     const calendarApi = this.calendarComponent.getApi();
     calendarApi.next();
    }
  },
   dayGridMonth: { // this overrides the month button
      text: 'Month',
      click: () => {
        const calendarApi = this.calendarComponent.getApi();
        calendarApi.changeView('dayGridMonth');
      }
    },
    timeGridWeek: { // this overrides the week button
      text: 'Week',
      click: () => {
        const calendarApi = this.calendarComponent.getApi();
        calendarApi.changeView('dayGridMonth');
      }
    },
    timeGridDay: { // this overrides the day button
      text: 'Day',
      click: () => {
        const calendarApi = this.calendarComponent.getApi();
        calendarApi.changeView('dayGridMonth');
      }
    }
}

完整的日历事件绑定到 Angular 中的下一个上一个、一个月、一周和一天视图的自定义按钮

Full calendar event bind to custom button for next prev, month week and day view in Angular

fullcalendar

angularjs

angular