web-dev-qa-db-ja.com

Fullcalendar.io CSSがRails 6アプリで機能しない

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がありません。

どのステップが欠けていますか？どうもありがとう

javascriptruby-on-railsfullcalendar
7
Tomas

ここに私のために働くものがあります：

Rails 6.0.3。

  1. '/app/javascript/packs/application.js'：
require("fullcalendar/fullcalendar.js")
  1. '/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();
});
  1. '/app/assets/stylesheets/custom.scss'：
@import '@fullcalendar/core/main.css';
@import '@fullcalendar/daygrid/main.css';
  1. 「html.erb」
<section class="section">
   <div id="calendar"></div>
</section>
2
printfinn