我的页面中有两个完整的日历。一个是一个只有月的小视图,另一个是只有周和日视图的大视图。目标是用户从小日期中选择一个日期,并立即将其显示在大日期中(周视图或日视图)。用户还可以使用大按钮的上一个和下一个按钮进行导航,并且更改必须反映在小按钮中。我之所以使用两个(我不知道这是否是最佳实践),是因为我的每一天都有很多活动,所以由于缺乏"+x更多"的显示活动选项,我不得不找到一种方法来"解决"这个问题——细胞长得很大。我有以下
html
<div id="small-cal"></div>
<div id="calendar"></div>
js
$(document).ready(function(){
$("#calendar").fullCalendar({
...some options here
});
$("#small-cal").fullCalendar({
...some options here
dayClick:function(date,allDay){
if (allDay){
$("#calendar").fullCalendar('gotoDate', date); //Works big calendar goes to date in the view that is currently in.
}
}
});
$("#calendar .fc-button-next span).click(function(){
//catching next clicked from big calendar
var date = $("#calendar").fullCalendar('getDate');
$("#small-cal").fullCalendar('gotoDate', date); //Not working properly
});
});
不起作用的原因是,点击发生在大日历中呈现新日期之前,因此日期变量包含今天的日期,而不是明天的日期。我知道有一个方法incrementDay,但无法使用它。我可以在我的日期对象中添加1使其进入下一页吗?
EDIT使用以下方法解决了问题:
$('#calendar .fc-button-next span').click(function(){
var date = $("#calendar").fullCalendar('getDate');
date.setDate(date.getDate() + 1);
console.log(date);
$("#small-cal").fullCalendar('gotoDate', date);
});
$('#calendar .fc-button-prev span').click(function(){
var date = $("#calendar").fullCalendar('getDate');
date.setDate(date.getDate() - 1);
console.log(date);
$("#small-cal").fullCalendar('gotoDate', date);
});
但现在我又犯了一个"错误"。如果我反复快速按下按钮,它不会改变日期。它甚至不会登录控制台。就像从大量点击中落后一样。我该如何克服这一点?这是一个常见的javascript问题吗?
我也遇到过同样的问题。最好的解决方案是创建自己的按钮,并将其连接到所有日历上,如下所示:(您可以在文档中找到)
$('#my-prev-button').click(function() {
$('#calendar').fullCalendar('prev');
$('#small-cal').fullCalendar('prev');
});
$('#my-next-button').click(function() {
$('#calendar').fullCalendar('next');
$('#small-cal').fullCalendar('next');
});
<div id='my-prev-button'>Previous Week</div>
<div id='my-next-button'>Next Week</div>
然后,您显然必须隐藏默认按钮