jQuery fullCalendar和qTip

Question

我正在查看使用fullCalendar並使用qTip顯示使用eventMouseover的描述。

有沒有人設法做到這一點或知道解決方案？我已經谷歌，也試圖執行 this post，但我沒有喜悅。我唯一的工作就是進入一個循環，並使我的瀏覽器崩潰。

任何意見/支持將不勝感激。

馮施密特。

更新：這裏是我開始的代碼（知道這是一個示例腳本，但如果我可以讓qTip集成，我可以進步）。我有qTip等準備使用。我現在不知道從哪裏開始？再次感謝。

更新：2010年7月15日有誰能幫忙嗎？

<script type='text/javascript'> 

    $(document).ready(function() { 

     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     $('#calendar').fullCalendar({ 
     theme: false, 
     header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: false, 
     events: [ 
     { 
     title: 'All Day Event', 
     start: new Date(y, m, 1), 
         description: 'Blah blah blah blah blah blah blah' 
     }, 
     { 
     title: 'Long Event', 
     start: new Date(y, m, d-5), 
     end: new Date(y, m, d-2), 
         description: 'Blah blah blah blah blah blah blah' 
     }, 
     { 
     title: 'Meeting', 
     start: new Date(y, m, d, 10, 30), 
     allDay: false, 
         description: 'Blah blah blah blah blah blah blah' 
     } 
     ] 
     }); 
    }); 

    </script> 

Answer 1

嘗試下載jquery.qtip-1.0.js

的RC的似乎不工作，但確實1.0（我發現在另一個論壇）。我有QTip使用此代碼：

eventRender: function (event, element) { 
     element.qtip({  
      content: {  
       title: { text: event.title }, 
       text: '<span class="title">Start: </span>' + ($.fullCalendar.formatDate(event.start, 'hh:mmtt')) + '<br><span class="title">Description: </span>' + event.description  
      }, 
      show: { solo: true }, 
      //hide: { when: 'inactive', delay: 3000 }, 
      style: { 
       width: 200, 
       padding: 5, 
       color: 'black', 
       textAlign: 'left', 
       border: { 
       width: 1, 
       radius: 3 
      }, 
       tip: 'topLeft', 

       classes: { 
        tooltip: 'ui-widget', 
        tip: 'ui-widget', 
        title: 'ui-widget-header', 
        content: 'ui-widget-content' 
       } 
      } 
     }); 
    }  

Answer 2

雖然我沒有用qtip具體地說，我做了一些接近你是用的是什麼eventRender回調喜歡說here。

你的代碼應該是這個樣子：

$('#calendar').fullCalendar({ 
events: [ 
    { 
     title: 'My Event', 
     start: '2010-01-01', 
     description: 'This is a cool event' 
    } 
    // more events here 
], 
eventRender: function(event, element) { 
    element.qtip({ 
     content: event.description 
    }); 
} 

}）;

讓我知道這是否有幫助，否則一旦我今晚回家，我可以仔細看看。

Answer 3

我建議檢出http://craigsworks.com/projects/forums/thread-google-calendar-like-bubble-for-jquery-fullcalendar。

我找到了工作（那種）這個

     viewDisplay: function(view) { 
     var calendar = $(this); 
    alert('Google calendars loaded'); 
     $('.fc-event').each(function(){ 
      // Grab event data 
      var title = $(this).find('.fc-event-title').text(), 
       data = calendar.data('fullCalendar').clientEvents(function(event){ 
        return event.title === title; 
       })[0]; 
      var qtipContent = data.description ? data.description : data.title; 
      $(this).qtip({ 
       content: qtipContent, 
       position: { 
        corner: { 
        target: 'topRight', 
        tooltip: 'bottomLeft' 
        } 
       }, 
       show: 'mouseover', 
       hide: 'mouseout', 
       style: { 
       width: 200, 
       padding: 5, 
       background: '#A2D959', 
       color: 'black', 
       textAlign: 'center', 
       border: { 
        width: 7, 
        radius: 5, 
        color: '#A2D959' 
       }, 
       tip: true 
       } 
      }); 
     }); 
     return false; 
    }, 

這有點工作中，我的qtips不無該警報發生（不知道爲什麼還）。另外，我的只在Firefox和IE6上工作（這是多麼奇怪！）。