0

I've been trying to add this calendar to my wordpress page. And I've followed the documentation, but it's still not showing up. This is what I've done.

I first added this to my child theme functions file:

function fullcalendar_jquery_enqueue() {
    wp_register_script('fullcalendar', "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js", false, null, true);
    wp_enqueue_script('fullcalendar');
}
add_action("wp_enqueue_scripts", "fullcalendar_jquery_enqueue", 11);

function load_styles() {
    wp_register_style('fullcalendarcss', 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css');
    wp_register_style('fullcalendarprintcss', 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css');
    wp_enqueue_style( 'fullcalendarcss');
    wp_enqueue_style( 'fullcalendarprintcss');
}
add_action('wp_print_styles', 'load_styles');

Then I added this JS to my custom.js file:

jQuery(document).ready(function ($) {
    var calendar = jQuery('#calendar').fullCalendar({
        editable: true,
    });
});

And then I added <div id='calendar'></div> to one of my pages, but the calendar is not showing up. In the console, it's showing "Uncaught TypeError".

Can someone please take a look and let me know what I might be doing wrong? Thank you!

  • 1
    Does fullcalendar's script require jQuery? If so, you should pass an array containing 'jquery' instead of false as the 3rd argument (dependencies) of the call to wp_register_script(), like so: wp_register_script( 'fullcalendar', "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js", array( 'jquery' ), null, true); This will ensures jQuery is loaded before the script you are enqueing so that the dependency is satisfied. If it still doesn't work, also check the JS console for any warning or error that should give some hints. – Iceable Aug 8 '18 at 11:23
  • Hey @Iceable, thank you for the reply! I've tried what you suggested, passing an array containing jquery and the JS console shows up the following: Uncaught TypeError: Cannot read property 'fn' of undefined at Object.<anonymous> (fullcalendar.min.js:6) at e (fullcalendar.min.js:6) at Object.<anonymous> (fullcalendar.min.js:8) at e (fullcalendar.min.js:6) at Object.<anonymous> (fullcalendar.min.js:6) ... and I'm not sure what that means? Is that still a jQuery not loading before them issue or? Again, thanks a bunch! – hemoglobin Aug 8 '18 at 11:37
0

Figured it out!

First I passed what Iceable suggested and also added moment script above, like so

wp_register_script('moment', "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js");
    wp_register_script( 'fullcalendar', "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js", array( 'jquery' ), null, true);

and then I edited JS like so

jQuery(function ($) {

  $('#calendar').fullCalendar({
  })

});

And it showed up!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.