在jQuery fullcalendar中,我们有上一个和下一个按钮。如何点击这些按钮调用某些事件?
答案 0 :(得分:30)
最好的方法是:
viewRender: function(view, element) {
var b = $('#calendar').fullCalendar('getDate');
alert(b.format('L'));
},
答案 1 :(得分:25)
您可以将事件简单地附加到按钮:
$('.fc-button-prev span').click(function(){
alert('prev is clicked, do something');
});
$('.fc-button-next span').click(function(){
alert('nextis clicked, do something');
});
答案 2 :(得分:12)
这对我有用:
$('body').on('click', 'button.fc-prev-button', function() {
//do something
});
$('body').on('click', 'button.fc-next-button', function() {
//do something
});
答案 3 :(得分:7)
单击 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天。
答案 4 :(得分:7)
单击它们时,将触发viewRender事件。您也可以在其中添加代码。
$('#calendar').fullCalendar({
viewRender: function(view, element) {
//Do something
}
});
答案 5 :(得分:5)
我看到还有其他可行的答案,但是恕我直言,最简单且更正确-至少使用 FullCalendar v.4 -是拦截prev
,而next
是拦截以自定义按钮的相同方式处理它们。
这里是我的设置(仅出于演示目的使用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();
});
答案 6 :(得分:2)
版本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 -从dateRender重命名。在视图的日期初始化或更改时调用。” https://fullcalendar.io/docs/upgrading-from-v4
答案 7 :(得分:2)
全日历版本 5 中的解决方案:
如果您使用的是 FullCalendar 版本 5,我会建议您使用 datesSet
而不是使用 .click()
。
datesSet: function() {
myFunction();
}
每次更改或初始化日历的日期范围时都会调用 myFunction()
。换句话说,当您点击日历中提供的上一个/下一个按钮时,日历的日期范围将被更改并且 myFunction()
将被调用。
参考:https://fullcalendar.io/docs/datesSet
如果您真的想采用 .click()
方式,以下代码适用于 FullCalendar 版本 5。
$('.fc-prev-button').click(function(){
myFunction();
});
$('.fc-next-button').click(function(){
myFunction();
});
这两种方法在我的项目(FULLCALENDAR 的第 5 版)中都非常有效,希望这可以帮助那些正在为这个问题苦苦挣扎的人。
答案 8 :(得分:1)
只是一个快速更新,不知道多长时间,但接受的答案对我有用:
$('.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 () {
希望我能帮助别人。
答案 9 :(得分:1)
另一种解决方案是定义您的自定义上一个/下一个按钮:
$('#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 !');
}
},
}
});
答案 10 :(得分:1)
在事件中声明日历期间,您可以编写事件的回调函数:
Example not_congruent: 0 <> 1.
intros C. (* now our goal is 'False' *)
pose (fun m=>match m with 0=>True |S _=>False end) as f.
assert (Contra: f 1 = f 0) by (rewrite C; reflexivity).
now replace False with True by Contra.
Qed.
// eventsarray - 这是日历数据的集合。您还可以通过传递所选/当月的第一个和最后一个日期来处理月份功能,并处理上一个和下一个事件。
答案 11 :(得分:0)
$('.fc-button-next span').click(function(){
//do your work
});
$('.fc-button-prev span').click(function(){
//do your work
});
答案 12 :(得分:0)
使用 click
代替 on
$('body').on('click', '.fc-prev-button', function() {
});
$('body').on('click', '.fc-next-button', function() {
});
当您的日历可以在任何时间点动态初始化时,这很有用。