We Keep Coding

How can i call ajax request when i click on next ,prev ,month button of FullCalender?

i am using FullCalender 1.9 version. that is too old. but i am bound with this.
now issue is , i am putting full data that more than 2000. so my calendar taking long time to load. so i decided that when we click on Today ,Next ,PREV , Month button then it call a ajax request and data will load from backend server.
i used many solution but no any solution working for me. i took reference of this jquery fullcalendar how to load events on next and previous button click but could not understand.
please help me.
my JS code is
$(function () { // document ready
$('#calendar').fullCalendar({
viewRender: function(view, element) { },
eventClick: function (calEvent, jsEvent, view) {
$(this).css('border-color', 'yellow');
url = '{{ route("boking-details", 'XXX') }}'.replace('XXX', calEvent.id);
$.fancybox.destroy();
element = '<a id="openFancybox" data-type="ajax" data-src="' + url + '" href="javascript:;"></a>'
$(".element").html(element);
$("#openFancybox").fancybox();
$("#openFancybox").click();
},
/*eventDrop: function (event, delta, revertFunc) {
if (confirm("Are you sure about this change?"+ " was dropped on " + event.start.format())) {
changeBooking(event, delta, revertFunc);
}
},*/
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
if (confirm("This booking has now been moved."+ " with booking time " + event.start.format() )) {
changeBooking(event, delta, revertFunc);
//savedrop(event.id,event.start,event.end);
} else {
$('.popover').popover('hide');
revertFunc();
}
},
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
/*//latest
eventMouseover: function( event, jsEvent, view ) {
var item = $(this);
if(item.find('.nube').length == 0){
var info = '<span class="nube"><h2>'+event.title+'</h2> <p class="text">'+event.description+'</p></span>';
item.append(info);
}
if(parseInt(item.css('top')) <= 200){
item.find('.nube').css({'top': 20,'bottom':'auto'});
item.parent().find('.fc-event').addClass('z0');
}
item.find('.nube').stop(true,true).fadeIn();
},
eventMouseout: function( event, jsEvent, view ) {
var item = $(this);
item.find('.nube').stop(true,true).fadeOut();
},*/
/*eventMouseover: function (calEvent, jsEvent) {
var xOffset = 0;
var yOffset = 0;
var tiptext;
//var view = $('#calendar').fullCalendar('getView');
//tiptext = "<strong>" + calEvent.title + "</strong>" + "<br>" + tiptext;
$("body").append("<p class='btn btn-secondary' data-toggle='tooltip' data-placement='top' id='tooltip'> <strong>" + calEvent.title + "</strong>" + "<br>" + calEvent.description + "</p>");
$("#tooltip")
.css("z-index", 91000)
.css("position", "absolute")
.css("top", ($(this).offset().top + $(this).outerHeight() + yOffset) + "px")
.css("left", ($(this).offset().left + xOffset) + "px")
.fadeIn(400);
},
eventMouseout: function (calEvent, jsEvent) {
$("#tooltip").remove();
},*/
timeFormat : "H(:mm)",
//slotLabelFormat:"HH:mm",
displayEventTime: false,
// now: '2018-11-07',
editable: true, // enable draggable events
dragRevertDuration: 1000,
aspectRatio: 2.5,
scrollTime: '10:00', // undo default 6am scrollTime
//slotLabelFormat: 'h(:mm)a',
//minTime: '06:30:00',
//maxTime: '19:30:00',
slotDuration: '00:15:00',
slotLabelInterval: 15,
//lazyFetching: true,
header: {
left: 'today, prev,next',
center: 'title',
right: 'timelineMonth,timelineWeek,timelineDay'
},
defaultView: 'timelineMonth',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {days: 3}
},
timelineWeek: {
type: 'timeline',
dayOfMonthFormat: 'ddd DD/MM',
//titleFormat: '(d MMMM yyyy)'
//titleFormat:"HH",
},
timelineDay: {
type: 'timeline',
//timeFormat: 'H:mm',
slotLabelFormat:"HH",
}
},
resourceLabelText: 'Drivers',
resources: <?= json_encode($resources) ?>,
events: <?= json_encode($events) ?>
});
});

