I have used fullcalendar in my angular project. I want to bind default methods like pre, next, month views, week view and day view to custom button.
I have used fullcalendar in my angular project. I want to bind default methods like pre, next, month views, week view and day view to custom button.
I got the solution we need to do something like this.
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.
}
Thank you @ADyson for your time and support
Put the below code where you initialised the calendar.
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');
}
}
}