完整日历不会显示取自 AJAX 的事件

Question

我需要使用 AJAX 从数据库中获取一些事件并将它们显示在我的完整日历中。问题是我的 JSON 提要没有 start 和 end，但所有日期都由 , 分隔（例如：15-06-2020,16-06-2020）我希望使用 @987654327 @ 并从那里设置值但无法使其工作。这是我尝试过的

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

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['dayGrid'],
    editable: true,
    firstDay: 1,
    eventLimit: true,
    events: function(start, end, callback) {

      $.ajax({
        type: "GET",
        url: "http://localhost:8092/api/leavecal/getleavesbyemp/200027502420",
        dataType: "json",
        success: function(data) {

          var eventsList = [];
          var count = 0;
          while (count < data.length) {

            var dateArray = data[count].date.split(',');
            var startDate = dateArray[0];
            var endDate = dateArray[dateArray.length - 1];

            eventsList.push({
              start: startDate,
              end: endDate
            });

            console.log(startDate + " " + endDate);
            count++

          }
          callback(eventsList);

        }
      });

    }

  });

  calendar.render();
});

<div id="calendar"></div>

我不知道从这里去哪里

Answer 1

假设：

• 由于问题没有指定版本，我假设是最新的稳定版本，4.4
• 我还将提供日期数组

为了一切正常，您需要更改日期格式，除非您change the locale

如果您将日期作为字符串 15-06-2020,16-06-2020，只需从中创建一个简单的数组并使用下面的代码

function convertToObjects(str) {
    // str = "15-06-2020,16-06-2020"
    return str.split(',').map(function(elm) { return { date: elm }; })
}

事件签名在您的代码中不正确，它应该是，正如 @ADyson 指出的 the docs show 为 (info, successCallback, failureCallback) 您将事件数组传递到 successCallback([]) 或任何错误进入failureCallback(new Error('Not good!')) 和info 是您可以获取请求的数据范围的地方。

function getAllEvents(info, successCallback, failureCallback) {
  const data = [
    { date: '15-06-2020' },
    { date: '16-06-2020' }
  ];
  // const data = convertToObjects(<your string of dates>);
  successCallback(processData(data));
}

function processData (arr) {
  // [{date;'15-06-2020'},{date:'16-06-2020'}]
  const eventsList = [];

  arr.forEach(function(entry, i) {
    // 15-06-2020 -> 2020-06-15
    const dt = entry.date;
    const formattedDate = `${dt.substr(6,4)}-${dt.substr(3,2)}-${dt.substr(0,2)}`;
    eventsList.push({
      id: `evt-${i+1}`,
      start: formattedDate,
      end: formattedDate,
      title: `Event #${i+1}`
    });
  });

  return eventsList;
}

document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['dayGrid'],
    editable: true,
    firstDay: 1,
    eventLimit: true,
    events: getAllEvents,
  });

  calendar.render();
});

<!-- CSS -->
<link href="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css" rel="stylesheet"/>

<!-- JS -->
<script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.js"></script>


<div id="calendar"></div>

首先在https://codepen.io/balexandre/pen/NWxRGGd?editors=1010上起草的答案