Full Calendar js with wordPress

admin

Administrator
Staff member
I'm using full Calendar js with my custom plug-in in wordpress.
I've set up full Calendar with wordpress successfully and get dynamic data using AJAX and data is set to calendar also. But, On left hand side, <strong>Previous Next and Today button is not appear</strong> and <strong>Select event is also not working</strong>.
I checked it with your demo, But It is nicely working with your demo.
I don't know what are the issues with me.

I'm attaching screen-shot of my issue.
<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here"></a>

Following is my code:
<strong>include JS and CSS</strong>

Code:
wp_enqueue_script( 'jquery-1.10.2', plugins_url( 'js/jquery-1.10.2.js', __FILE__ ));
wp_enqueue_script( 'jquery-ui', plugins_url( 'js/jquery-ui.js', __FILE__ ));
wp_enqueue_script( 'moment.min', plugins_url( 'js/moment.min.js', __FILE__ ));
wp_enqueue_script( 'fullcalendar.min', plugins_url( 'js/fullcalendar.min.js', __FILE__ ));
wp_enqueue_script( 'room-availability', plugins_url( 'js/room-availability.js', __FILE__ ),array('jquery'), null, true);

wp_enqueue_style( 'fullcalendar', plugins_url('css/fullcalendar.css', __FILE__) );
wp_enqueue_style( 'fullcalendar.print', plugins_url('css/fullcalendar.print.css', __FILE__) );
wp_enqueue_style( 'jquery-ui', plugins_url('css/jquery-ui.css', __FILE__) );
wp_enqueue_style( 'rooms-availability', plugins_url('css/rooms-availability.css', __FILE__) );

<strong>Full Calendar js Code</strong>

Code:
$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: date.yyyymmdd(),
        selectable: true,
        selectHelper: true,
        select: function (start, end) {
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendar').fullCalendar('unselect');
        },
        editable: true,
        eventLimit: true,
        events: {
            url: ajaxurl + "?action=get_booking_detail&amp;room-type=3392",
            error: function () {
                $('#script-warning').show();
            }
        },
        loading: function (bool) {
            $('#loading').toggle(bool);
        }
    });