CODEWITHSUNDEEP
jquerytwitter-bootstrapfullcalendarbootstrap-popover
Aditya Shanker Tagirisa
Aditya Shanker Tagirisa

Reputation: 323

popover in fullcalendar not getting dismissed

I have to open a popover when event is clicked and if you click anywhere outside it should get dismissed so i'm using popover with focus trigger it is not getting dismissed when I click outside the event

following is the js code i'm using

$(document).ready(function () {

// page is now ready, initialize the calendar...
var eventsArray = [ {
    title: 'Test2',
    start: new Date("2015-04-21")
}];

$('#calendar').fullCalendar({
    // put your options and callbacks here
    header: {
        left: '', //today',
        center: 'title',
        right: ''
    },
    defaultView: 'agendaDay',
    defaultDate: '2015-04-21',
    editable: true,
    allDaySlot: false,
    selectable: true,
    events: eventsArray,
    eventClick: function(calEvent, jsEvent, view) {
       $(this).popover({
        placement : 'bottom',
        title : 'Appointment Actions',
        html : true,
        content :"test",
        trigger : 'focus'

    }).popover('show');
        $(this).attr('tabindex', -1);
    }

});

});

following is the js fiddle link: https://jsfiddle.net/kd7e2xpc/2/

Upvotes: 0

Views: 3741

Answers (3)

fn control option
fn control option

Reputation: 1983

Using FullCalendar v6 and Boostrap 5:

const calendarEl = document.getElementById('calendar');

const calendar = new FullCalendar.Calendar(calendarEl, {
  // ...

  eventInteractive: true, // make events focusable

  eventClick: function(info) {
    if (info.el == document.activeElement) {
      info.el.blur(); // remove focus if clicked again
    } else {
      info.el.focus(); // otherwise, shift focus
    }
  },

  eventDidMount: function(info) {
    const popover = new bootstrap.Popover(info.el, {
      title: info.event.title,
      // ...
      trigger: 'focus', // hide popover if unfocused
      // ...
    });
  },

  // ...
}

Upvotes: 1

pankaj
pankaj

Reputation: 1914

if anyone getting issue like this way..enter image description here

  eventRender: function(eventObj, $el) {
          $(".popover").hide(); },

Upvotes: 0

Leandro Carracedo
Leandro Carracedo

Reputation: 7355

The key here is to understand first how to dismiss a popover by clicking anywhere outside, this solution (explained here), uses the following code: 

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

So you entire fullcalendar js initialization is fine, only needed to inject the same idea but taking care of the click inside the calendar event:

$('html').on('click', function(e) {
  $('.popover').each( function() {
    if( $(e.target).parents(".fc-time-grid-event").get(0) !== $(this).prev().get(0) ) {
      $(this).popover('hide');
    }
  });
});

Working solution here.

Upvotes: 1

Related Questions