Question

我的页面中有2个全尺寸标记。这是一个只有一个月的小视图，另一个是一个只有周和日视图的大视图。目标是用户从小的日期中选择一个日期，并立即显示在大日期中（在周视图或日视图中）。用户还可以使用大按钮的上一个和下一个按钮进行导航，并且更改必须反映在小按钮中。我使用两个的原因（我不知道它是否是最佳实践）是因为我的每一天都有很多事件，所以缺少“+ 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问题吗？

Answer 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>

然后你显然必须隐藏默认按钮

“链接”两个fullcalendars jquery并动态地改变彼此的日期

1 个答案: