0

ブートストラップ ポップオーバーで fullCalendar を使用しています。目標は、ポップオーバー内に新しいイベントを追加するためのフォームを追加することです。このコードでは、ポップオーバーがセルの上に表示されますが、ポップオーバーをクリックすると、ポップオーバー自体ではなく、その下のセルが選択されます。

これが私のコードです：

$(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');
..........

とhtml

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

こんな感じです

ポップオーバーしようとz-indexしましたが、まったく表示されません!

助けてください！お時間をいただきありがとうございます！

編集：ここにそれをテストするためのリンクがあります

4

1 に答える 1

6

このコードを試してください

$(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');
  }    
 });
});
于 2014-07-05T07:45:55.637 に答える