"Linking"两个完整日历jquery并动态更改彼此的日期



我的页面中有两个完整的日历。一个是一个只有月的小视图,另一个是只有周和日视图的大视图。目标是用户从小日期中选择一个日期,并立即将其显示在大日期中(周视图或日视图)。用户还可以使用大按钮的上一个和下一个按钮进行导航,并且更改必须反映在小按钮中。我之所以使用两个(我不知道这是否是最佳实践),是因为我的每一天都有很多活动,所以由于缺乏"+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>

然后,您显然必须隐藏默认按钮

相关内容

  • 没有找到相关文章

最新更新