在 jQuery fullcalendar 中，我们有上一个和下一个按钮。我们如何在单击这些按钮时调用一些事件？
最好的方法是：
viewRender: function(view, element) {
var b = $('#calendar').fullCalendar('getDate');
alert(b.format('L'));
},
您可以简单地将事件附加到按钮：
$('.fc-button-prev span').click(function(){
alert('prev is clicked, do something');
});
$('.fc-button-next span').click(function(){
alert('nextis clicked, do something');
});
这对我有用：
$('body').on('click', 'button.fc-prev-button', function() {
//do something
});
$('body').on('click', 'button.fc-next-button', function() {
//do something
});
当您单击它们时，会触发 viewRender 事件。您也可以在其中添加您的代码。
$('#calendar').fullCalendar({
viewRender: function(view, element) {
//Do something
}
});
我看到还有其他有效的答案，但恕我直言，最简单、更正确的 - 至少使用 FullCalendar v.4 - 是拦截
prevnext这是我的设置（使用 toastr 仅用于演示目的）
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid' ],
header: {
left: 'dayGridMonth,timeGridWeek,timeGridDay',
center: 'title',
right: 'prev,next'
},
footer: {
left: '',
center: '',
right: 'prev,next'
},
customButtons: {
prev: {
text: 'Prev',
click: function() {
// so something before
toastr.warning("PREV button is going to be executed")
// do the original command
calendar.prev();
// do something after
toastr.warning("PREV button executed")
}
},
next: {
text: 'Next',
click: function() {
// so something before
toastr.success("NEXT button is going to be executed")
// do the original command
calendar.next();
// do something after
toastr.success("NEXT button executed")
}
},
}
});
calendar.render();
});
在此处查看Codepen
全日历版本 5 中的解决方案：
如果您使用的是 FullCalendar 版本 5，我建议您使用
datesSet.click()datesSet: function() {
myFunction();
}
每次更改或初始化日历的日期范围时都会调用
myFunction()myFunction()参考：https://fullcalendar.io/docs/datesSet
如果你真的想采用
.click()$('.fc-prev-button').click(function(){
myFunction();
});
$('.fc-next-button').click(function(){
myFunction();
});
这两种方法在我的项目（FULLCALENDAR 版本 5）中都非常有效，希望这可以帮助那些正在解决这个问题的人。
当单击 next 和 previous 按钮时，将调用 events 函数。这是加载当年数据的示例：
$(document).ready(function() {
loadCal();
});
function loadCal() {
var current_url = '';
var new_url = '';
$('#calendar').fullCalendar({
// other options here...
events: function(start, end, callback) {
var year = end.getFullYear();
new_url = '/api/user/events/list/' + id + '/year/' + year;
if (new_url != current_url) {
$.ajax({
url: new_url,
dataType: 'json',
type: 'POST',
success: function(response) {
current_url = new_url;
user_events = response;
callback(response);
}
})
} else {
callback(user_events);
}
}
})
}
在查询中检索结果时，请确保至少包含上一年的最后 10 天和下一年的前 10 天。
版本3答案是使用：
viewRender: function (event, element, view){
// you code here
}
版本 4： https://fullcalendar.io/docs/v4/datesRender
datesRender: function (){
// you code here
}
https://fullcalendar.io/docs/v4/upgrading-from-v3
“viewRender 重命名为datesRender。参数已更改。”
版本 5 使用：
datesSet: function (){
// you code here
}
“datesRender更改为：datesSet - 从datesRender重命名。在视图的日期初始化或更改时调用。” https://fullcalendar.io/docs/upgrading-from-v4
另一个解决方案是定义自定义上一个/下一个按钮：
$('#m_calendar').fullCalendar({
header: {
left: 'customPrevButton,customNextButton today',
center: 'title',
},
customButtons: {
customPrevButton: {
text: 'custom prev !',
click: function () {
alert('custom prev ! clicked !');
}
},
customNextButton: {
text: 'custom ext!',
click: function () {
alert('custom ext ! clicked !');
}
},
}
});
只是一个快速更新，不知道需要多长时间，但接受的答案对我来说是这样的：
$('.fc-prev-button').click(function(){
alert('prev is clicked, do something');
});
$('.fc-next-button').click(function(){
alert('nextis clicked, do something');
});
注意细微的变化，
今天点击如下：
$(".fc-today-button").click(function () {
希望我能帮助别人。
在事件中声明日历时，您可以编写事件的回调函数：
$('#calender').fullCalendar({
events: function (start, end, timezone, callback) {
callback(eventsarray);
}
});
//eventsarray - 这是日历数据的集合。您还可以通过传递所选/当月的第一个和最后一个日期来调用月份明智的函数，并处理上一个和下一个事件。
$('.fc-button-next span').click(function(){
//do your work
});
$('.fc-button-prev span').click(function(){
//do your work
});
代替
clickon$('body').on('click', '.fc-prev-button', function() {
});
$('body').on('click', '.fc-next-button', function() {
});
当您的日历可以在任何时间点动态初始化时，这非常有用。
如果您没有通过上述答案，请尝试以下操作：
$('span.fc-button.fc-button-prev.fc-state-default.fc-corner-left').click(function() {
alert('prev is clicked, do something');
});
$('span.fc-button.fc-button-next.fc-state-default.fc-corner-right').click(function() {
alert('next is clicked, do something');
});
完整日历 v3.4.0
上一个，下一个。今天、周、月按钮：
$(document).ready(function(){
$('#mycalendar').fullCalendar({
$('.fc-prev-button').click(function(){
alert("Clicked prev button");
});
$('.fc-next-button').click(function(){
alert("Clicked next button");
});
$('.fc-today-button').click(function(){
alert('Today button clicked, do something');
});
$('.fc-listWeek-button').click(function(){
alert('list week clicked, do something');
});
$('.fc-listMonth-button').click(function(){
alert('list month clicked, do something');
});
});
});
版本 6
为什么不是一个相当有效、更全球化的解决方案，只需很少的代码......纯 js
document.querySelectorAll(('.fc-button')).forEach(button => {
button.onclick = () => 'do something...'
})
您可以使用 customButtons 来获取事件点击或更改按钮图标，如下面的代码：
$('#fullcalendar').fullCalendar({
themeSystem: 'jquery-ui',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listMonth'
},
height: 'auto',
editable: false,
eventSources: [],
showNonCurrentDates: false,
fixedWeekCount: false,
// custom button
customButtons: {
prev: {
// text: 'Prev', // you can choose to use text or icon to your button
icon: 'left-single-arrow',
click: function() {
console.log('Prev');
}
},
next: {
// text: 'Next', // you can choose to use text or icon to your button
icon: 'right-single-arrow',
click: function() {
console.log('Next');
}
},
}
});
$('#fullcalendar').fullCalendar('render');
events: function() {
$.ajax({
url: window.location.origin + '/calendar/get_workschedule',
type: "POST",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
month : $('#calendar').fullCalendar('getDate').month(),
year : $('#calendar').fullCalendar('getDate').year(),
},
success: function(data) {
var schedules=[];
$.each(data, function(key, value){
schedules.push({
'title' : value.title,
'start' : new Date(value.year, value.month, value.day),
'backgroundColor': [value.bgColor]
})
})
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', schedules);
$('#calendar').fullCalendar('rerenderEvents' );
}
});
}