更新事件後，阿賈克斯後

Question

我想更新ajax後更改事件的標題，並給它一個類，所以我可以改變它的顏色後的事件。我還想告訴我的JSON源中的事件是否被批准，如果是，則更改其顏色。我評論過我的代碼如下：

更新過的代碼：

$(document).ready(function() { 

var liveDate = new Date(); 
var date = new Date(); 
var d = date.getDate(); 
var m = date.getMonth(); 
var y = date.getFullYear(); 






var calendar = $('#calendar').fullCalendar({ 
    disableDragging: true, 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'year' 
    }, 


    eventClick: function (calEvent, jsEvent, view, eventid) { 

     var eventid = calEvent.id; 
     var start = calEvent.start; 
     var end = calEvent.end; 
     var fullname = calEvent.fullname; 


     var fancyContent = ('<div class="header">approve booking for ' + eventid + calEvent.title + '<a href="#" class="approve" id="' + eventid + '">yes</a><a href="#" class="approve">no</a></div>'); 
     $.fancybox({ 
      content: fancyContent 
     }); 

     var getid = $('.approve').attr('id'); 

     // approve function 

     $('.approve').click(function (calEvent, jsEvent, view, getid) { 
      var getid = $('.approve').attr('id'); 


      if ($(this).html() == "yes") { 

       // AJAX post to insert into DB 

       $.post("ajax.php", { 
        action: 'approve', 
        eventid: getid, 
        color: 'green' 
       }, 

       function (data) { 
        var fancyContent = ('<div class="header"><p>' + data.msge + '</p></div>'); 
        $.fancybox({ 
         content: fancyContent 
        }); 
       }, "json"); 

       // attemping to add class to event to change color, this does not work 

       $('#calendar').fullCalendar('clientEvents', calEvent).addClass('fc-event-updated'); 


       // trying to get id from last updated event so I can change it but this also does not work 

       var eventObject = $('#calendar').fullCalendar('clientEvents', eventid); 

       if (eventObject != null) { 
        eventObject.title = fullname + ' approved'; 
        eventObject.color = 'green'; 


        $('#calendar').fullCalendar('updateEvent', eventObject); 
       } 


      } else { 
       // close fancybox 

       $.fancybox.close(); 

      } // end of if 

     }); // end of approve click 


    }, 

    selectable: true, 
    selectHelper: true, 
    select: function (start, end, allDay, approved, title) { 


     // disable booking dates in the past 

     if (liveDate > start) { 
      var fancyContent = ('<div class="header">Canot book dates in the past</div>'); 
      $.fancybox({ 
       content: fancyContent 
      }); 

      return false; 

     } else { 

      // get user to confirm selection 

      var fancyContent = ('<div class="header">Book the following days off</div>Start Time: </b></label>' + $.fullCalendar.formatDate(start, "yyyy-MM-dd") + '<br>' + '<label><b>End Time: </b></label>' + $.fullCalendar.formatDate(end, "yyyy-MM-dd") + '<br>' + '<label><a href="#" class="button">yes</a><a class="button" href="#">no</a></div>'); 
      $.fancybox({ 
       content: fancyContent 
      }); 


      $('.button').click(function() { 

       if ($(this).html() == "yes") { 

        // ajax to insert into DB 

        $.post("ajax.php", { 
         start: $.fullCalendar.formatDate(start, "yyyy-MM-dd"), 
         end: $.fullCalendar.formatDate(end, "yyyy-MM-dd"), 
         action: 'add', 
         userid: userid 
        }, 

        function (data) { 

         // render event an insert id generated from query 

         calendar.fullCalendar('renderEvent', { 
          id: data, 
          title: fullname + 'pending approval', 
          start: start, 
          end: end, 
          className: 'unapproved' 
         }, 

         false // make the event "stick"  

         ); 


        }, "json"); 

        // close fancybox 

        $.fancybox.close(); 


       } else { 
        // close fancybox 

        $.fancybox.close(); 

       } // end of if 

      }); 


      //if ajax post successful then show booking on page - not sure how to get value from previous fancybox 

     } // end liveDate > start else 

     calendar.fullCalendar('unselect'); 
    }, 
    editable: true, 


    eventSources: [ 

    // event sources from json 

    { 
     url: 'json-events.php', 
     type: 'POST', 
     error: function (data) { 
      alert('there was an error while fetching events!' + data.msge); 
     }, 


    // if event is approved = 1 then change color and title of event. This does not work 

     success: function (data) { 
      var event = data.approved; 

      if (data.approved == "1") { 

       var title = title + "approved"; 
       var className = "approved"; 

      } else { 

       var title = title + "awaiting approval"; 

       var className = "unapproved"; 

      } 
     } 

    } 



    ] 



}); 

}); 

