FullCalender : calender.render() makes browser window unresponsive

  fullcalendar, javascript

I’m not sure exactly what’s going on, calendar.render() stops the page from loading and it just hangs.

Anyone experience this before, is it an issue with the order imports are happening?

calendar.js

import { Calendar } from '@fullcalendar/core'
import dayGrid from '@fullcalendar/daygrid'
import intertaction from '@fullcalendar/interaction'

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

  const calendar = new Calendar(calendarEl, {
    plugins: [dayGrid, intertaction],
    headerToolbar: {
      left: 'prev,next today',
      center: 'title'
    },
    timeZone: 'UTC',
    events: 'https://127.0.0.1/wp-json/api/v1/events'
  })

  calendar.render()
})

main.js

import './scripts/publicPath'
import 'console-polyfill'
import 'normalize.css/normalize.css'
import './main.scss'
import $ from 'jquery'
import feather from 'feather-icons'

import installCE from 'document-register-element/pony'

import '../node_modules/@popperjs/core/dist/cjs/popper'
import '../node_modules/bootstrap/dist/js/bootstrap.bundle'
import '../node_modules/materialize-css/dist/js/materialize'
import '../node_modules/slick-carousel/slick/slick.min'
import '../node_modules/aos/dist/aos'
import '../node_modules/jquery-mask-plugin/dist/jquery.mask'
import '../node_modules/magnific-popup/dist/jquery.magnific-popup'
import '../node_modules/bootstrap-select/dist/js/bootstrap-select'
import './scripts/init'
import './scripts/filtering'
import './scripts/aos'
import './scripts/customSlick'
import './scripts/setHeight'
import './scripts/setWaves'
import './scripts/masks'
import './scripts/lightBox'
import './scripts/calendar'

window.jQuery = $

window.lazySizesConfig = window.lazySizesConfig || {}
window.lazySizesConfig.preloadAfterLoad = true
require('lazysizes')

$(document).ready(function () {
  feather.replace({
    'stroke-width': 1
  })
})

installCE(window, {
  type: 'force',
  noBuiltIn: true
})

function importAll (r) {
  r.keys().forEach(r)
}

importAll(require.context('../Components/', true, //script.js$/))

Source: Ask Javascript Questions

LEAVE A COMMENT