Close tooltip in Full Calendar

Question

Close tooltip in Full Calendar

Navigation

#1 by (2 votes)

1

I'm trying to close my tooltip in the jQuery calendar:

By clicking on the event, the tooltip will appear and an "x" in the upper corner, when you click on it the tooltip should be closed, the code in the JS on line 16 calls the function to close.

But I'm not getting results.

JS

$.fn.popover.defaults.container = 'body';

$('#mycalendar').fullCalendar({
             header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaWeek,agendaDay'
                    },
        eventRender: function (event, element) {
                    element.popover({
                        title: 'My Title <div id="x-fechar">x</div>',
                        placement:'top',
                        html:true,
                        content: event.msg
                    });
                    $('#x-fechar').click(function(e){
                        element.popover('hide');
                    });
                  },
                 editable: false,        
          events: [
                    {
                        title  : 'Click me 1',
                        msg: 'I am clipped to the left which is annoying',
                        start  : '2014-09-01 06:00:00',
                        end  : '2014-09-01 08:00:00',
                        editable: false,                            
                        allDay : false
                    },
                    {
                        title  : 'Click me 2',
                        msg: 'I am OK',                            
                        start  : '2014-09-04 14:00:00',
                        end  : '2014-09-04 15:00:00',
                        editable: false,                                                        
                        allDay : false 
                    }               
                ]
        });

jquery css

asked by anonymous 08.09.2014 / 20:33

1 answer

How to publish .mdf database in Azure SQL Dabases? Error in PROCEDURE [closed]

score 2 · Accepted Answer

As #x-fechar does not yet exist in DOM , you have to declare your click() like this:

$(document).on("click", "#x-fechar", function(e){ 
    element.popover('hide');
});

But since it is more than one element, you must use a .x-fechar class. I did not find an official way of doing this, but to know which popover belongs to which event, we can add the event ID in the .x-fechar element:

title: 'My Title <div class="x-fechar" data-eid="'+event._id+'">x</div>',

And check during the click:

$(document).on("click", ".x-fechar", function (e) {
    if( $(this).data('eid') == event._id )
        element.popover('hide');
});

$('#mycalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaWeek,agendaDay'
    },
    defaultDate: '2014-09-01',
    eventRender: function (event, element) {
        element.popover({
            title: event.title + '<div class="x-fechar" data-eid="'+event._id+'">x</div>',
            placement: 'top',
            html: true,
            content: event.msg
        });
        $(document).on("click", ".x-fechar", function (e) {
            if( $(this).data('eid') == event._id )
                element.popover('hide');
        });
    },
    editable: false,
    events: [{
        title: 'Evento 1',
        msg: 'Lorem ipsum lorem.',
        start: '2014-09-01 06:00:00',
        end: '2014-09-01 08:00:00',
        editable: false,
        allDay: false
    }, {
        title: 'Evento 2',
        msg: 'Ut enim ad minim veniam',
        start: '2014-09-04 14:00:00',
        end: '2014-09-04 15:00:00',
        editable: false,
        allDay: false
    }]
});

#mycalendar {
    margin:30px;
    height:600px;
    max-width:500px;
}
.x-fechar {
    position: absolute;
    right: 0;
    padding: 0px 20px 0 0px;
    margin: -15px 0 0 0;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype='text/javascript'src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">

<div id="mycalendar"></div>

It has a bug when we change the calendar view (eg, change month) that makes popovers not add up and can not be closed by the .x-fechar button.

To fix this, I added the viewDestroy event that is fired at each view exchange:

viewDestroy: function( ev, el ) {
    $('.popover').each(function(){
        $(this).remove();
     });
}