如何使用 Jquery FullCalendar 从另一个视图设置日历视图的日期？

Question

我的页面上有 2 个 Jquery fullcalendar 控件。

我希望能够单击处于“月份模式”的第一个日历上的一天，然后将默认使用 AgengaDay 视图的第二个日历设置为第一个被单击的日期日历？

我尝试了以下方法：

 $('#firstCalendar').fullCalendar({

            dayClick: function (date, allDay, jsEvent, view) {

                $('#secondcalendary').fullCalendar('select', date, date, allDay);
            }
 });

但它似乎不起作用

Answer 1

给你——其实没那么难。点击 Cal1 日和 Cal2 更改！

http://jsfiddle.net/ppumkin/A56LN/

---

代码

---

$('#mycalendar1').fullCalendar(
{
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    dayClick: function( date, allDay, jsEvent, view ) {
        dayClicked(date);
    },
    events: [                         
        {
            title  : 'event2',
            start  : '2011-03-10',
            end    : '2011-07-25'
        }
    ]
}); 


$('#mycalendar2').fullCalendar(
            {
             header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                    },

                defaultView: 'agendaDay',

                events: [                         
                        {
                            title  : 'event2',
                            start  : '2011-03-10',
                            end    : '2011-07-25'
                        }
                    ]
           }); 


function dayClicked(date){
    $('#mycalendar2').fullCalendar( 'gotoDate', date );
}

---

点击“今天”和其他按钮..

我有一些这样的代码。但这不是解决方案。因为它显示日历更改之前的日期。所以基本上是旧日期 - 也许你可以使用超时？ 500毫秒？什么的 - 因为 jquery 在 fullcalendar 之前绑定...

$('.fc-button-today').click(function() { 
     alert($('#mycalendar2').fullCalendar( 'getDate' ));
   //dayClicked($('#mycalendar2').fullCalendar( 'getDate' ))

        });

您可能必须使用 viewDisplay 事件。但是里面有点复杂。这是一个如何使用它的文档。

http://arshaw.com/fullcalendar/docs/display/viewDisplay/

看看世界末日的答案-很好的解决方案：D

---

一天点击和可能的其他按钮的内部破解。

您可以打开 fullcalendar.js 并转到关于... 3220 的行或搜索Slot/Day click and binding

/* Slot/Day clicking and binding
-----------------------------------------------------------------------*/


function dayBind(cells) {
    cells.click(slotClick)
        .mousedown(daySelectionMousedown);

   //OVER HERE INSERT YOUR CUSTOM CALL!
     setMyOtherCalendar();
}

并且在您的页面中某处，您将拥有 setMyOtherCalendar 的公共函数，并且其中会有这个简单的代码.. init mate?

function setMyOtherCalendar(){

  $('#mycalendar2').fullCalendar( 'gotoDate',      $('#mycalendar1').fullCalendar( 'getDate' ) );

};

Answer 2

我同意 ppumkin 的 dayclick。

但是仍然可以更改上一个、下一个、今天按钮的操作。我将使用此解决方案从 #mycalendar1 导航到 #mycalendar2：

$("#mycalendar1 .fc-button-prev").click(function() {
  $("#mycalendar2").fullCalendar('prev');
});
$("#mycalendar1 .fc-button-next").click(function() {
  $("#mycalendar2").fullCalendar('next');
});
$("#mycalendar1 .fc-button-today").click(function() {
  $("#mycalendar2").fullCalendar('today');
});

并为 dayClick 保留 ppumkin 解决方案：

dayClick: function( date, allDay, jsEvent, view ) {
   $('#mycalendar2').fullCalendar( 'gotoDate', date );
},

如果您使用 .fullcalendar 而不是 #mycalendar2（如果您使用两个以上的日历），则应使用 each 关键字。

一个例子显示在：http://jsfiddle.net/Doomsday/6P2CR/