I am using fullcalendar v4. i want to remove event in eventDragStop method.
Everything is work perfectly, but i can't remove event. actually i want drop external event in fullcalendar and also want to drop fullcalendar event in external event area.
Example for old version. I want to build similar demo with latest version(v4)
Example:
eventDragStop: function( info ) {
if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
info.event.remove();
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: info.event.title, id: info.event.id, stick: true });
}
},
Full code :
<pre>
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(info) {
// is the "remove after drop" checkbox checked?
if (checkbox.checked) {
// if so, remove the element from the "Draggable Events" list
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
eventDragStop: function( info ) {
if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
info.event.remove();
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: info.event.title, id: info.event.id, stick: true });
}
},
});
calendar.render();
var isEventOverDiv = function(x, y) {
var external_events = $( '#external-events' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true; }
return false;
}
});
</pre>
Related
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) ?>
});
});
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!
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];
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?
I need to limit the events to one in a particular date, and on click of date if any events are present, it has to be removed.
While adding an event to a date, the color of the cell should be turned orange, and while deleting the event, it has to be turned back to white.
$(function () {
// Full calendar
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) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
backgroundColor: 'orange',
allDay: allDay,
},
true
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event){
var r=confirm(\"Are you sure?\");
if (r==true)
{
$('#calendar').fullCalendar('removeEvents',event._id);
}
},
dayClick: function(date, allDay, jsEvent, view) {
if($( this ).hasClass('bg-orange')){
$(this).removeClass('bg-orange');
}
else
{
$(this).addClass('bg-orange');
}
},
editable: true,
events: [
]
});
});