0

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.

  • 1
    Try replacing $ with jQuery – Manoj Kumar May 13 '15 at 4:09
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

  • 1
    Glad you were able to get it working. – jdm2112 May 13 '15 at 14:51

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.