Fullcalendar.io CSS not working in rails 6 app

user_7023267 0
Viewed 2184

I am building a RoR app with the 6.0.2 version of rails. I need to use Fullcalendar.io for my project:

So far did:

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

In my application.js file:

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

In my pages.scss file:

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

In my calendar.html.erb page:

<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.

Which step i am missing ? Many thanks

fullcalendar ruby-on-rails javascript
3 Answers

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.

For example @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.

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.

user_6757210

Here is what works for me:

I use webpacker with Rails 6.0.3.

  1. '/app/javascript/packs/application.js':
require("fullcalendar/fullcalendar.js")
  1. '/app/javascript/fullcalender/fullcalendar.js' (This is a custom folder working together with the 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>
user_53957280

I finally found the solution by adding:

In package.json

"moment": "^2.29.1"

and in app/javascript/packs/application.js

import moment from 'moment'
window.moment = moment
user_70232670
Related