在FullCalendar dayClick上触发jQuery Qtip
我有一个jquery fullcalendar 。 当我点击一天来显示选项列表时，我想触发jquery QTip （或其他jquery解决方案（例如灯箱））。 这个问题类似于已发布的这个问题 ，但不同的是足以保证一个新问题。
有一个事件回调 ，但我不确定如何将其与jQuery Qtip集成…
$('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view) { if (allDay) { alert('Clicked on the entire day: ' + date); }else{ alert('Clicked on the slot: ' + date); } alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); alert('Current view: ' + view.name); // change the day's background color just for fun $(this).css('background-color', 'red'); } }); 这显然会显示警报并更改单击的单元格红色。
这是另一个示例，显示QTip被集成以hover在事件上。
$('#calendar').fullCalendar({ ... eventRender: function(event, element, view) { element.qtip({ content: "My Event: " + event.title }); } ... });
此示例显示用于触发QTIP的hover回调。
现在我只需要结合这两个例子……
更新26/05/2010
Qtip论坛上的Craig建议使用viewDisplay回调作为DayClick回调的替代方案，这似乎会导致各种问题。 （锁定浏览器是最突出的）。
这是post：
这是代码：
viewDisplay: function() { var calendar = $(this); $(this).qtip({ content: 'TEST', position: { my: 'top center', at: 'top center' }, show: 'click', hide: 'click', style: { tip: true } }) },
单击一天时，此方法显示工具提示。 但是有一些问题。
- 据我所知，通过此回调无法访问日期信息，因此很难显示特定于所点击日期的工具提示。
- 通过此回调无法访问X和Y点击信息，因此几乎无法将提示放在点击日期旁边。
非常感谢所有帮助！
谢谢，
蒂姆
这就像css应用于Qtip一样。
$.fn.qtip.styles.tipstyle = { width: 400, padding: 0, background: '#FFFFFF', color: 'black', textAlign: 'center', border: { width: 3, radius: 4 }, tip: 'bottomMiddle', name: 'dark' }
这是dayClick函数：
dayClick: function(date, allDay, jsEvent, view) { if (typeof $(this).data("qtip") !== "object") { $(this).qtip({ content: { prerender: true, text: "Hello World" }, position: {corner: {tooltip: 'bottomMiddle', target: 'topMiddle'}}, style: { name: 'tipstyle' }, show: { when: {event: 'click'}, ready: true }, hide: { fixed: true } }); } }
dayClick函数中的if语句确保每次单击同一日期时都不会创建Qtip。
可能出现的一个小问题是，如果您想在dayClick函数中访问某些事件数据。 但同样可以解决这个问题。
干杯，LionHeart
我现在正在使用fullCalendar和Qtip一个星期，对我来说，knepe的解决方案应该在理想的情况下工作。
您可以先检查该function是否实际被调用。 尝试以下方法：
$('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view) { alert(date); } });
如果点击某一天会给出包含该日期的警报，那么问题在于Qtip的实施。 如果您没有收到警报，则问题在于fullCalendar实现。
正如knepe所建议的那样，’show：click’应该显示Qtip。 但如果不是，请尝试：
show: { when: { event: 'click' } }
最后，不要忘记查看文档： http ： //craigsworks.com/projects/qtip/docs/reference/#show
如果弹出窗口不适合您，请尝试使用旧版本的jquery。
我尝试使用jquery-1.4，它现在可以工作了。 我尝试使用jquery-1.2.6，它完美无缺。
请参阅有关使用旧的jquery使qtips与fullcalendar一起使用的讨论
我看到两种可能的解决方案。 一，你在文档中添加一个不可见的div ，20px乘20px左右。 在当天单击回调中，您将该位置置于当天中间表格单元格中（通过$('td.fc-day' + dayNr)它并使其可见（您也可以将其定位）在鼠标指针，也许）。 然后调用它上面的click()以显示工具提示。
第二种可能性：你在每个表格单元格上调用qtip （通过$('div.fc-content').find('td')左右）并且根本不使用dayClick 。 或者，您将两个想法结合起来并在dayClick回调中触发qtip事件。
我想，我会选择一种可能性，因为它涉及较少的事件监听器。 但是，它假定您具有相同的工具提示，无论特定日期（但工具提示也可以在显示之前配置）。
希望这是有道理的。
不知道你想要在工具提示中显示什么，但你不能使用它：
$('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view) { $(this).qtip({ content: 'some html content' }); } });
在回调’this’中是点击日的
。 也许做一个函数来根据’date’渲染html并从qtip触发器调用它：
$(this).qtip({ content: yourQtipRenderer(date) });
我没有使用qTip说实话，但根据它的文档，’show’选项确定何时显示工具提示，它似乎默认设置为’mouseover’，所以尝试将其更改为’click’，如这个：
$('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view) { $(this).qtip({ content: 'some html content', show: 'click' }); } });