Click button in Full Calendar popover is not working

I've created a click button on popover of events in FullCalendar to perform some xyz action . But the function ("detailcheck") created is not working . It would be helpfull If someone can guide me through the issue in below mentioned code snippet?
Full Calendar Popup
$scope.uiConfig = {
calendar: {
name : 'calender1',
height: 600,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventMouseover: function () { $scope.checked = true; },
eventMouseout: function () { $scope.checked = false; },
eventDrop: $scope.alertOnDrop,
//eventResize: $scope.alertOnResize,
eventRender: function (event, element) {
var chk = $(event.target).css('display', 'block');
element.popover({
trigger: "click",
html: true,
animation: true,
content: '<div ng-show="checked"><button class="btn btn-danger pop" ng-click="detailcheck(event)">abc</button><b>Inicio</b>:' + event.start + "<b>Fin</b>:" + event.end + "</div>",
})
},
firstDay: 1,
viewRender : function (view, element) {
$scope.calendarrangestart = view.start._d;
$scope.calendarrangeend = view.end._d;
}
}
};
$scope.eventSources = [$scope.events];
$scope.detailcheck = function (event) {
console.log("hi");
}

###Fixed the issue ,not an angular solution but applying a bit jquery resolved my issue ###
{ calendar: {
name : 'calender1',
height: 600,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventMouseover: function () { $scope.checked = true; },
eventMouseout: function () { $scope.checked = false; },
eventDrop: $scope.alertOnDrop,
//eventResize: $scope.alertOnResize,
eventRender: function (event, element) {
var chk = $(event.target).css('display', 'block');
element.popover({
trigger: "click",
html: true,
animation: true,
content: '<div ng-show="checked"><button id="object_" class="btn btn-danger pop">abc</button><b>Inicio</b>:' + event.start + "<b>Fin</b>:" + event.end + "</div>",
});
$('.fc-content-skeleton').on('click', '#object_', function () {
$scope.scop = true;
console.log("abcs");
console.log($scope.scop);
});
},
firstDay: 1,
viewRender : function (view, element) {
$scope.calendarrangestart = view.start._d;
$scope.calendarrangeend = view.end._d;
}
}};
$scope.eventSources = [$scope.events];

Drag and drop full calendar doesn't fire php script

Using fullcalendar with php scripts for submitting the ajax through to php/myql connection.
I've added a drag and drop feature to the page/fullcalendar and it renders fine on the page, works, and no problems. When you normally click and type an event, its fires the script and uses PHP to add via mysql.
The problem is, once the drag and drop element has been dropped on the calendar, I need to execute the same script as if you were to use when its clicked and typed on. I might have been working on this for too long as now I've confused myself!
Script is:
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// initialize the external events
// -----------------------------------------------------------------
$("#external-events .fc-event").each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data("event", {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
var calendar = $('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
defaultView: 'agendaWeek',
nowIndicator: true,
weekends: false,
firstday: 1,
forceEventDuration: true,
timezoneParam: 'UTC',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '07:00', // a start time (10am in this example)
end: '19:00', // an end time (6pm in this example)
},
events: "get/engineer_events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Your event has been added.");
}
});
},
eventClick: function(event) {
var decision = confirm("Woah, you're about to delete this, are you sure?");
if (decision) {
$.ajax({
type: "POST",
url: "process/delete_event.php",
data: "&id=" + event.id,
success: function(json) {
$('#calendar').fullCalendar('removeEvents', event.id);
alert("Updated successfully");}
});
}
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Event updated successfully");
}
});
}
});
});
</script>

How can i get event id in fullcalendar.js from database

