Ketav Chotaliya Ketav Chotaliya - 5 months ago 66
jQuery Question

Full Calendar js with wordPress

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, Previous Next and Today button is not appear and Select event is also not working.
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.
enter image description here

Following is my code:
include JS and CSS

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__) );


Full Calendar js 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&room-type=3392",
error: function () {
$('#script-warning').show();
}
},
loading: function (bool) {
$('#loading').toggle(bool);
}
});

Answer

One little mistake i did in my code. That is, I forgot to add media='print' in fullcalendar.print-css file.

That's it. :)