Fullcalendar.io CSS no funciona en la aplicación rails 6

Solución:

Dependiendo de si está usando Webpack o si solo está usando un compresor CSS, es posible que no pueda importar el CSS simplemente haciendo referencia al paquete.

Por ejemplo @import '@fullcalendar/core/main.css'; hace referencia al paquete @fullcalendar/core en tus node_modules carpeta, pero algunos procesadores CSS no están configurados para buscar en node_modules.

Si es así, entonces una ruta simple como esta funcionará:

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

Si no es así, deberá utilizar una ruta relativa:

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

Es posible que deba modificar la ruta en el ejemplo anterior para su configuración específica. El camino a node_modules debe ser relativo a sus archivos CSS.

Esto es lo que funciona para mí:

Uso webpacker con Rails 6.0.3.

1. ‘/app/javascript/packs/application.js’:

require("fullcalendar/fullcalendar.js")

2. ‘/app/javascript/fullcalender/fullcalendar.js’ (Esta es una carpeta personalizada que trabaja junto con el 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();
});

3. ‘/app/assets/stylesheets/custom.scss’:

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

4. ‘html.erb’

<section class="section">
   <div id="calendar"></div>
</section>

---

---

Utiliza Nuestro Buscador