如何將 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