CODEWITHSUNDEEP
javascriptfullcalendar-4
UXerUIer
UXerUIer

Reputation: 2338

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

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?

Upvotes: 1

Views: 1987

Answers (1)

UXerUIer
UXerUIer

Reputation: 2338

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.

Upvotes: 2

Related Questions