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