Fullcalendar.io CSS在rails 6应用程序中不起作用

Question

我正在用6.0.2版本的rails构建RoR应用程序。我需要为我的项目使用Fullcalendar.io：

到目前为止：

yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/list

在我的application.js文件中：

window.Calendar = require("@fullcalendar/core").Calendar;
window.dayGridPlugin = require("@fullcalendar/daygrid").default;
window.listPlugin = require("@fullcalendar/list").default;

在我的pages.scss文件中：

@import '@fullcalendar/core/main.css';
@import '@fullcalendar/daygrid/main.css';
@import '@fullcalendar/list/main.css';

在我的calendar.html.erb页面中：

<section class="section">
<div class="container m-t-20">
<div id="calendar"></div>
</div>
</section>

<script>
$(function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
header: {
left: 'prev,next',
right: 'dayGridMonth, listMonth'
},
plugins: [ dayGridPlugin, listPlugin ],
defaultView: 'dayGridMonth'
});
calendar.render();
});
</script>

启动应用程序后，我可以在日历页面上看到日历中的日期和信息，但没有CSS。

我错过了哪一步？非常感谢

Answer 1

根据您是使用Webpack还是仅使用CSS压缩器，您可能无法通过引用包来导入CSS。

例如，@import '@fullcalendar/core/main.css';引用node_modules文件夹中的包@fullcalendar/core，但某些CSS处理器未配置为在node_modules中查找。

如果是这样，那么像这样的简单路径就会起作用：

@import 'node_modules/@fullcalendar/core/main.css';
@import 'node_modules/@fullcalendar/daygrid/main.css';
@import 'node_modules/@fullcalendar/list/main.css';

如果不是，则需要使用相对路径：

@import '../node_modules/@fullcalendar/core/main.css';
@import '../node_modules/@fullcalendar/daygrid/main.css';
@import '../node_modules/@fullcalendar/list/main.css';

对于您的特定设置，您可能需要更改上面示例中的路径。node_modules的路径应该是相对于CSS文件的。

Answer 2

以下是适用于我的：

我在Rails 6.0.3中使用webpacker。

1. '/app/javascript/packs/application.js'：

require("fullcalendar/fullcalendar.js")

2. '/app/javascript/fullcalender/fullcalendar.js'(这是一个与require in 1一起使用的自定义文件夹(：

import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";

document.addEventListener('turbolinks:load', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin ],
height: "parent",
});
calendar.render();
});

3. '/app/assets/stylesheets/custom.scss'：

@import '@fullcalendar/core/main.css';
@import '@fullcalendar/daygrid/main.css';

4. 'html.erb'

<section class="section">
<div id="calendar"></div>
</section>

Answer 3

我终于找到了解决方案，添加了：

在package.json中

"moment": "^2.29.1"

和app/javascript/packs/application.js

import moment from 'moment'
window.moment = moment