I add fullcalendar.js to my asp.net MVC project.i can save event in database and i have not any problem but when i click event to update that i have not access to id of event to update database record.how can i get the event id from database?
the js code is:
function GetEvent() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
//$('#modal-responsive').modal('show');
document.getElementById("event-title").value = null;
var title = null;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: start,
end: end,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
var title = document.getElementById("event-title").value;
var description = document.getElementById("field-3").value;
var startDay = document.getElementById("fromDate1").value;
var startHour = document.getElementById("field-4").value;
var endDay = document.getElementById("toDate1").value;
var endHour = document.getElementById("field-6").value;
//start = document.getElementById("fromDate1").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
$.ajax({
url: "/Calender/Save",
type: 'Post',
data: {
Title: title,
Description: description,
StartDay: startDay,
StartHour: startHour,
EndDay: endDay,
EndHour: endHour
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
$('.fc-event-inner').uniqueId();
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"close": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: true,
events: function() {
$.ajax({
url: "/Calender/GetEventId",
type: 'POST',
data: { eventId:},
success: function (doc) {
events.push(doc);
callback(events);
}
});
},
///////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////Update Event////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////
eventClick: function (event, jsEvent, view) {
var title = event.title;
var EventStart = event.start;
var EventEnd = event.end;
var eventAllday = event.allDay;
//document.getElementById("event-title").value=title;
//document.getElementById("fromDate1").value = EventStart;
document.getElementById("toDate1").value = EventEnd;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: EventStart,
end: EventEnd,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
//title = document.getElementById("event-title").value;
//start = document.getElementById("fromDate1").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
title = document.getElementById("event-title").value;
$.ajax({
url: "/Calender/Save",
type: 'Post',
dataType: "Json",
data: {
Title: title,
start: EventStart,
end: EventEnd,
allDay: event.allDay
// Description: description,
//StartDay: startDay,
//StartHour: startHour,
//EndDay: endDay,
//EndHour: endHour
}
});
event.start = start;
event.end = end;
event.allDay = event.allDay;
event.title = title;
calendar.fullCalendar('updateEvent', event);
//calendar.fullCalendar( 'refresh' );
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"closeو": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: true
});
};

The first parameter of the eventClick callback is an event object which has an id property on it, so you should be able to access it like this: event.id

jQuery fullCalendar - Refresh calendar

I'm working with jQuery fullcalendar. This is the initialisation of my fullcalendar:
$(document).ready(function(){
if($('#calendar').length) {
var dbEvents = <?php echo $events; ?>;
var calEvents = getEvents(dbEvents);
var calendar = $('#calendar').fullCalendar({
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
weekNumbers: true,
weekNumberCalculation: "ISO",
defaultView: 'month',
defaultDate: moment(),
height: 450,
events: calEvents,
eventClick: function(calEvent, jsEvent, view) {
displayEvent(calEvent, calendar);
}
});
}
});
/**
* #returns {Array}
*/
function getEvents(dbEvents)
{
calendarEvents = [];
$.each( dbEvents, function( key, value ) {
calendarEvents.push(createEvent(key, value));
});
return calendarEvents;
}
/**
* #param eventStart
* #param eventData
* #returns {{start: *, allDay: boolean, backgroundColor: string, title: (string|*), textColor: string, data: *}|*}
*/
function createEvent(eventStart, eventData)
{
if (eventData.full === true) {
calendarEvent = {
start: eventStart,
allDay: true,
backgroundColor: '#7B040B',
title: 'Volzet',
textColor: '#FFFFFF',
data: eventData
};
return calendarEvent;
}
eventTitle = eventData.total_count + ' / ' + eventData.limit;
calendarEvent = {
start: eventStart,
allDay: true,
backgroundColor: '#076d09',
title: eventTitle,
textColor: '#FFFFFF',
data: eventData
};
return calendarEvent;
}
function displayEvent(event, calendar)
{
eventPopup = $("#popitup").bPopup({
content:'iframe',
loadUrl:'/application/packages/reservatie/event.php?date=' + event.data.date_id,
onClose: function () {
//#todo: update events
$('#calendar').fullCalendar('refetchEvents');
}
});
eventPopup.trigger('click');
}
As you can see in the function displayEvent I have the function on close of the popup where I try to refresh the events with refetchEvents.
The problem here is that I doesn't do anything... . The events aren't refreshed .. What could be the solution here?