CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapfullcalendar
user2363192
user2363192

Reputation: 91

bootstrap popover lies under cells in fullCalendar?

I am using fullCalendar with bootstrap popovers. The goal is to append a form for adding new event inside the popovers. The code does make the popover appears above the cells, however, on clicking the popovers, the cells underneath it are selected rather than the popovers themselves.

Here is my code:

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
        height: height,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        dayClick: function( date, allDay, jsEvent, view ){
            if (view.name=='month'){
            $(this).children().popover({
        placement: 'right',
        content: function() {return $("#popover-content").html();},
html : true, container: 'body'
    });
    $('.popover.in').remove();
    $(this).children().popover('show');
..........

and html

<div id="popover-content" class="hide">
<form>
    <input id="easyeventtitle" />
  </form>
</div>

This is how it looks like

I have tried z-index to popovers, instead, they do not appear at all!

Please help! Thank you for your time!

Edit: here is the link to test it

Upvotes: 0

Views: 2915

Answers (1)

akshay
akshay

Reputation: 1161

Try this code

$(document).ready(function() {
   $('#calendar').fullCalendar({        
   header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay',
   },
  events: '/events.json',
  editable: true,
  selectable: true,
  dayClick: function(start, end, allDay, jsEvent, view) {            
    $(this).popover({
                html: true,
                placement: 'right',
                title: function() {
                    return $("#popover-head").html();
                },
                content: function() {
                    return $("#popover-content").html();
                },
                html: true,
                container: 'body'
            });
    $(this).popover('toggle');
  }    
 });
});

Upvotes: 6

Related Questions