FullCalendar in WordPress is not working

Question

I'm trying to implement FullCalendar on my WordPress website in order to display the Hebrew calendar from the Hebcal API. I believe I have loaded all the requisite scripts and styles via use of the wp_register_script() and wp_enqueue_script() functions.

Here is my code in the child theme's functions.php file:

function custom_scripts() {
    wp_enqueue_style( 'steedicons', get_stylesheet_directory_uri() . '/webfonts/ss-steedicons.css' );
    wp_register_style('VT323-font', 'http://fonts.googleapis.com/css?family=VT323');
    wp_enqueue_style( 'VT323-font');

    wp_enqueue_style( 'fullcalstyles', 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css' );
    wp_enqueue_style( 'hebcal', get_stylesheet_directory_uri() . '/hebcal/hebcal-styles.css' );

}

function hebcal_scripts() {
    wp_register_script('moment', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js');
    wp_register_script('fullcaljs', 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js');
    wp_register_script('hebcaljs', get_stylesheet_directory_uri() . '/hebcal/hebcal-fullcalendar.js');

    wp_enqueue_script('moment');
    wp_enqueue_script('fullcaljs');
    wp_enqueue_script('hebcaljs');

}

add_action( 'wp_enqueue_scripts', 'custom_scripts' );
add_action( 'wp_enqueue_scripts', 'hebcal_scripts' );  

And here is the code I have pasted into the page itself in HTML:

<div id="calendar"></div>

<script>
$(document).ready(function() {
    $("#calendar").fullCalendar({
        header: {
            left: "prev,next today",
            center: "title",
            right: "month,agendaWeek,agendaDay"
        },
        editable: false,
        fixedWeekCount: false,
        timezone: false,
        events: {
            url: "http://www.hebcal.com/hebcal/?cfg=fc&v=1&i=off&maj=on&min=on&nx=on&mf=on&ss=on&mod=on&lg=s&s=on",
            cache: true
        }
    });
    $("body").keydown(function(e) {
        if (e.keyCode == 37) {
            $('#calendar').fullCalendar('prev');
        } else if (e.keyCode == 39) {
            $('#calendar').fullCalendar('next');
        }
    });
});
</script>

However, nothing gets displayed. I have gone through everything and don't know what I am doing wrong. Here is a link to the page where I am trying to display this calendar: http://aronadler.com/ljoy/events/

Any help would be greatly appreciated.

Answer 1

You page is generating two errors: Uncaught TypeError: undefined is not a function.

This is likely due to the fact that WordPress sets jQuery to NoConflict mode. Your script is using the $ shortcut and is failing.

Modify your script accordingly, either replacing the shortcut or wrapping the jQuery. https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers