We Keep Coding

fullcalendar event remove not working on eventDragStop method (full calendar v4)

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>

TypeError: Cannot read property 'extendedProps' of undefined

I try to set the tooltip but get error
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
eventLimit: true, // allow "more" link when too many events
editable:false,
locale: 'sl',
navLinks: true,
events: 'load.php',
selectable:false,
selectHelper:false,
displayEventTime: false
});
});
</script>

Info.event is undefined which is why you cannot read property "extendedProps."
To protect yourself from undefined objects, I would use the pattern:
var tooltip = new Tooltip(info.el, {
title: ((info.event || {}).extendedProps || {}).description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
I would do a console.log(info) right before you initialize var tooltip to figure out what "info" actually is.

That error means that info.event is equal to undefined. I'd recommend that you try to console.log(info) or use the debugger and see what the value of info is that is being passed into that function before you try to access info.event.extendedProps.

How to hide one bootstrap-popover when opening another?

(bootstrap 4)
Hi all, I'm trying to make it so that when you click outside "popover" - it (popover) was hiding (kind of like I did it). And while doing so, I'm also trying to make the "disappearance" of the first popover when clicking on another(second) calendar event ("eventClick" event in Fullcalendar) and the appearance of another. But I can not understand how to do it.
P. S. If to show the popover only when the event is "eventClick"(FullCalendar's event), then the popover appears ONLY after the second click, for each event.
Code: Codepen.io
OR:
HTML:
<body>
<ul id="popover-content" class="list-group" style="display: none">
aaa
bbb
ccc
</ul>
<div id='calendar'></div> ...
JS:
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay,listDay"
},
themeSystem: "bootstrap4",
locale: "ru-RU",
defaultDate: "2018-03-12",
...
eventRender: function(event, element, view) {
element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
return $("#popover-content").html();
}
});
},
editable: true,
eventLimit: true,
...
$("body").on("click", popoverCloseByOutsideClick);
function popoverCloseByOutsideClick(e) {
var isNotPopover = !$(e.target).hasClass('.popover'), isNotPopoverChild = ($(e.target).parents('.popover').length === 0), isNotEvent=!$(e.target).hasClass('.fc-event-container'), isNotEventChild = ($(e.target).parents('.fc-event-container').length === 0);
// if (!isNotEvent || !isNotEventChild) {
// // console.log($(e.target));
// // closePopovers();
// // e.target.popover('hide');
// // $(e.target).popover('show');
// }
if (isNotPopover && isNotPopoverChild && isNotEvent && isNotEventChild) {
closePopovers();
}
}
function closePopovers()
{
$.each($(".popover"), function(i, el) {
if ($(el).hasClass("show")) $(el).removeClass("show");
});
}
P.S.2 Please, forgive me for my English if something is wrong.

In order to close any previous opened popover you can call .popover('hide'):
element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
// for each opened popover...hide it
$("#calendar .popover.show").popover('hide');
// ^^^^^
return $("#popover-content").html();
}
});

element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
$('.popover').popover('hide')
return $("#popover-content").html();
}
});

Add event to every day if the day is empty

To better understand my question, take a look at the JSFiddle Example.
Basically there are tree kinds of unique items on the calendar that are all day events: Today, Completed, and Incomplete days. I need to figure a way to populate days that don't have anything on them (Today, or Incomplete), in this case they would be populated with "Completed". How can I figure out what these days are?
Also any way to limit the calendar to a set months range? For instance Quarter 1 would be Dec 1st to Mar 31st.
//Calendar
$(document).ready(function() {
// Figure out todays date and provide link to enter data
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Staff Data Calendar
$('#calendar-staff').fullCalendar({
header: {
left: '',
center: 'title',
},
businessHours: true, // display business hours
handleWindowResize: true, // responsive layout
editable: false,
events: [
// red areas where no events can be dropped
{
title: 'No Data',
start: '2015-02-03',
url: '#',
color: '#E64C65'
},
{
title: 'No Data',
start: '2015-02-17',
url: '#',
color: '#E64C65'
},
{
// Display Today
title: 'Enter Data for Today',
url: 'staffing_data_edit.html',
color: '#5E9EF3',
start: new Date(y, m, d)
}
]
});
});

You can use and apply a custom check on a event dayRender Click here for reference
Or you can use event eventAfterAllRender which call after the calendar is ready to draw. you can use a loop and check the empty days.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-10-25',
navLinks: true, // can click day/week names to navigate views
selectable: false,
selectHelper: true,
select: function(start, end) {
},
dayRender: function(date, cell )
{
console.log(date);
console.log(cell);
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function(view)
{
if (view.name == "month") {
var allEvents = $('#calendar').fullCalendar('clientEvents');
for (var index in allEvents) {
var event = allEvents[index];
}
}
},
eventClick: function(event) {
return false;
},
loading: function(bool) {
//$('#loading').toggle(bool);
},
timezone: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
eventLimitTex: 'More shifts',
events: eventsJson
});

How to get the value of allDay in fullcalendar jquery plugin?

I'm using the fullcalendar jquery plugin and I want to get the value of allDay that is true or false and I want to append the value to a form.But value that is getting appended is [object Object]
<input type="hidden" id="apptAllDay" value="[object Object]">
<script type="text/javascript">
$(document).ready(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$('#apptStartTime').val(start);
$('#apptEndTime').val(end);
$('#apptAllDay').val(allDay);
$.magnificPopup.open({
items: {
src: '#popup',
type: 'inline'
}
});
},
editable: true,
eventLimit: true, // allow "more" link when too many events
eventStartEditable : false,
events: "http://localhost/app1/events",
});
$(document).on("click","#addEvent",function(e) {
e.preventDefault();
doSubmit();
});
function doSubmit(){
var title = $("#titleContainer").val();
var description = $.trim($("#descContainer").val());
var url = $("#urlContainer").val();
if (!title) {
alert("Title is required");
return false;
}
$("#calendar").fullCalendar('renderEvent',
{
title: title,
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true")
},
true);
}
});
How can I get the real value that is TRUE or FAlSE?

This might probably help you, change according to your requirement.
function parseClientEvents(){
var clientArr = $('#calendar').fullCalendar('clientEvents');
for(i in clientArr){
console.log(clientArr[i]);//gives events full description.
console.log(clientArr[i].allDay);
//check for value here and append to your hidden field.
//all your logic goes here.
}
return true;
}