当日历不可见时，FullCalendar不会重新渲染事件

Question

我试图动态地更新我的日历（fullcalendar.js），但是当日历不可见时，它不会恢复事件。我还在我的Web应用程序中使用JavaScript选项卡，因此"不可见"我的意思是它在另一个选项卡上。我已经设置了一个JSFIDDLE来演示行为：

http://jsfiddle.net/35ku5/10/

如果您在包含日历的选项卡上单击添加按钮，则将添加事件并立即可见。

但是，如果您在第二个（空）选项卡上单击添加按钮，则在带有日历的第一个选项卡上切换为"添加"事件，直到您直到您强迫日历通过某些动作重新粉刷它们，例如将视图从 Week 转换为月，或切换天数/周/月，然后返回。

我尝试了

$("#calendar").fullcalendar('refetchEvents');
$("#calendar").fullcalendar('rerenderEvents');

方法，这两个都无法解决问题。...有人可以告诉我我在这里做错了什么吗？还是根本不可能？

Answer 1

请参阅Adam Shaw的完整日历可选演示。它表明将通过选择日期添加新事件。

完整日历以此代码开头，其中包括选择事件。我使用ColdFusion，这就是我从数据库服务器中检索数据的方式：

        $myCalendar = $('#myCalendar').fullCalendar({
             header: {
             left: 'prev,next today',
             center: 'title',
             right: ''
             },
         theme: true,
         selectable: true,
         selectHelper: true,
         height: 500,
     events:'events.cfc?method=getevents',
         select: function(start, end, allDay) {
        alert('select function chosen');
        // set the dialog date to the date selected on the calendar
        // commented out the dates below when we changed to datetimepicker
   //           $('#eventStart').val(start);
   //           $('#eventEnd').val(end);
  //           added the info below to support the datetimepicker
        $('#eventStart').datetimepicker("setDate", new Date(start));
        $('#eventEnd').datetimepicker("setDate", new Date(end));
        //clear out the contents of the event title and the event id
        $('#eventTitle').val('');
        $('#ID').val('');
        //default the value of all day to halfday value 1, 
                     all day is valued at 2
        $('#eventallday').val(1);
        $('#calEventDialog').dialog('open');
    },...........

这是我用于选择功能的代码。这放在我的JS代码的底部。我参考您可能不使用的其他字段。

        var title = $('#eventTitle');
        var start = $('#eventStart');
        var end = $('#eventEnd');
        $('#calEventDialog').dialog({
           resizable: false,
           autoOpen: false,
           title: 'Add Event',
           width: 400,
        buttons: {
            Save: function() {
               if ($('input:radio[name=allday]:checked').val() == "1") {
                    eventClass = "gbcs-halfday-event";
                    color = "#9E6320";
                    end.val(start.val());
                }
              else {
                eventClass = "gbcs-allday-event";
                color = "#875DA8";
            }
            if (title.val() !== '') {
                $myCalendar.fullCalendar('renderEvent', {
                    title: title.val(),
                    start: start.val(),
                    end: end.val(),
                    allDay: true,
                    className: eventClass,
                    color: color
                }, true // make the event "stick"
                );
        $('calendar').fullCalendar('renderEvent', {
         title: ($("#eventTitle").val()),
                    start: ($("#eventStart").val()),
                    end:($("#eventEnd").val()),
        allDay: ($("#allday").val()),
                    color:($("background-Color").val())
                }, true // make the event "stick" 
                );
        $.ajax({
        url: 'events.cfc?method=add_events',
        data: 'title='+ ($("#eventTitle").val())+
                        '&start='+ ($("#eventStart").val()) +'
                         &end='+ ($("#eventEnd").val()) +
            '&id='+ 0 ,
            type: "POST",
         success: function(json) {
         alert('Updated Successfully');

            }
                 })
            }
            $myCalendar.fullCalendar('unselect');
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
      }
   });
 });// JavaScript Document

我希望这将您指向正确的方向。感谢您发布您的问题。您向我展示了如何使用标签！。