0

我正在填充一个 FullCalendar.io 实例并从我网站上的 Wordpress REST API 中提取数据来执行此操作。

我能够执行 XHR 请求并在数组myData中返回相关数据。

事件添加如下：

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl,
      {
        initialView: 'dayGridMonth',
        events: [
           {
             title: 'Event Title2',
             start: $start,
             end: '2021-04-08T13:13:55-0400',
           }
         ],
      });
      calendar.render();
      }
    });

这是在标题中的脚本标记中，并被呈现到页面到 div #calendar。

$start 在使用时被正确插值和渲染let $start = myData[0].acf.start;

但是，我想遍历myData并返回一个对象，我可以控制日志，但无法输入下面的选项events:


        function myFunction(element) {
        let x = element.acf.start;
        let y = element.acf.end;
        let title1 = element.title.rendered;
        var event = {title: title1, start: y, end: x};
      
        //return event;

我尝试将格式正确的 javascript 对象放入events:数组中，但它不起作用。也没有尝试调用 myFunction()。

我遇到了诸如 $start 未定义之类的错误，因此我尝试将其移至下方以使其全局可用（通过在函数定义之前调用它）。

我希望在日历的事件选项中正确呈现每个事件的对象。

如何将我的所有事件都放入日历中，而不仅仅是最新的事件，例如，而不是 myData[0].acf.start，能够访问 myData 数组中每个项目的 .acf.start 并将其返回给事件大批？

非常感谢您的帮助

4

1 回答 1

0

阅读 fullCalendar 的事件作为函数文章。这使您能够定义可重用的回调函数来获取事件。因此，在该回调中，您可以运行 AJAX 请求、获取事件、将它们转换为 fullCalendar 格式并通过提供的“成功”回调函数将它们传递给日历。

每次日历中的日期范围更改时，FullCalendar 都会重新运行此操作，因此您应确保服务器端代码仅返回与 fullCalendar 提供的日期匹配的事件。

像这样的东西：

  document.addEventListener('DOMContentLoaded', function() {

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl,
    {
      initialView: 'dayGridMonth',
      events: function(info, successCallback, failureCallback) {
        let url = 'https://svc.local/wp-json/wp/v2/event?' + new URLSearchParams({
          start: info.startStr,
          end: info.endStr
        });

        fetch(url)
        .then(function(response) {
          return response.json();
        })
        .then(function(jsonResponse) {
          // do something with jsonResponse
          console.log(jsonResponse);
          var events = [];

          jsonResponse.forEach(function(el) {
            var event = {
              start: el.acf.start,
              end: el.acf.end,
              title: el.title.rendered
            };
            events.push(event);
          });
        
          successCallback(events);
        })
        .catch(function(err) {
          failureCallback(err);
        });
      }
    });

    calendar.render();
});
于 2021-04-12T08:39:05.613 回答