Question

我正在尝试动态更新我的日历（fullcalendar.js），但是当日历不可见时，它不会重新呈现事件。我也在我的网络应用程序中使用javascript选项卡，因此“不可见”我的意思是它位于不同的选项卡上。我已经设置了一个jsfiddle来演示这种行为：

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

如果您在包含日历的标签上点击添加按钮，则会添加事件并立即显示。

但是，如果您在第二个（空）标签上点击添加按钮，然后切换回带有日历的第一个标签，那么“添加”事件就不存在了强制日历通过某些操作重新绘制它们，例如将视图从周切换到月，或切换天/周/月，然后返回。

我试过了

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

方法，这些都没有解决问题....谁能告诉我我在这里做错了什么？或者这根本不可能？

Answer 1

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

完整日历以此代码开头，其中包含select事件。我使用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');
    },...........

这是我用于select函数的代码。这是放在我的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

我希望这能指出你正确的方向。感谢您发布您的问题。你告诉我如何使用标签！。

当日历不可见时，Fullcalendar不会重新呈现事件

1 个答案: