FullCalendar v4 динамически устанавливает высоту календаря - PullRequest
Новая
       9

FullCalendar v4 динамически устанавливает высоту календаря

1 голос
/ 24 сентября 2019

В моем приложении Laravel я создал файл .js `fullCalendar.js ', и он внутри него: 

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import rrulePlugin from '@fullcalendar/rrule';
import interactionPlugin from '@fullcalendar/interaction';
import momentPlugin from '@fullcalendar/moment';
import allLocales from '@fullcalendar/core/locales-all';

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

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, rrulePlugin, interactionPlugin, momentPlugin ],
    header: {
        left: 'prev, next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    locales: allLocales,
    locale: 'sr-ME',
    timezone : 'local',
    editable: true,
    navLinks: true, // can click day/week names to navigate views
    eventLimit: true, // allow "more" link when too many events
    events: {
        url: '/eventi',
        failure: function() {
            document.getElementById('script-warning').style.display = 'block'
        }
    },
    loading: function(bool) {
        document.getElementById('loading').style.display = bool ? 'block' : 'none';
    }
  });
  calendar.render();
});

И в моем блейде calendar.blade.php я включил этот файл
<script src="{{ asset('js/fullCalendar.js') }}" ></script>
и у меня есть <div> с идентификатором id="calendar" И я вижу свой календарь, и он работает без каких-либо проблем.Если я хочу динамически установить высоту календаря в определенном blade.php (просмотреть) с помощью этой строки, которую я видел на их сайте
calendar.setOption('height', 700);
, я получаю сообщение об ошибке: Uncaught TypeError: calendar.setOption не является функцией Я попытался вставить, когда документ готов или до этого, или даже добавить прослушиватель событий для DOMContentLoaded, но ошибка все еще существует.После каждого изменения в моем файле .js я запускаю следующую команду npm run dev, чтобы скомпилировать его.Что я делаю не так?

1 Ответ

1 голос
/ 25 сентября 2019

Как сказал @ADyson в своем комментарии, мне просто нужно объявить календарь глобальным.Когда я это сделаю, я смогу использовать calendar.setOption('height', 700); и другие функции календаря.

...