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) ?>
});
});

Full Calendar refetchResources not woking in version 5.5.1

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'resourceTimelineDay',
refetchResourcesOnNavigate: true,
customButtons: {
myCustomButton: {
text: 'Filter',
click: function() {}
}
},
viewClassNames: function(info) {
calendarEl.querySelectorAll('.fc-button').forEach((button) => {
if (button.innerText === 'Filter') {
button.classList.add('custom-btn')
}
});
},
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
//themeSystem: 'bootstrap',
aspectRatio: 1.5,
headerToolbar: {
right: 'myCustomButton,prev,today,next',
center: 'title',
left: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineYear'
},
editable: true,
resourceAreaHeaderContent: 'Vehicles',
resources: <?= globalfunctions::vehicles_reources(); ?>,
});
calendar.render();
$("#group").change(function() {
var value = $(this).val();
if (value == '1') {
resources = <?= globalfunctions::vehicles_reources(); ?>;
} else {
resources = <?= globalfunctions::operator_resources(); ?>;
}
calendar.refetchResources();
});
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
calendar.gotoDate(d)
}
});
});
On chaning dropdown needed to fetch different resources. Calendar resources are not refetched after event change. Please provide example to refetch the event on change of dorpdown. I am using fullcalendar 5.5.1.

Set eventRender in fullCalendar 4 and React

in fullCalendar used with jquery I have this eventRender:
eventRender: function (event, element, view) {
if (event.finito == 0) {
element.css('background-color', '#FF0000');
}
},
I'm trying to set up the same thing with React.
I tried this but it doesn't work:
I also tried with other various code examples found online and on the official website, but none of them worked.
customEventRender = info => {
info.el.className = "red";
info.el.children[0].className = "red";
return info.el
};
<FullCalendar events={this.state.events}
weekends={true}
options={this.state.fullcalendarOptions}
eventRender={this.customEventRender}
>
</FullCalendar>

I found this solution.
In fullCalendar 4, custom properties are stored in the extendedProps property of the event object (see https://fullcalendar.io/docs/event-parsing).
this.state = {
fullcalendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
firstDay: 1,
editable: false,
defaultDate: new Date(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventClick: (info) => {
console.log(info.event.id);
// document.location.href = 'up.php?id=' + calEvent.id;
},
eventRender: function (info) {
if (info.event.extendedProps.finito == 0) {
info.el.style.backgroundColor = "#FF0000";
}
}
},
events: []
};

In fullcalendar error adding button to event

In my laravel-fullcalendar app I want to add some buttons with jsvascript function to events
and looking at this Add font awesome icon to full calendar title
example with decision I make it as :
window.calendarEventsObject = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
eventRender: function (eventInfo, element) {
console.log("eventRender eventInfo::")
console.log(eventInfo)
console.log("eventRender eventInfo.event::")
console.log(eventInfo.event)
console.log("element::")
console.log( element )
console.log("eventInfo.el::")
console.log( eventInfo.el )
eventInfo.event.el.find(".fc-title").prepend("<i class='fa fa-external-link'></i>");
var tooltip = new Tooltip(eventInfo.el, { // example : https://fullcalendar.io/docs/event-tooltip-demo
title: 'HTREDSA', //eventInfo.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
events: eventsList,
header: {
left: 'LEFT98',
center: 'title123',
right: 'Right 444'
},
showNonCurrentDates: false,
editable: true,
allDaySlot: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
fixedWeekCount: false,
aspectRatio: 0.4,
height: 700,
select: function (start, end) {
alert( "select:::"+var_dump(-50) )
var title = "Available";
var evid = SaveEvent(start, end, '1');
$('#events_calendar').fullCalendar('unselect');
},
eventClick: function (clickObj) {
alert( "eventClick clickObj.el::"+var_dump(clickObj.el) )
if (clickObj.el.href != "") {
// alert( "::"+var_dump(-4) )
let el_href = clickObj.el.href
clickObj.el.href = ""
window.open(el_href, "_blank");
// clickObj.event.preventDefault();
alert( "::"+var_dump(-41) )
return false;
}
return false;
},
});
But debugging in console I see that the second parameter of eventRender function element is empty in my case.
I tried to get access to elemnt eventInfo by 1st parameter, but Failed: https://imgur.com/a/GPn1tOe
How to add button to fullcalendar event ?
"laravel/framework": "5.8.*",
"maddhatter/laravel-fullcalendar": "^1.3",
Thanks!

I found a decision for fullcalendar 4 without jquery methods :
eventRender: function (eventInfo) {
eventInfo.el.querySelector('.fc-title').append("Some additive Text ");
It works!

fullcalendar Moment _ordinalParse is undefined

everyone, please help me with the code. I am trying to send an ajax after creating a new record in the calendar. Here is my code:
$(document).ready(function()
{
var events = <?php echo json_encode($data)?>;
for(var i in events)
{
if(events[i].allDay === "false")
{
events[i].allDay = false;
}
if(events[i].allDay === "true")
{
events[i].allDay = true;
}
}
var calendar = $('#calendar');
var aId = calendar.attr('aId');
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: events,
selectable: true,
selectHelper: true,
select: function(start, end, allDay, jsEvent, view) {
var title = prompt('Заглавие:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
allDay: allDay
};
//var newDate = new Date(formatDate(eventData.start));
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'add',
title: title,
start: start,
end: end,
aId: aId,
allDay: allDay
}, function( data ) {
if(data === 'success');
//location.reload();
}, "json");
calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
}
calendar.fullCalendar('unselect');
},
editable: true,
eventLimit: true,
axisFormat: 'HH:mm',
timeFormat: {
agenda: 'H:mm{ - h:mm}'
},
slotMinutes: 15,
allDayText: 'за целия ден',
eventResize: function(event, delta, revertFunc) {
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'resize',
end: moment(event.end).format('YYYY-MM-DDTHH:mm:ssZ'),
id: event.id
});
},
eventClick: function(event, jsEvent, view) {
var title = prompt('Заглавие:', event.title);
if (title && event.id){
event.title = title;
$.ajax({
url: '/panel/agentTasks/addEvent',
data: 'type=changeTitle&title='+title+'&eventId='+event.id,
type: 'POST',
dataType: 'json',
success: function(response){
if(response.status == 'success')
calendar.fullCalendar('updateEvent',event);
//странно, но не работи, може би защото е стара версия на плъгина, за това ще презаредя страницата; криво решение, но поне докато се открие друго решение;
location.reload();
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
}
},
eventDrop: function(event) {
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'resetDate',
title: event.title,
start: moment(event.start).format('YYYY-MM-DDTHH:mm:ssZ'),
end: moment(event.end).format('YYYY-MM-DDTHH:mm:ssZ'),
id: event.id,
allDay: event.allDay
}
);
},
eventDragStop: function(event,jsEvent) {
var trashEl = $('#calendarTrash');
var ofs = trashEl.offset();
var x1 = ofs.left;
var x2 = ofs.left + trashEl.outerWidth(true);
var y1 = ofs.top;
var y2 = ofs.top + trashEl.outerHeight(true);
if (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 &&
jsEvent.pageY>= y1 && jsEvent.pageY <= y2) {
var r = confirm('Сигурен ли сте, че искате да изтриете?');
if(r === true){
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'deleteDate',
id: event.id
}
);
calendar.fullCalendar('removeEvents', event.id);
}
}
}
});
});
</script>
Everything else is working fine. I am using the latest fullcalendar version. The error i get - "TypeError: this._ordinalParse is undefined". Any suggestions?