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

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

javascript jquery ajax calendar fullcalendar

Javascript 在事件呈现在日历上之前，完整日历触发ajax调用,javascript,jquery,ajax,calendar,fullcalendar,Javascript,Jquery,Ajax,Calendar,Fullcalendar,我有点不知所措，哪里是制作完整日历文档的合适地方，需要一些小提琴来指引我正确的方向。当我的日历加载事件时，在它们显示在日历上之前，我需要对wordpress数据库进行ajax调用，该数据库应该返回帖子的日期。每个帖子都是日历上的一个事件。根据数据库的响应，如果发布日期比当前时间晚，则日历应以特定颜色显示此事件，如果是过去时间或当前时间，则应为另一种不同的特定颜色因此，基本上，在每个事件呈现在日历上之前，我需要为每个事件触发ajax调用，并评估返回的数据，以便为过去/当前事件和未来事件应用正确的

我有点不知所措，哪里是制作完整日历文档的合适地方，需要一些小提琴来指引我正确的方向。当我的日历加载事件时，在它们显示在日历上之前，我需要对wordpress数据库进行ajax调用，该数据库应该返回帖子的日期。每个帖子都是日历上的一个事件。根据数据库的响应，如果发布日期比当前时间晚，则日历应以特定颜色显示此事件，如果是过去时间或当前时间，则应为另一种不同的特定颜色

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

有经验的人可以给我举个例子，在完整的日历文档中是如何做到这一点的

这就是我到目前为止所使用的代码。我希望与日历refetchEvents保持联系，并能够使用ajax从WordPress网站的帖子中获取背景数据，以便在下一个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();
});

$（函数（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
var webData=null；//数组（）数据
$（“#日历持有者”）.fullCalendar({
eventRender:函数（事件、元素、webData）{
var dataHoje=新日期（）；
/*
在eventAfterAllRender回调选项上使用ajax获取的webData数据
在此条件语句中，在事件框上绘制
颜色和文本值取决于返回的帖子的状态和日期。
*/
if（event.startdataHoje）{
css（'background-color'，'#FFB347'）；
元素。查找（'.fc事件内部'）。追加（'ON AIR'）；
}else if（event.startdataHoje&&event.end>dataHoje）{
css（'background-color'，'#AEC6CF'）；
元素。查找（'.fc事件内部'）。追加（'Schedued'）；
}
},
eventAfterAllRender:函数（）{
webData='（我认为应该在这里调用AJAX访问网站帖子）；
console.log（webData）；
},
eventColor:“#378006”，
完成：函数（）{
},
defaultView:'basicDay'，
googleCalendarApiKey:“Aizasycteqzsfsy41kj1av5fftgx9kdfkhkh”，
活动：{
googleCalendarId:'mywebsite.com_l84tadr5fulc7j0628g3g6oj3k@group.calendar.google.com'
},
标题：{
左：“上一个，下一个”，
中心：'标题'，
右图：“基本日、基本周、基本月”
},
懒散的人：是的，
时间格式：{
议程：//5:00-6:30
'''h:mmt'//7p
},
周数：假，
朗:"嗯",，
事件来源：[
{
url:Routing.generate（'fullcalendar_loader'），
键入：“POST”，
数据：{
},
错误：函数（）{
}
}
]
});
});
var刷新率；
函数重载时间（）{
刷新率=设置超时（重新加载页面，5000）；
}
函数重载页面（）{
$（“#日历持有人”）。完整日历（“参考事件”）；
重新加载时间（）；
}
$（文档）.ready（函数（）{
重新加载时间（）；
});

更改颜色：你做这件事的方法很有效，但最简单的方法是用你自己的方式去做。像这样：

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

检查事件是否存在您没有明确提到如果数据库返回false该怎么办，但我假设您不希望呈现不存在的事件

因为你的活动来源是谷歌日历，这实际上有点棘手。通常，您将使用定制并在其中执行两个ajax调用（一个用于事件，另一个用于检查它们是否有效）。但是你不能用google 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
}

一些解释了解一些可能有用的事情：

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

因此，如果将ajax调用放入

eventAfterAllRender

，则每次FC决定渲染日历时都会执行ajax调用，从而产生更多必要的ajax调用。这也意味着每次更改视图时都会有延迟。最好在渲染时间之前执行此操作。