在日历上呈现事件之前，完整日历触发ajax调用

Question

我有点不知道用Full Calendar文档做这件事的合适地方在哪里，需要一些技巧来引导我找到正确的方法。当我的日历加载事件时，在它们出现在日历上之前，我需要对wordpress数据库进行ajax调用，该数据库应该返回发布日期。每个帖子都是日历上的一个事件。根据数据库的响应，如果发布日期在未来时间而不是当前时间，则日历应以特定颜色显示此事件，如果是过去或当前时间，应为另一种不同的特定颜色。

因此，基本上，在日历上呈现每个事件之前，我需要为每个事件触发一个ajax调用，并评估返回的数据，以便为过去/当前事件和未来事件应用正确的颜色。

熟悉完整日历的人可以给我举个例子，说明如何在完整日历文档中做到这一点？

这是我迄今为止使用的代码。我希望与日历refetchEvents保持联系，并能够在后台使用ajax从WordPress网站的帖子中获取数据，以便在下一个refetchEvent触发器中使用它，等等

$(function () {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  var webData = null; //array() data
  $('#calendar-holder').fullCalendar({
    eventRender: function(event, element, webData) {
      var dataHoje = new Date();
      /*
        Use webData data taken with ajax on eventAfterAllRender callback option
        inside this conditional statements to draw on the event box
        colors and text values depending on the status and date of the post returned.
      */
      if (event.start < dataHoje && event.end > dataHoje) {
            element.css('background-color', '#FFB347');
            element.find('.fc-event-inner').append('<span class="fc-event-status">ON AIR</span>');
        } else if (event.start < dataHoje && event.end < dataHoje) {
            element.css('background-color', '#77DD77');
            element.find('.fc-event-inner').append('<span class="fc-event-status">Published</span>');
        } else if (event.start > dataHoje && event.end > dataHoje) {
            element.css('background-color', '#AEC6CF');
            element.find('.fc-event-inner').append('<span class="fc-event-status">Schedued</span>');
        }
    },
    eventAfterAllRender: function () {
        webData = '(AJAX CALL TO WEBSITE POSTS I THINK SHOULD GO HERE)';
        console.log(webData);
    },
    eventColor: '#378006',
    complete: function() {
    },
    defaultView: 'basicDay',
    googleCalendarApiKey: 'AIzaSyCtEQZsFtsY41kJ1Av5FftgX9kdfkHKH',
    events: {
      googleCalendarId: '[e-mail]'
  },
  header: {
      left: 'prev, next',
      center: 'title',
      right: 'basicDay, basicWeek, month, '
  },
  lazyFetching: true,
  timeFormat: {
            agenda: 'h:mmt',    // 5:00 - 6:30
            '': 'h:mmt'         // 7p
        },
        weekNumbers: false,
        lang: 'en',
        eventSources: [
        {
          url: Routing.generate('fullcalendar_loader'),
          type: 'POST',
                data: {
                },
                error: function() {
               }
           }
           ]
       });

});
var refreshRate;
function reloadTime() {
  refreshRate = setTimeout(reloadPage, 5000);
}
function reloadPage() {
  $("#calendar-holder").fullCalendar("refetchEvents");
  reloadTime();
}
$( document ).ready(function() {
  reloadTime();
});

Answer 1

更改颜色：

您的方法是有效的，但最简单的方法是在eventDataTransform中执行。像这样：

eventDataTransform: function(eventData){
    if(eventData.end.isBefore(moment())){            
        eventData.color = "black";
    }else{
        eventData.color = "green";
    }
    return eventData;
},

彩色演示

检查事件是否存在

您没有提到如果数据库返回false该怎么办，但我认为您不希望呈现不存在的事件。

由于你的活动来源是谷歌日历，这实际上有点棘手。通常，您会使用自定义事件函数并在其中执行两个ajax调用（一个用于事件，另一个用于检查它们是否有效）。但你不能用谷歌cal事件做到这一点。

因此，我们将使用eventDataTransform，并且仅在我们知道事件存在之后才显示它们。

eventDataTransform: function(eventData){
    eventData.display = false; //Don't display until we check the server
    eventData._uid = idCounter++; //unique ID. Don't need this if they already have unique IDs
    ajaxCall(eventData); //check the server (will retroactively update the event to be displayed)
    
    if(eventData.start.isBefore(moment())){ /*...*/ } //colors
    return eventData;
},

eventRender回调的顶部应该如下所示：

eventRender: function(event,element){
    if(!event.display){ //Render only if the event exists
        return false; //return false to stop the event from rendering.
    }
    /*...your other render code if you have any*/
}

在fullcalendar之外定义ajaxCall函数：

var ajaxCall = function(eventData){
    $.get( "ajax/test.html", function( data ) {
        setEvent(eventData._uid,data); //data should be a boolean
    });
};
var setEvent = function(id,exists){
    var fcEvent = $('#calendar').fullCalendar("clientEvents",function(event){ //get the associated event object
        if(event._uid === id){
            return true;
        }
    })[0];
    if(typeof fcEvent !== "object")$.error("Event id "+id+" doesn't exist!"); //Throw error if it doesn't exist
    
    fcEvent.display = exists; // Store the server response in the event
    $('#calendar-holder').fullCalendar("updateEvent",fcEvent); // Updates and re-renders the event
}

JSFiddle Demo（使用假ajax调用）

一些解释

一些可能有用的信息：

• fullcalendar中的单词render指的是实际显示事件。每当视图发生更改时都会执行此操作（比从DB获取事件更频繁）
• 事件源仅在需要时获取事件。它们作为数据存储在客户端，可以根据需要进行渲染
• eventDataTransform在事件源检索到事件后被调用一次

因此，如果您将ajax调用放在eventAfterAllRender中，那么每当FC决定渲染日历时，就会进行ajax调用，从而产生更多必要的ajax调用。这也意味着每次更改视图时都会出现延迟。早于渲染时间执行要好得多。