“链接”两个fullcalendars jquery并动态更改彼此的日期答案

【问题标题】："Linking" two fullcalendars jquery and dynamically changing each other's dates“链接”两个fullcalendars jquery并动态更改彼此的日期
【发布时间】：2013-12-12 19:20:20
【问题描述】：

我的页面中有 2 个完整日历。一个是只有月视图的小视图，另一个是只有周视图和日视图的大视图。目标是用户从小的日期中选择一个日期并立即显示在大的日期中（在周视图或日视图中）。用户还可以使用大按钮的上一个和下一个按钮进行导航，并且更改必须反映在小按钮中。我使用两个的原因（我不知道这是否是最佳实践）是因为我的每一天都有很多事件，所以缺少“+ x more”显示事件选项我必须找到一种方法来“解决”问题天细胞长得很大。所以我有以下内容

html

<div id="small-cal"></div>
<div id="calendar"></div>

$(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 问题吗？

【问题讨论】：

尝试在 onclick 事件中使用 setimeout 函数，当我想使用滚动浏览月份以防止对服务器的指数调用时，我已经这样做了。
用什么参数。我的意思是多少时间？
什么意思？ settimeout
是的，我知道函数...我的意思是时间，时间参数的好值是多少，你会推荐什么
这取决于每个 prev next 操作的正常加载时间。如果您认为是 2 或 3 秒，则必须设置为 4 秒，然后才能执行 prev，next 的动作。

标签： jquery date fullcalendar

【解决方案1】：

我也遇到了同样的问题。最好的解决方案是创建自己的按钮并将其连接到所有日历，如下所示：（您可以在文档中找到它）

$('#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>

你显然必须隐藏默认按钮

【讨论】：