Fullcalendar.io CSS not working in rails 6 app
Here is what works for me:
I use webpacker with Rails 6.0.3.
- '/app/javascript/packs/application.js':
require("fullcalendar/fullcalendar.js")
- '/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();
});
- '/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>
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.