Question

我有点迷失在适当的位置，使用完整日历文档制作这个，并需要一些小提琴指出我正确的方式。当我的日历加载事件时，在它们显示在日历上之前，我需要在wordpress db中进行ajax调用，该数据应返回帖子的日期。每个帖子都是日历上的活动。根据数据库的响应，如果发布日期是未来时间而不是当前时间，那么日历应该以特定颜色显示此事件，如果它是过去或当前时间，则它应该是另一种不同的特定颜色。

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

有Full Calendar经验的人可以指出我在完整日历文档中如何完成这个例子的小提琴？

这是我到目前为止的代码。我希望使用日历refetchEvents保持循环，并能够从WordPress网站的帖子中获取背景数据中的ajax，以便在下一个refetchEvents触发器上使用它等等。

$(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: 'mywebsite.com_l84tadr5fulc7j0628g3g6oj3k@group.calendar.google.com'
  },
  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;
},

Color Demo

检查事件是否存在

如果数据库返回false，您没有确切地提到要做什么，但我假设您不希望呈现不存在的事件。

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

因此我们将使用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 (using fake ajax calls)

一些解释

可能有用的一些事情：

fullcalendar中的单词render指的是实际显示事件。只要视图发生变化（比从数据库中提取事件的频率更高），它就会完成。
事件源仅在需要时获取事件。它们作为可以根据需要呈现的数据存储在客户端。
eventDataTransform被调用一次。

因此，如果您将ajax调用放在eventAfterAllRender中，则每次FC决定渲染日历时都会执行ajax调用，从而导致需要更多的ajax调用。这也意味着每次更改视图时都会出现延迟。比渲染时间早做它要好得多。

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

1 个答案:

更改颜色：

检查事件是否存在

一些解释