FullCalendar v4 dynamically set a calendar’s height

Question

In my Laravel App, I've made .js file `fullCalendar.js' and this is inside of it:

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();
});

And in my blade calendar.blade.php I have included that file
<script src="{{ asset('js/fullCalendar.js') }}" ></script>
and I have <div> with id id="calendar" And I can see my calendar and it's working without any problems. If I want to dynamically set a calendar’s height in certain blade.php (view) with this line that I saw on their website
calendar.setOption('height', 700);
I get an error saying this: Uncaught TypeError: calendar.setOption is not a function I tried putting in when document is ready or before that or even adding event listener for DOMContentLoaded but the error is still there. After every change in my .js file I run following command npm run dev to compile it. What am I doing wrong?

Where exactly are you calling the setOption in your code? I don't see it — ADyson, Sep 24 '19 at 12:35
In my blade where I included my `fullCalendar.js` I tried putting it inside document ready or outside, but it's not working. — Nemanja, Sep 24 '19 at 12:46
Well `var calendar` only exists within the `document.addEventListener('DOMContentLoaded', function() {` block it's declared in. So either you have to use `setOption` somewhere within there, or you have to make `calendar` global, or you have to find some other way of passing a reference to `calendar` to the necessary place(s) in your code. — ADyson, Sep 24 '19 at 13:47

score 2 · Answer 1 · answered Sep 25 '19 at 06:47

2

As @ADyson said in his comment, I just need to declare calendar as global. Once I did it I can use calendar.setOption('height', 700); and other calendar functions.

answered Sep 25 '19 at 06:47

Nemanja

119
1
3
16

FullCalendar v4 dynamically set a calendar’s height

1 Answers1