在FullCalendar dayClick上触发jQuery Qtip [英] Trigger jQuery Qtip on FullCalendar dayClick

问题描述

我有一个 jquery fullcalendar 。我想触发 jquery QTip （或其他jquery解决方案（如Lightbox）），当我点击一天以显示一个选项列表。这个问题类似于已发布的这个问题，但是不同于足以保证新问题。

I have a jquery fullcalendar. I would like to trigger jquery QTip (or other jquery solution (such as a lightbox)) when I click on a day to bring up a list of options. This question is similar to this question already posted, however different enough to warrant a new question.

有一个事件回调，但我不确定如何将它与jQuery Qtip集成...

There is an event callback for this but I am unsure how to integrate this with 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');

    }
});

这显然会带来警报并更改点击的单元格的颜色。

This obviously brings up alerts and changes the colour of the clicked cell red.

这是另一个示例，显示将QTip整合到悬停事件。

Here is another example showing QTip being integrated to hover on events.

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

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

This example shows the hover callback being used to trigger QTIP.

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

Now I just need to combine these two examples...

更新26/05/2010

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

Craig on the Qtip forums has suggested using the viewDisplay callback as an alternative to the DayClick callback which seems to be causing all sorts of problems. (Locking up the browser being the most prominent).

这是帖子：

这是代码：

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

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

此方法显示一天点击时的工具提示。然而，有一些问题。

This method shows a tooltip when a day is clicked. A few problems however.

1. 据我所知，通过此回调无法访问日期信息，很难显示工具提示


2. 没有通过此回调可以访问X和Y点击信息，因此几乎不可能将提示放在点击的日期旁边。

所有的帮助非常感谢！

谢谢，

Tim

推荐答案

这个CSS应用于Qtip。

This goes as css to be applied to the 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函数：

And this is the dayClick function :

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不是每次点击同一个日期时都会创建。

The if statement inside the dayClick function makes sure that Qtip is not created everytime you click on the same date.

可能会出现的一个小问题是，如果您想要在dayClick函数中访问一些事件数据。但是，再次可以解决这个问题。

One small problem that may come, is if you want to access some of your event data inside dayClick function. But again there can be workaround for that as well.

干杯，
LionHeart

Cheers, LionHeart

这篇关于在FullCalendar dayClick上触发jQuery Qtip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！