Javascript 在完整日历日触发jQuery Qtip单击

我有一本书。当我点击某一天以显示选项列表时，我想触发（或其他jquery解决方案（如lightbox））。这个问题类似于，但不同程度足以引起一个新问题

对此有一个解决方案，但我不确定如何将其与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日

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

代码如下：

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单击信息可通过此回调访问，因此几乎不可能将提示放在单击日期旁边

非常感谢您的帮助

谢谢

---

蒂姆

我认为有两种可能性可以解决。第一，在文档中添加一个不可见的

div

，20px乘以20px左右。在一天中单击回调，你把它放在中间的表格表格单元中（通过<代码> $$（'td.f.day+diaNr））保存它并使之可见（也可以将其定位在鼠标指针上）。然后对其调用

单击（）

，以显示工具提示

第二种可能性：在每个表单元格上调用

qtip

（按

$（'div.fc-content'）。查找（'td'）

左右），并且根本不使用

dayClick

。或者，将这两种想法结合起来，在

dayClick

回调中触发qtip事件

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

---

希望这有意义。

不知道您想要在工具提示中显示什么，但您不能使用以下选项：

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

在回调中，“this”是单击日期的

。可以执行一个函数，根据“日期”呈现html，并从qtip触发器调用它：

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

---

老实说，我没有使用qTip，但根据其文档，“显示”选项决定何时显示工具提示，它似乎被设置为默认的“鼠标悬停”，因此尝试将其更改为“单击”，如下所示：

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

---

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

您可以首先检查函数是否实际被调用。 尝试以下方法：

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

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

根据knepe的建议，“显示：单击”应显示Qtip。但如果不是，请尝试：

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

最后，不要忘记检查文档：

---

这是应用于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函数中的一些事件数据。但同样，也有解决办法

干杯，

---

LionHeart

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

我尝试使用jquery-1.4，现在它确实可以工作了。我尝试使用jquery-1.2.6，它运行得非常好

---

请参见

您好，我正在尝试理解您所谈论的第一个解决方案。是用于触发QTip的20px div。它只在div上触发吗？看到这篇文章后，我希望解决方案会简单得多。谢谢TimHi Tim，是的，这些解决方案有点复杂。我从未使用过FullCalendar，也许这就是原因。你说得对，div是用来触发QTip的。然而，它不仅在div上触发。也许有一些FC经验的人可以帮忙，对不起，这就是我目前所能得到的。干杯，汤姆！我感谢您的帮助：）您好，这几乎是它，但Qtip的工作不符合预期。当我点击一天，什么都没有发生。当我将鼠标移出，然后将鼠标移到点击的那一天，Qtip就会触发。这一定是因为它仅在鼠标悬停时触发。我怎样才能解决这个问题。我一直在看它的文档，但当我试图实现它时，我的浏览器不断崩溃。请帮帮我，谢谢。可惜这不管用。单击单元格一次不会产生任何效果。再次单击同一单元格会使浏览器暂停约10秒？表中的所有日期都是相同的。没有Qtip出现。你好，狮心，谢谢发帖。我已经确认FullCalendar dayClick回调功能工作正常。这似乎是Qtip的一个问题。症状是：用户点击day cell。什么也没发生。用户单击该单元格的同一天，浏览器将挂起。在高速机器上，它会在大约10秒后渲染Qtip。在速度较慢的机器上，浏览器会通知用户脚本导致系统速度减慢。这里显然有一些讨厌的循环，但我无法调试它。任何建议都将不胜感激。Qtip论坛上的一个建议是使用viewDisplay回调。这是我从未想过的。邮局在这儿。我将很快对原始问题进行修改，以纳入最新发现。当您必须将Qtip应用于事件（即dat中显示的条带）时，Craig的建议非常有用