Answer 1

我從日曆中刪除過時的事件和信息更新後重新創建它解決了這一點。

注意：只要確保爲每個事件分配一個唯一的ID，以避免不必要的行爲。

下面是一個例子：

$('#calendar').fullCalendar('removeEvents', [5]); 

$('#calendar').fullCalendar('renderEvent', { 
    id: 5, 
    title: 'Some Title', 
    start: '2013-03-30', 
    end: '2013-03-30', 
    className: 'fancy-color' 
}, true); 

Answer 2

你要了解正確改變給定事件的款式/外觀。

對於fullCalendar，正確的代碼流是這樣的：

1. AJAX GET /更新/創建事件怎麼過請你（即通過點擊，或eventSources選項）。
2. 利用eventClick回調來處理點擊事件（如你的例子）。
3. 通過fullCalendar（'clientEvents'，your_event）查找原始事件（如您的示例）。
4. 使用來自ajax請求的新數據（或通過硬編碼變量，如下面的簡單示例）擴展原始事件。
5. 通過fullCalendar（'updateEvent'，your_event）通知您的更新事件的fullCalendar。通過這樣做，fullCalendar會在內部更新事件，然後將事件（以及其他事件的放置）重新放回日曆。
6. 利用eventRender fullCalendar回調函數確定哪些事件在渲染時獲取哪些樣式/ css類。

您最初的示例沒有起作用的原因是因爲每次嘗試向事件添加類時，完整的日曆都不會被通知有關更新（fullCalendar不會在所有對象上創建綁定/監視屬性/類/等動態的每一個事件和響應...這將是一個有點荒謬/記憶浪費）。這是fullCalendar（'updateEvent'，your_event）有用的地方。此外，您必須利用回調函數來首先添加類，因爲每次發生事件刷新/重新呈現時，實際事件元素本身與都不相同，但是fullCalendar存儲的事件對象爲您的活動與相同。因此，您可以通過eventRender回調來確定發生重投時發生的重新申請的類別/樣式。

這裏是一個超級簡單的例子：

var cal = $("#calendar"); 
cal.fullCalendar({ 
    eventClick: function(event){ 
    // you can do an ajax request here if you want, which is what 
    // you might do if you are trying to lazy-load event information 
    // as a performance optimization upon initiliation of the calendar, 
    // but for simplicities sake, I'm just hard coding it. 
    event.loading = true; 
    event.site = "internal"; 
    event.category_list = [{name:"Fun Event Tag", bgc:"red"}, 
          {name:"Crappy Event Tag", bgc:"black"}]; 
    // Calling updateEvent updates the original event with the data you just 
    // set above, and then rerenders it to the calendar, and your eventRender 
    // callback is called: 
    cal.fullCalendar('updateEvent', event); 
    }, 
    eventRender: function(event, element) { 
    // event.site and event.loading are simply supplemental data 
    // that I've added to the original full calendar event object(s) 
    if(event.site == 'internal' && event.loading){ 
     element.addClass("loading"); 
     element.find(".fc-content").prepend("<i class='spinner-dark'>"); 
    } 

    if(event.id == panel_showing_event_id){ 
     element.addClass("showing"); 
    } 

    // event.category_list is an array that I have also attached 
    // to the original event object(s), to show that supplemental arrays/objects 
    // that are set on the original event object(s) persist as well 
    if(event.category_list && !!event.category_list.length){ 
     for(i = 0; i < event.category_list.length; i++){ 
     var tag = event.category_list[i]; 
     element.css("background-color", tag.bgc); 
     } 
    }else{ 
     element.css("background-color", ""); 
    } 
    } 

讓我知道如果你需要完整的解釋，但這應該讓你回到正軌。