如何从另一个脚本标签更新渲染 javascript？

Question

我有以下代码，它使用 FullCalendar 并呈现日历：

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          events: [
             {
                title: "Test",
                startTime: "12:00:00",
                endTime: "13:00:00",
                startRecur: "2022-03-02",
                endRecur: "2022-03-02",
             },
          ],
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>

    <script>
        const events = [
             {
                title: "Test 2",
                startTime: "10:00:00",
                endTime: "11:00:00",
                startRecur: "2022-03-03",
                endRecur: "2022-03-03",
             },
          ];
        document.getElementById('calendar').fullCalendar('updateEvents', events);
    </script>

  </body>
</html>

使用第二个脚本标签，我尝试更新事件。这将稍后在单独的函数中触发。该脚本没有更新事件。我以某种方式理解，HTMLElement 没有属性 fullCalendar，但我不明白，我还需要做什么。我需要做什么才能使用 vanilla JavaScript 更新事件？

Answer 1

您的尝试存在一些问题：

document.getElementById('calendar') 是尝试更新日历时的错误目标。这将获得 HTML DOM 元素，其中包含用于呈现日历的 HTML 。但这与在代码中表示日历并包含其所有方法调用、属性等的 fullCalendar JavaScript 对象不同。日历的模型对象及其 HTML 表示是两个独立的事物。
.fullCalendar(... 也不正确。这是 fullCalendar v3 及以下版本的遗留语法，当它被实现为 jQuery 插件时。（我想也许您在网上找到了一个旧示例，但没有对照当前文档进行检查。）
在 v5 中，fullCalendar 的 v3 中没有直接等效的 'updateEvents' 方法。由于您使用的是静态事件数组而不是动态事件源，因此要“更新”它们，您需要 get all the events or get the specific event you're interested in, and on each event which you want to alter you then must set the necessary properties as per your requirements. Or you could remove the event and add a brand new one. But instead of all that it would probably be a lot easier to use an event source 代替，然后您可以 add/remove/refresh 动态（因此能够改变它的所有事件一次）。
calendar 变量在您的代码中包含通过执行 new FullCalendar.Calendar 生成的 fullCalendar 对象，并且您需要将其作为您的目标，它只是 in scope 在声明它的 DOMContentLoaded 回调中。您显示的第二个 <script> 块中的代码会在页面加载时立即运行显示，因此目前这会在日历创建之前发生.目前还不清楚你什么时候真正想要这个运行（因为立即替换你初始化日历的所有事件似乎有点毫无意义），所以我会把它留给你来填补空白。但是您可以通过简单地在 document.addEventListener('DOMContentLoaded', function() { 行的之前声明 var calendar; ，然后编写 calendar = new FullCalendar.Calendar(calendarEl, { (即其中没有 var。

如何从另一个脚本标签更新渲染 javascript？

How to update a rendered javascrtipt from another script tag?

javascript

fullcalendar

fullcalendar-5