javascript - 在 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 的悬停回调。

现在我只需要结合这两个例子...

更新 26/05/2010

Craig 在 Qtip 论坛上建议使用 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

这是应用于 Qtip 的 css。

$.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 函数中的一些事件数据。但同样也可以有解决方法。

干杯，狮心王