Develop Reference

Not able to drop external elements on calendar

when I drag an external element on the calendar, I am not able to create an event on the calendar through it. eventReceive() callback is also not getting fired.
I have set the droppable option to true as well. Can someone please help? Have a look at the code:
HTML:
<div class="fc-event">Drag me !!</div>
JS:
$('.fc-event').each(() => {
// 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)
duration: '02:00',
create: true,
});
// 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
});
});
const calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
themeSystem: 'standard',
selectable: true,
droppable: true,
columnHeader: true,
selectMirror: true,
editable: true,
plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
eventResourceEditable: true,
select(selectionInfo) {
showTaskCreationPopup(selectionInfo.start, selectionInfo.end);
},
eventReceive(element) {
console.log('event received');
createTask(element.event);
},
drop(info) {
console.log('dropped');
createTask(info.jsEvent);
},
eventDrop(info) {
console.log('event dropped');
},
header: {
left: 'prevYear prev today next nextYear',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay',
},
buttonText: {
// eslint-disable-next-line new-cap
prevYear: new moment().year() - 1,
// eslint-disable-next-line new-cap
nextYear: new moment().year() + 1,
},
});
calendar.render();

The way that I was able to achieve this was not through the eventReceive -neither eventDrop- event but using the 'drop' event. The signature is something like:
customDrop = ({ resource, date, draggedEl: { id } }) => {})

var containerEl = document.getElementById('external-events-list');
var eventEls = Array.prototype.slice.call(
containerEl.querySelectorAll('.fc-event')
);
eventEls.forEach(function(eventEl) {
if (eventEl.textContent == "Event1") {
new Draggable(eventEl, {
eventData: {
id: 1,
title: eventEl.innerText.trim(),
color: 'Orange',
textColor:'black'
}
});
} else if (eventEl.textContent == "Event2") {
new Draggable(eventEl, {
eventData: {
id: 2,
title: eventEl.innerText.trim(),
color: '#ccccff',
textColor:'black'
}
});
}}); // end eventEls.forEach

jQuery qTip show/hide on keyboard clicks(Enter Key)

I am able to show/hide jQuery qTip on mouse click but
I want to show/hide the qTip on click of Enter key along with mouse clicks.
Can some one please help me on this.
$('.LoginUserProfile').qtip({
content: {
text: '<span class = "login_jobTitle" title = ' + UserJobTitle + '>' + UserJobTitle + '</span><br/>',
title: 'My Profile',
//button: 'Close'
},
show: {
solo: true,
click: true,
},
show: 'click',
hide: {
event: 'click unfocus'
},
position: {
my: 'top right', // Position my top left...
at: 'bottom left', // at the bottom right of...
viewport: $(window)
},
style: {
classes: 'qtip-tipsy profile-dropdown',
tip: false
},

Below is the answer.
var showUserProfile = true;
$('.LoginUserProfile').keyup(function (e) {
if (e.keyCode === 13) {
if (showUserProfile) {
$('.LoginUserProfile').qtip("show");
showUserProfile = false;
}
else {
$('.LoginUserProfile').qtip("hide");
showUserProfile = true;
}
}
});

Allow events to be dragged only onto background events

I am managing appointments on fullcalendar. I have available slots of time where I can create new appointments. Also I can drag appointments onto available time slots which are shown as background events.
I only want the drop functionality on background event slots.
I have tried the eventOverlap method but it only works when the event is dropped on a background event. If the event is dropped elsewhere then I am unable to detect whether I am dropping the event on background event or on empty slot.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
defaultView: 'timeGridWeek',
// height: 1080,
plugins: ['dayGrid', 'timeGrid', 'interaction'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: {
url: getUrl(),
failure: function() {
toastr.error('Unable to load calendar data, Please try later');
},
success: function() {
}
},
loading: function(bool) {
},
defaultDate: Date.now(),
editable: true,
eventLimit: true,
eventClick: function(info) {
if (info.event.extendedProps.type == 'Calendar') {
showCreateModal(info.event);
}
if (info.event.extendedProps.type == "Appointment") {
showUpdateModal(info.event);
}
},
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.extendedProps != '' && stillEvent.extendedProps.type === 'Calendar' ? true : false;
},
eventDrop: function(info) {
// check if event is being dropped on past date / slot
if (moment(info.event.start) < moment()) {
info.revert();
return;
}
// check if event is being dropped on future slot
if (moment(info.event.start) > moment()) {
swal({
title: "Are you sure?",
text: "You are about to re-schedule this appointment!",
icon: "warning",
// buttons: true,
buttons: ["No", "Yes !"],
dangerMode: true,
})
.then((response) => {
if (response) {
submitForm(false, true, info.event);
} else {
info.revert();
}
});
}
}
});
calendar.render();
This is what I want:

