我正在使用fullCalendar并使用qTip使用eventMouseover显示描述。
有没有人设法做到这一点或知道解决方案?我已经google'd并尝试实施 this post但我没有快乐。我得到它的唯一一次工作它进入一个循环并崩溃我的浏览器。
非常感谢任何建议/支持。
Von Schmytt。
更新:这是我开始使用的代码(知道它是一个示例脚本但是,如果我可以获得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>
答案 0 :(得分:8)
尝试下载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'
}
}
});
}
答案 1 :(得分: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奇怪!)。
答案 2 :(得分:0)
虽然我没有专门使用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
});
}
});
让我知道这是否有帮助,否则一旦我今晚回家,我可以仔细看看。