How to hide one bootstrap-popover when opening another? - javascript

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

Related

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!

How I create this jquery in a reusable way?

I am using Bootstrap popovers with dynamic contents from my databese. In php, its creating dynamic classes for each popover. My question is, In jquery, do I need to call to triggering the popover separately?
This is how I use jQuery to trigger the popovers -
$(".image-info-popover-1").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-1').html();
},
title: function() {
return $('.popoverTitle-1').html();
}
});
$(".image-info-popover-2").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-2').html();
},
title: function() {
return $('.popoverTitle-2').html();
}
});
$(".image-info-popover-3").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-3').html();
},
title: function() {
return $('.popoverTitle-3').html();
}
});
$(".image-info-popover-4").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-4').html();
},
title: function() {
return $('.popoverTitle-4').html();
}
});
$(".image-info-popover-5").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-5').html();
},
title: function() {
return $('.popoverTitle-5').html();
}
});
But this is not the best way If I have a list of popovers to triggering out. So anybody tell me the good way to do this in a reusable manner?
Thank you.
If you want it be reusable, I'd put it in a function which takes a number as a parameter. Your function could look like this
var popover_func = function(n) {
$(".image-info-popover-"+n).popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-'+n).html();
},
title: function() {
return $('.popoverTitle-'+n).html();
}
});
};
You should be able to call this using a for-loop
for (var i=0; i<=5;i++) {
$(document).ready(popover_func(i));
}

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

how to keep popover visible when i hover on the popover in full calendar?

I have full calendar with some events. I have binded events from a json file. When i mouse hover on the particular event in the calendar it will show a popover. But when i move my mouse to the popover, the popover disappears. How to keep the popover visible when i move my mouse into the popover ? i have gone through other examples but didn't worked for me.
popover bootstap
link 2
code :
$('#calendar').fullCalendar({
//$.fn.popover.defaults.container = 'body';
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
contentHeight: 300,
height: 200 ,
eventRender: function(event, element) {
element.popover({
title: event.title1,
placement: 'auto',
html: true,
trigger: 'hover',
animation:'true',
content: event.msg,
container: 'body'
});
$('body').on('click', function(e) {
if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
element.popover('hide');
});
},
events: eventData
});
}
});
I don't know if can be an acceptable solution for you, but as alternative you can consider to 'toggle' popover on eventMouseover:
eventMouseover: function (event, jsEvent) {
$(this).popover({
title: event.name,
placement: 'right',
trigger: 'manual',
content: 'foo',
container: '#calendar'
}).popover('toggle');
}
In this way popover stays on top until you re-hover on event (Bootstrap v3.3.2, FullCalendar v2.6.1).

How to hide qtip tooltip after some time has passed?

I'm using qtip ( http://craigsworks.com/projects/qtip/ ) to make tooltips. Now I need to show tooltips when the button is pressed and hide tooltips for example when 3 seconds have passed. My current code is not working, tooltips will sometimes go away and sometimes stay...
var self = $("#email");
self.qtip({
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' }, delay: 2000, effect: function () { self.qtip("destroy"); } }
});
#newbie, but a response, is to tidy the code and that maybe that's the problem. eg replacing the name of the variable "self" by "this".
$("#email").qtip( {
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}
});

Categories