jQuery fullCalendar和qTip

我正在寻找使用fullCalendar并使用qTip来显示使用eventMouseover的描述。

有没有人设法做到这一点或知道解决方案？ 我已经谷歌了，并尝试实施这篇文章，但我没有快乐。 我得到它的唯一一次工作它进入一个循环并崩溃我的浏览器。

任何建议/支持将不胜感激。

冯施密特。

更新：这是我开始的代码（知道它是一个示例脚本，但是，如果我可以获得qTip集成，我可以进步）。 我有qTip等准备使用。 我现在不知道从哪里开始呢？ 再次感谢。

更新日期：2010年7月15日。有人可以帮忙吗？

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

Answer 1

尝试下载jquery.qtip-1.0.js

RC似乎不起作用，但1.0（我在另一个论坛上发现）。 我有QTip使用这段代码：

  eventRender: function (event, element) { element.qtip({ content: { title: { text: event.title }, text: 'Start: ' + ($.fullCalendar.formatDate(event.start, 'hh:mmtt')) + '
Description: ' + 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

我建议您查看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工作（如此frikkin怪！）。

Answer 3

虽然我没有专门使用qtip，但我做了一些接近你使用eventRender回调所做的事情，如此处所述。

您的代码应该类似于：

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

}）;

让我知道这是否有帮助，否则一旦我今晚回家，我可以仔细看看。