2013-11-26 55 views
2

我在我的應用程序中使用fullcalendar jquery作爲日曆。我希望能夠在用戶懸停在某個事件上時呈現彈出窗口。我希望彈出窗口在月視圖中懸停活動的右側,並在議程和日視圖的底部懸停。我的代碼如下。有一個bootstrap3彈出窗口出現在fullcalendar事件的底部

$(document).ready(function(){ 
    $("#calendar").fullCalendar({ 
     header:{ 
      left:'prev today next', 
      center:'title', 
      right:'month, agendaWeek, agendaDay' 
     }, 
     slotEventOverlap:false, 
     allDaySlot:false, 
     axisFormat:'HH:mm', 
     slotMinutes:15, 
     events: '/calendar/eventsfeed', 
     eventMouseover:function (calEvent){ 
      $(this).popover({ 
       trigger:'hover', 
       title:calEvent.title, 
       content:calEvent.description, 
       container:"body" 
      }); 
     }, 
     dayRender:function (date, cell){ 

     }, 
     dayClick:function (date, allDay){ 
      if (allDay){ 
       $("#calendar").fullCalendar('changeView', 'agendaDay'); 
       $("#calendar").fullCalendar('gotoDate',date); 
      }else{ 
       month = date.getMonth()+1 
       hours = date.getHours() >= 10 ? date.getHours() : "0"+date.getHours(); 
       minutes = date.getMinutes() >= 10 ? date.getMinutes() : "0"+date.getMinutes(); 
       window.location = '/calendar/entry/create/'+date.getFullYear()+'/'+month+'/'+date.getDate()+'/'+hours+':'+minutes; 
      } 

     }, 
     agenda:{ 
      eventMouseover:function(calEvent){ 
       $(this).popover({ 
        trigger:'hover', 
        title:calEvent.title, 
        content:calEvent.description, 
        container:"body", 
        placement:'bottom' 
       }); 
      }, 
     }, 
     day:{ 
      eventMouseover:function(calEvent){ 
       $(this).popover({ 
        trigger:'hover', 
        title:calEvent.title, 
        content:calEvent.description, 
        container:"body", 
        placement:'bottom' 
       }); 
      } 
     } 
    }); 
}); 

我不知道如何在加載fullcalendar bootply所以與引導3.使用它的問題是,酥料餅總是呈現在右邊無論我告訴它在底部呈現......哪有我改變這種行爲?

回答

2

嘗試使用這樣的酥料餅:

$(this).popover({ 
         title: event.title + eventort, 
         placement: placement, 
         trigger: 'manual', 
         delay: { show: 200, hide: 100 }, 
         animation: true, 
         container: '#calendar', 
         html: true, 
         content: contenttext 
        }); 

$(this).popover('show'); 
+0

什麼位置值?我希望它底部,我不希望它被手動觸發,我希望它在盤旋時被觸發。 – Apostolos

+0

Ι嘗試過,但彈出窗口仍然顯示在右側 – Apostolos

0

嘗試替換 「安置」 與 「頂」:

$(this).popover({ 
        title: event.title + eventort, 
        placement: 'top', 
        trigger: 'manual', 
        delay: { show: 200, hide: 100 }, 
        animation: true, 
        container: '#calendar', 
        html: true, 
        content: contenttext 
       });