在 FullCalendar dayClick 上触发 jQuery Qtip

Question

我有一个jquery fullcalendar。当我单击一天以显示选项列表时，我想触发 jquery QTip（或其他 jquery 解决方案（如灯箱））。这个问题与this question already posted 相似，但不同之处足以保证提出一个新问题。

有一个 event callback 用于此，但我不确定如何将其与 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 被集成以悬停在事件上。

    $('#calendar').fullCalendar({
    ...
    eventRender: function(event, element, view)
    {
        element.qtip({ content: "My Event: " + event.title });
    }
   ...
 });

此示例显示了用于触发 QTIP 的悬停回调。

现在我只需要把这两个例子结合起来……

2010 年 5 月 26 日更新

Qtip 论坛上的 Craig 建议使用 viewDisplay 回调作为 DayClick 回调的替代方案，这似乎会导致各种问题。 （锁定浏览器是最突出的）。

Here is the post:

代码如下：

viewDisplay: function() {
                  var calendar = $(this);

                $(this).qtip({
                   content: 'TEST',
                   position: {
                 my: 'top center',
                 at: 'top center'
                   },
                   show: 'click',
                   hide: 'click',
                   style: {
                 tip: true
                   }
                })
         },

当点击一天时，此方法会显示一个工具提示。但是有一些问题。

1. 据我所知，无法通过此回调访问日期信息，因此很难显示特定于单击日期的工具提示。
2. 无法通过此回调访问 X 和 Y 点击信息，因此几乎不可能将提示放在点击日期旁边。

非常感谢所有帮助！

谢谢，

提姆

Answer 1

这将作为 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 函数中访问一些事件数据。但同样也有解决方法。

干杯， 狮心

Answer 2

我现在正在使用 fullCalendar 和 Qtip 一周，对我来说 knepe 的解决方案应该在理想情况下工作。

您可以先检查该函数是否实际被调用。 尝试类似：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
         alert(date);
        }
});

如果单击某一天会显示该日期的警报，那么问题出在 Qtip 实现上。如果您没有收到警报，则问题出在 fullCalendar 实现上。

正如 knepe 所建议的，“显示：点击”应该显示 Qtip。但如果不是，请尝试：

show: { when: { event: 'click' } }

最后，别忘了查看文档： http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 3

如果弹出窗口不适合您，请尝试使用旧版本的 jquery。

我尝试使用 jquery-1.4，它现在可以工作了。我用 jquery-1.2.6 试过了，效果很好。

见a discussion about using older jquery for making qtips work with fullcalendar

Answer 4

我看到了两种可行的方法。一，你在文档中添加一个不可见的div，20px 乘以 20px 左右。在当天点击回调中，您将其定位在相关的一天表格单元格的中间（通过$('td.fc-day' + dayNr) 获取它）并使其可见（您也可以将其定位在鼠标指针上，也许）。然后在其上调用click() 以使工具提示出现。

第二种可能性：您在每个表格单元格上调用qtip（通过$('div.fc-content').find('td') 左右）并且根本不使用dayClick。或者，您将这两种想法结合起来，在dayClick 回调中触发 qtip 的事件。

我想我会选择一种可能性，因为它涉及的事件侦听器较少。但是，它假定您拥有相同的工具提示，无论具体日期如何（但也可以在显示之前配置工具提示）。

希望这有意义。

Answer 5

不知道你想在工具提示中显示什么，但你不能用这个：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content' });
    }
});

在回调“this”中是点击日的<td>。也许做一个函数来根据“日期”呈现 html 并从 qtip 触发器中调用它：

$(this).qtip({ content: yourQtipRenderer(date) });

Answer 6

老实说，我没有使用过 qTip，但根据其文档，“显示”选项确定何时显示工具提示，它似乎默认设置为“鼠标悬停”，因此请尝试将其更改为“点击” '，像这样：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content', show: 'click' });
    }
});