2015-04-06 80 views
0

当我在fullcalendar中触发evenLimitClick事件时,弹出窗口不起作用。它在我的dayClick事件中正常工作,但在我的eventLimitClick中没有任何反应。这是我的fiddle 我甚至尝试设置酥料饼到父(例如被调用。$(本).parent()。酥料饼的,但也不能工作。无法显示的单击事件引导弹出式窗口

$(document).ready(function() { 
 

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

 
    $('#calendar').fullCalendar({ 
 
     // put your options and callbacks here 
 
     header: { 
 
      left: 'prev,next', //today', 
 
      center: 'title', 
 
      right: '' 
 
     }, 
 
     defaultView: 'month', 
 
     editable: true, 
 
     allDaySlot: false, 
 
     selectable: true, 
 
     events: eventsArray, 
 
     eventLimit: 1, 
 

 
     eventLimitClick: function (cellInfo, jsEvent) { 
 
      $(this).popover({ 
 
       html: true, 
 
       placement: 'bottom', 
 
       container: 'body', 
 
       title: function() { 
 
        return $("#events-popover-head").html(); 
 
       }, 
 
       content: function() { 
 
        return $("#events-popover-content").html(); 
 
       } 
 
      }); 
 

 
      $(this).popover('show'); 
 
     }, 
 
     dayClick: function (cellInfo, jsEvent) { 
 
      $(this).popover({ 
 
       html: true, 
 
       placement: 'bottom', 
 
       container: 'body', 
 
       title: function() { 
 
        return $("#events-popover-head").html(); 
 
       }, 
 
       content: function() { 
 
        return $("#events-popover-content").html(); 
 
       } 
 
      }); 
 

 
      $(this).popover('show'); 
 
     }, 
 
    }) 
 

 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script> 
 

 
<div style="border:solid 2px red;"> 
 
    <div id='calendar'></div> 
 
    <div id="events-popover-head" class="hide">Events</div> 
 
    <div id="events-popover-content" class="hide">Test</div> 
 
</div>

+0

的arent你只从调用的jQuery的js文件?你的js在哪里引导? – 2015-04-06 04:09:06

+0

嗨。在我的小提琴中,你可以看到我检查了引导版本。小提琴正在加载bootstrap。 SO上的代码片段不起作用,因此强迫我插入任何有小提琴链接的问题的代码。 – user1186050 2015-04-06 04:13:36

+0

ohh我看到对不起,我没有看到jsfiddle链接 – 2015-04-06 04:19:24

回答

2

在eventLimitClick事件变化如下:

$(this).popover 

$(cellInfo.dayEl) 

cellInfo.dayEl是您想要显示弹出窗口的单击的Day单元格元素。

我已经更新了Fiddle

+0

谢谢@puneet,这也帮助了我。 – 2015-04-06 05:01:53