[英]Fullcalendar.io CSS not working in rails 6 app
I am building a RoR app with the 6.0.2 version of rails.我正在使用 6.0.2 版本的 rails 构建一个 RoR 应用程序。 I need to use Fullcalendar.io for my project:
我需要在我的项目中使用 Fullcalendar.io:
So far did:到目前为止:
yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/list
In my application.js file:在我的 application.js 文件中:
window.Calendar = require("@fullcalendar/core").Calendar;
window.dayGridPlugin = require("@fullcalendar/daygrid").default;
window.listPlugin = require("@fullcalendar/list").default;
In my pages.scss file:在我的 pages.scss 文件中:
@import '@fullcalendar/core/main.css';
@import '@fullcalendar/daygrid/main.css';
@import '@fullcalendar/list/main.css';
In my calendar.html.erb page:在我的 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>
After lauching the application, i can see in the Calendar page, dates and informations from the calendar but there is no CSS.启动应用程序后,我可以在日历页面中看到日历中的日期和信息,但没有 CSS。
Which step i am missing ?我错过了哪一步? Many thanks
非常感谢
Depending on whether you're using Webpack or if you're just using a CSS compressor, you might not be able to just import the CSS by referencing the package.根据您是使用 Webpack 还是仅使用 CSS 压缩器,您可能无法仅通过引用包来导入 CSS。
For example @import '@fullcalendar/core/main.css';
例如
@import '@fullcalendar/core/main.css';
references the package @fullcalendar/core
in your node_modules
folder, but some CSS processors aren't configured to look in node_modules
.引用
node_modules
文件夹中的包@fullcalendar/core
,但某些 CSS 处理器未配置为在node_modules
中node_modules
。
If they are, then a simple path like this will work:如果是,那么像这样的简单路径将起作用:
@import 'node_modules/@fullcalendar/core/main.css';
@import 'node_modules/@fullcalendar/daygrid/main.css';
@import 'node_modules/@fullcalendar/list/main.css';
If they are not, you'll need to use a relative path:如果不是,则需要使用相对路径:
@import '../node_modules/@fullcalendar/core/main.css';
@import '../node_modules/@fullcalendar/daygrid/main.css';
@import '../node_modules/@fullcalendar/list/main.css';
You may have to alter the path in the example above for your specific setup.您可能需要针对您的特定设置更改上述示例中的路径。 The path to
node_modules
should be relative to your CSS files. node_modules
的路径应该相对于您的 CSS 文件。
Here is what works for me:以下是对我有用的方法:
I use webpacker with Rails 6.0.3.我在 Rails 6.0.3 中使用 webpacker。
require("fullcalendar/fullcalendar.js")
require in 1
): require in 1
的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();
});
@import '@fullcalendar/core/main.css';
@import '@fullcalendar/daygrid/main.css';
<section class="section">
<div id="calendar"></div>
</section>
I finally found the solution by adding:我终于通过添加以下内容找到了解决方案:
In package.json在 package.json 中
"moment": "^2.29.1"
and in app/javascript/packs/application.js并在 app/javascript/packs/application.js 中
import moment from 'moment'
window.moment = moment
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.