如何将 FullCalendar(v5) 带入 Ember.js(v4) 以在组件内呈现？

Question

我正在尝试将 FullCalendar (v5) 与 Ember.JS (4.2) 应用程序集成，如果我只是通过 CDN 导入库并内联/硬编码，我就能让事情正常进行 - - 但是，如果我尝试将其分解为一个组件，则会得到一个空白页面。

内联作品

如果我通过 CDN 链接导入 FullCalendar 并在页面加载时将其绑定一个 ID 为“calendar”的 html 元素，我将能够呈现日历和示例事件，如下所示：

<!-- Filename: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Client</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    {{content-for "head"}}
    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
    <!-- TODO: Replace with npm/yarn package initiated within app config -->
    <link
      href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.css"
      rel="stylesheet"
    />

    {{content-for "head-footer"}}
  </head>
  <body>
    
    <!-- TODO: Move into component -->
    <div id="calendar"></div>

    {{content-for "body"}}

    <!-- TODO: Remove once replacing import via npm/yarn package -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.js"></script>
    <!-- TODO: Move into component -->
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
              headerToolbar: {
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay'
              },
          events: [
            {
              title: 'Kayak Tour',
              start: '2022-03-09T14:30:00',
              end: '2022-03-09T19:30:00',
            },
          ],
        });

        calendar.render();
      });
    </script>
    {{content-for "body-footer"}}
  </body>
</html>

但是如何重构为组件？

但是，我似乎无法通过 Ember 文档理解解决方案，如果我尝试在组件内设置日历（请参阅上面的 TODO），我只会得到一个空白页面并且无法显示日历。

例如，如果我将 <div id="calendar"></div> 移动到组件中：event-calendar.hbs:

<!-- Filename: components/event-calendar.hbs -->
<div id="calendar"></div>

但我不确定在它的关联数据文件中，我如何像在上面的索引示例中那样绑定到 div？ E,g:

// Filname: components/event-calendar.js
import Component from '@glimmer/component';

export default class EventCalendarComponent extends Component {
      // how do I bind to `#calendar` like I did in the index file above?
}

我什至尝试将 JS 保留在 index.html 中，并将 div 移动到我的组件中，但它似乎没有呈现。

理想情况下，在我的主要视图中，我想将我的日历作为一个组件注入如下（然后传入一个事件对象）：

<!-- Filename: templates/index.hbs -->
{{page-title 'Home'}}
<div>
  <EventCalendar />
</div>
{{outlet}}

我怀疑 <div id="calendar"></div> 不存在于 DOM 中？有没有人对我如何使这个基本示例起作用有任何建议？

Answer 1

我认为您不需要组件——也许是修饰符——因为这是专门添加到元素的行为？

例如，使用：https://github.com/ember-modifier/ember-modifier and these docs: https://fullcalendar.io/docs/initialize-es6

// app/modifiers/calendar.js
import { modifier } from 'ember-modifier';
import { Calendar } from '@fullcalendar/core';

export default modifier((element, [overrideOptions]) => {
  let calendar = new Calendar(element, {
    initialView: 'dayGridMonth',
    ...overrideOptions,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay',
      ...(overrideOptions.headerToolbar || {})
    },
    events: overrideOptions.events
      ? overrideOptions.events
      : [{
          title: 'Kayak Tour',
          start: '2022-03-09T14:30:00',
          end: '2022-03-09T19:30:00',
        }],

  });

  calendar.render();

  return () => {
    // if the calendar has a teardown function, you'd want to call that here
  }
}

然后您可以在应用中的任何位置执行以下操作：

<div {{calendar}}></div>

或

{{!-- defining assumed to exist on whichever 'this' is--}}
<div {{calendar this.calendarOptions}}></div>

一定要安装ember-modifier和@fullcalendar/core并重启你的开发服务器

如何将 FullCalendar(v5) 带入 Ember.js(v4) 以在组件内呈现？

How do I bring FullCalendar(v5) into Ember.js(v4) to render within a component?

javascript

ember.js

fullcalendar-5

内联作品

但是如何重构为组件？