如何将FullCalendar(v5)引入Ember.js(v4)以在组件中呈现？
我正在尝试将FullCalendar (v5)集成到Ember.JS (4.2)应用程序中，如果我只是通过CDN导入库并对其进行内联/硬编码--但是如果我试图将它分解成一个组件，我就可以得到一个空页面。
内联工程
如果我通过CDN链接导入FullCalendar，并在页面加载时将其绑定为一个带有“日历”id的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 docs理解一个解决方案，那就是，如果我尝试在组件中设置日历(请参阅上面的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移动到我的组件中，这似乎没有呈现。
理想情况下，在我的主要视图中，我希望将我的日历作为一个组件注入，如下所示(稍后传入一个events对象)：
<!-- Filename: templates/index.hbs -->
{{page-title 'Home'}}
<div>
<EventCalendar />
</div>
{{outlet}}我怀疑DOM中还不存在<div id="calendar"></div>？有没有人建议我如何让这个基本的例子起作用？
回答 1
Stack Overflow用户
发布于 2022-03-10 15:39:36
我不认为你想要一个组件--也许是一个修饰符--因为这是一种特殊的添加元素的行为吗？
例如，使用：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>请确保安装成员修饰符和@全职日历/核心，并重新启动dev服务器。
https://stackoverflow.com/questions/71419105
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号