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上工作（这是多么奇怪！）。