0

Estoy intentando adjuntar FullCalendar en mi proyecto de Laravel 6. He instalado los paquetes según la web de FullCalendar (ES6 Build System) y todo funciona mientras ponga todo el código en .\resources\js\app.js. Adjunto código: app.js

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';

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

document.addEventListener('DOMContentLoaded', function() {
        .
        .
        .
    });

El problema lo tengo cuando quiero trasladar esto a la vista. Lo quito de app.js y lo pongo en los siguientes archivos:

app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    
    <link href='node_modules/@fullcalendar/core/main.css' rel='stylesheet' />
    <link href='node_modules/@fullcalendar/daygrid/main.css' rel='stylesheet' />
    <link href='node_modules/@fullcalendar/timegrid/main.css' rel='stylesheet' />
    <link href='node_modules/@fullcalendar/list/main.css' rel='stylesheet' />
    @yield('scripts')

  .
  .
  .

</html>

index.blade.php

@extends('layouts.app')
@section('content')
        .
        .
        .
@endsection
@section('scripts')
<script>
    import { Calendar } from 'node_modules/@fullcalendar/core';
    import dayGridPlugin from 'node_modules/@fullcalendar/daygrid';
    import timeGridPlugin from 'node_modules/@fullcalendar/timegrid';
    import listPlugin from 'node_modules/@fullcalendar/list';
    import interactionPlugin from 'node_modules/@fullcalendar/interaction';

    document.addEventListener('DOMContentLoaded', function() {
        .
        .
        .
    });

</script>
@endsection

El error que me da en consola es:

SyntaxError: import declarations may only appear at top level of a module

2 respuestas 2

0

Hola creo que es porque la @section('scripts') va antes de la @section('content') y no al final: deberia quedar algo asi:

@extends('layouts.app')
@section('scripts')
<script>
    import { Calendar } from 'node_modules/@fullcalendar/core';
    import dayGridPlugin from 'node_modules/@fullcalendar/daygrid';
    import timeGridPlugin from 'node_modules/@fullcalendar/timegrid';
    import listPlugin from 'node_modules/@fullcalendar/list';
    import interactionPlugin from 'node_modules/@fullcalendar/interaction';

    document.addEventListener('DOMContentLoaded', function() {
        .
        .
        .
    });

</script>
@endsection
@section('content')
        .
        .
        .
@endsection

Revisa tambien como cargas los scripts del fullcalendar, quizas debes intentar con: <script src="{{ asset('direccion_donde_esta_el_js_de_fc') }}" defer></script> ya que el asset referencia a lo que tienes en la carpeta public, esto lo puedes hacer desde el index.blade.php o tambien el app.blade.php, avisame si te sirve o si ya habias resuelto, comparte tu solucion

0

No ps, como vas a pones ES6 en una vista

import { Calendar } from 'node_modules/@fullcalendar/core';

esto hay que compilar primero, si estas usando vue, react u otro, basta con agregar el archivo.js compilado resultante,

en caso de no usar una biblioteca front-end basta solo con agregar los CDN

app.blade.php

...
@stack('css')
@stack('js')
...

index.blade.php

...
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
@endpush
@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
@endpush
...

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.