有没有一种方法可以清空我的对象以使 new Dates() 能够插入到我的日历中？

Question

我正在努力做到这一点，以便当我的程序从假期 API 接收到新的 JSON 数据时，它可以用新的 API 替换旧数据数据.

我一开始尝试将数组声明为空，但这没有用。如果数组 > 1，我也尝试清空数组，但这也不起作用。

我的代码：

// Declares an empty array
        var eventsArr = [];
        
        console.log(eventsArr);
        
        // Pushes the API data to an object
        for(i = 0; i < result['data']['holidays'].length; i++){
          let date = result['data']['holidays'][i]['date']['iso'];
          eventsArr.push({
              "startDate": new Date(date),
              "endDate"  : new Date(date),
              "summary"  : result['data']['holidays'][i]['description']
          });
        }
        
        // Uses the pushed data to add the dates to the calendar
        $("#calendar").simpleCalendar({       
          // Events displayed
          displayEvent:true,
          // Dates of the events                  
          events: eventsArr
        });

Answer 1

我写了一个您可以尝试的片段：它会在随机事件发生时初始化日历，并且每次您单击“重新加载”时都会刷新 3 个随机元素。您可以跳过“API 的模拟”部分，因为它只是为了让我的代码片段每次都能处理新数据。

基本上，您需要做的是使用一个函数来获取事件并将它们包含在日历中。然后可以在每次需要时调用此函数，而不是在打开页面时只获取一次事件。

获取事件后，此函数清空日历并将新数据放入日历中。

最后，来自很久以前的 jQuery 世界，我强烈建议迁移到 VueJS，因为您将更轻松地构建更复杂的应用程序。

/*
  Mocking of your API
*/
  // to wait a bit
  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

  // to create random dates
  function randomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
  }

  // to build an event
  function mockEvent() {
    const date = randomDate(new Date(2021, 9, 1), new Date(2021, 9, 31));
    return {
      startDate: date,
      endDate: date,
      summary: `EVENT ${Math.floor(100*Math.random())}`,
    }
  }

  // to call the API
  async function mockAPI() {
    console.log('API call');
    await sleep(3000);
    return Array.from({length: 3}, (x) => mockEvent());
  }

/*
  Function to execute when you want to
  initialize your calendar
*/
const initializeCalendar = async () => {
  console.log('Calendar initialization');
  /*
    Here you call your API
  */
  const events = await mockAPI();
  console.log('Calendar filling');
  let container = $("#calendar");
  container.empty().data('plugin_simpleCalendar', null).simpleCalendar({
    displayEvent: true,
    events: events
  });
}

// when you want to fetch elements
async function reload() {
  console.log('Reloading');
  await initializeCalendar();
}

/*
  to properly initialize the calendar
*/
$(document).ready(function() {
  console.log('FIRST INIT');
  initializeCalendar();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.jqueryscript.net/demo/animated-event-calendar/dist/simple-calendar.css" rel="stylesheet"/>
<script src="https://www.jqueryscript.net/demo/animated-event-calendar/dist/jquery.simple-calendar.js"></script>

<button onclick="reload()">
  Reload
</button>
<div id="calendar"></div>

有没有一种方法可以清空我的对象以使 new Dates() 能够插入到我的日历中？

Is there a way I can empty my object to make new Dates() able to be inserted onto my calendar?

javascript

arrays

jquery

calendar

object