如何将 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？ 例如：

// 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和这些文档： 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) 以在组件内呈现？

问题描述

内联作品

但是如何重构为组件呢？

1 个解决方案

解决方案1
2 已采纳 2022-03-10 15:39:36

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

问题描述

内联作品

但是如何重构为组件呢？

1 个解决方案

解决方案1 2 已采纳 2022-03-10 15:39:36

解决方案1
2 已采纳 2022-03-10 15:39:36