You're correct that eventOverlap doesn't help you here, because it's only triggered when the event is dropped onto a background event. It doesn't help you when the event is dropped somewhere else.
In fullCalendar 4 you can achieve what you need via the eventConstraint setting. This allows you to limit event dragging to specific windows of time. As the documentation says, you can provide a groupId value to this setting, and then
...events that are being dragged or resized must be fully contained by at least one of the events linked to by the given groupId.
All you need to do as well as that is give all your background events the same groupId.
For example, if you set:
eventConstraint: 1
and then have entries such as these within your event data:
{
start: "2019-07-10 09:00",
end: "2019-07-10 12:00",
rendering: "background",
groupId: 1
},
{
start: "2019-07-11 09:00",
end: "2019-07-11 12:00",
rendering: "background",
groupId: 1
},
This would mean that you would only be allowed to drag or resize an existing calendar event if you drag/resize it so that it falls entirely within the time periods covered by those background events which have a groupId of 1.
Here's a working demonstration: https://codepen.io/ADyson82/pen/jjdEjB

Logic to show Bootstrap popover acting abnormally

I'm having 2 weird issues with my popovers shown here in fiddle
After I have selected a day (in fullcalendar) and the popover shows, I click the day again to hide the popover, then I click again in the same day to show again, but no popover!. It's after I click to show, hide, then click to show again that I'm having issues.
When I click on an eventLimitClick event inside a day (April 20th in fiddle), then click on the day (April 20th). The popover hides after I click the day, but then doesn't show any popover for the day like it should.
Here is some of the logic, but please refer to the fiddle link above for working code.
var $calPopOver;
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
eventLimit: 1,
events: function(start, end, timezone, callback) {
$.ajax({
url: '/ManageSpaces/GetDiaryEvents/',
dataType: 'json',
data: {
start: start.format(),
end: end.format(),
id: $("#HiddenYogaSpaceId").val()
},
success: function(doc) {
var events = [];
$(doc).each(function() {
events.push({
title: "1 Event", //$(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
},
eventLimitText: function(numberOfEvents) {
return numberOfEvents + " Events";
},
eventLimitClick: function(cellInfo, jsEvent) {
$(cellInfo.dayEl).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#events-popover-head").html();
},
content: function() {
return $("#events-popover-content").html();
}
});
//$(cellInfo.dayEl).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(cellInfo.dayEl).popover('show');
},
eventClick: function(calEvent, jsEvent, view) { //function (data, event, view) {
//var s = cellInfo.segs;
$("#eventDetails.collapse").collapse('toggle');
if ($calPopOver)
$calPopOver.popover('destroy');
},
dayClick: function(data, event, view) {
$dayClickedDate = data.format();
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#day-popover-head").html();
},
content: function() {
return $("#day-popover-content").html();
}
});
//$(this).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(this).popover('show');
}
});

Maybe you can look into these bootstrap examples. If you can manage to get a copy of the examples, it's simple a copy and paste scenario IMO.
http://getbootstrap.com/javascript/
Search for "Popovers popover.js" on this page and scroll a bit down for the examples.

Opening a QTip2 Modal Window from within a Javascript function

I'm using Qtip2 to create modal window with the code below:
$('a#my-link-id').qtip({
content: {
text: $('#my-modal-content'),
title: "My Modal Window Title",
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
This modal will be activated when I click on the link with id my-link-id.
However, I want to activate this modal using the OnClick feature in a link. So say I have the following link:
<a id="my-link-id" href="#" onClick="javascript:getModalWindow('my-link-id');return false;">Fire Modal</a>
And I have the following function:
window.getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
elem_link.qtip({
content: {
text: 'my content',
title: 'My Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
}).on('click', function(e){
e.preventDefault();
return false;
});
elem_link.trigger('click');
return false;
}
The above code does not work as I expect it to. What happens is the click gets triggered continously (not once) until my browser (Chrome) halts it with an 'Aw, Snap!' error. And also the modal does not get activated.
What do I need to do to get this to work?!

I solved this doing what you have below:
window._getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
var modal_init_bool = elem_link.data('modal_init');
switch(true)
{
case (modal_init_bool !== true):
elem_link.qtip({
content: {
text: 'Modal Window Content',
title: 'Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'modal',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
elem_link.data('modal_init', true);
break;
}
elem_link.trigger('modal');
return false;
}
I tried using 'click' instead of 'modal' but it just kept firing multiple times when I did that and I don't really understand why.