uncaught typeError: .fullCalendar() is not a function with fullCalendar v4

Question

I've gone through previous posts like this for the uncaught typeerror, but all of them are referencing the order in which the scripts are loaded. Since I'm using wordpress, the order is as such:

wp_enqueue_script( 'google-jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'); wp_enqueue_style('icons', 'https://i.icomoon.io/public/8f231b5d70/healthprofessionaltheme/style.css'); wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Merriweather:700|Roboto:400,700&display=swap'); wp_enqueue_style('calendar-core-css', get_template_directory_uri() . '/assets/fullcalendar/packages/core/main.min.css'); wp_enqueue_script( 'calendar-core-js', get_template_directory_uri() . '/assets/fullcalendar/packages/core/main.min.js'); wp_enqueue_style('calendar-daygrid-css', get_template_directory_uri() . '/assets/fullcalendar/packages/daygrid/main.min.css'); wp_enqueue_script( 'calendar-daygrid-js', get_template_directory_uri() . '/assets/fullcalendar/packages/daygrid/main.min.js'); wp_enqueue_style('calendar-timegrid-css', get_template_directory_uri() . '/assets/fullcalendar/packages/timegrid/main.min.css'); wp_enqueue_script( 'calendar-timegrid-js', get_template_directory_uri() . '/assets/fullcalendar/packages/timegrid/main.min.js'); wp_enqueue_script( 'calendar-interaction', get_template_directory_uri() . '/assets/fullcalendar/packages/interaction/main.min.js'); wp_enqueue_style( 're_admin_core', get_template_directory_uri() . '/assets/stylesheets/admin_core.css');

Where the calendar JS load is first, with other plugins to follow.

The error shows only when I click on the event within this function:

eventClick: function(info){ var event_id = info.event.id; event_selected = event_id; var similarEvents = info.event; similarEvents.className = 'is_selected'; $("#calendar").fullCalendar('updateEvent', similarEvents); //The issue }

I've tried removing the jQuery line and replacing it with document.getElementById("calendar") and the problem is the exact same. Why is that the case? Is it because how I call the fullCalendar reference at the top which is this?

var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, {...});

I know when I attempted to replace the calendar variable with $("#calendar").fullCalendar({..}); it threw the exact same error at the top. Are the newer versions of fullCalendar moved away from this function?

UXerUIer · Accepted Answer · 2019-07-08 15:59:48Z

Ok I figured it out. As much as I love fullCalendar, their biggest mistake is making the "updates on the docs" button super small that I missed it, which took me here. These docs are super important, because the main site hasn't been updated but that page has.

Instead of approaching it like above, you have to do it this way within the eventClick function:

info.event.setProp('classNames', 'is_selected');

The approach is different, but gets the job done.

"the main site hasn't been updated" ...how do you mean? fullcalendar.io/docs now points at the version 4 documentation. fullcalendar.io/docs/v3 points to the older documentation. So if you go to the normal documentation link, you get the updated documentation. Are you thinking of a specific example where the code example is still wrong even in the v4 docs? If so, you should tell the maintainer: see the "Improving the Docs" section at the bottom of this link: fullcalendar.io/contributing

Collectives™ on Stack Overflow

uncaught typeError: .fullCalendar() is not a function with fullCalendar v4

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related