0

No puedo utilizar FullCalendar v4. En consola aparece el siguiente mensaje plugin file not loaded for interaction plugin file not loaded for dayGrid Uncaught Error: No available FullCalendar view plugins.

Hice el siguiente proceso:

instale los paquetes con npm.

npm install --save @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid

luego compile los archivos.

npm run watch

Asset      Size   Chunks             Chunk Names
/css/app.css   729 KiB  /js/app  [emitted]  /js/app
  /js/app.js  2.99 MiB  /js/app  [emitted]  /js/app


    window.FullCalendar = require('@fullcalendar/core');
    window.interaction = require('@fullcalendar/interaction');
    window.dayGrid = require('@fullcalendar/daygrid');

    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');

      var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'interaction', 'dayGrid' ],
      });

      calendar.render();
    });
    <div class="text-center" id='calendar'></div>

Gracias por su Colaboración.

2 respuestas 2

0

El problema es que estás pasando el listado de plugins como strings. Eso solo es válido cuando importás los plugins mediante <script> (documentación).

Cito:

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'dayGrid', 'timeGrid', 'list' ] // an array of strings!
});

Keep in mind, this technique will not work if you are using an ES6 build system!


En tu caso tenés que pasar una referencia a la importación de los plugins. No tengo mucha experiencia con el tema, así que no se como es con require, pero en la documentación figura con import:

import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new Calendar(calendarEl, {
        plugins: [interactionPlugin, dayGridPlugin],
    });

    calendar.render();
});
1
  • Utilice el código que mencionaste en app.js y funciono muchas gracias
    – Jona Navia
    Commented el 1 nov. 2019 a las 21:27
0

Intento 1: Traté de agregar el src JS en boostrap.js, agregando después de:

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}

lo siguiente:

window.FullCalendar = require('@fullcalendar/core');
window.dayGrid = require('@fullcalendar/daygrid');

Luego "npm run dev"

Luego en la vista la llamada a fullcalendar:

index.blade.php

if(jQuery('#calendar1').length){
    document.addEventListener('DOMContentLoaded', function() {

        var calendarEl = document.getElementById('calendar1');

        var calendar1 = new FullCalendar.Calendar(calendarEl, {
           plugins: [ 'timeGrid', 'dayGrid', 'list' ],
           timeZone: 'UTC',
           defaultView: 'dayGridMonth',
           header: {
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
           },
        .....

PERO... funciona la llamada a FullCalendar.Calendar pero nunca encuentra los plugins.

Intento 2: Información de : https://fullcalendar.io/docs/initialize-es6

La única forma de que funcione es agregando todo el código en el archivo app.js, asi:

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementsByClassName('calendar').length) {
        var calendarEl = document.getElementsByClassName('calendar')[0];
        var calendar1 = new Calendar(calendarEl, {
            plugins: [ dayGridPlugin ]
        });
        calendar1.render();
    }
 });

Y luego correr npm run dev.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.