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

Question

我正在使用 rails 的 6.0.2 版本构建一个 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

'/app/javascript/packs/application.js':

require("fullcalendar/fullcalendar.js")

'/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();
});

'/app/assets/stylesheets/custom.scss':

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

'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

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

Fullcalendar.io CSS not working in rails 6 app

javascript

ruby-on-rails

fullcalendar