如何将FullCalendar(v5)引入Ember,js(v4)在组件中渲染？

我正在尝试将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、克：

// 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中还不存在吗？有人对我如何使这个基本示例发挥作用有什么建议吗？

我不认为你会想要一个组件——也许是一个修饰符——因为这是一种添加到元素中的行为？
例如，使用：https://github.com/ember-modifier/ember-modifier和这些文档：i1j 1k1l

// 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修饰符和@fullcalendar/core并重新启动开发服务器

如何将FullCalendar(v5)引入Ember,js(v4)在组件中渲染？

内联工程

但如何重构为组件？

1条答案

相关问题

热门标签

最新问答