在FullCalendar日触发jQuery Qtip点击

Question

我有一个jquery fullcalendar。我想要触发jquery QTip（或其他jquery解决方案（例如lightbox）），当我点击一天以显示选项列表时。这个问题类似于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的悬停回调。

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

UPDATE 26/05/2010

克雷格在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

这正好为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函数内声明可以确保Qtip不创建每次你点击相同的日期。

可能出现的一个小问题是，如果您想访问dayClick函数中的某些事件数据。但同样可以解决这个问题。

欢呼声中，狮心王

Answer 2

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

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

我想去可能性之一，我猜，因为它涉及更少的事件监听器。但是，它假定您具有相同的工具提示，无论具体日期如何（但工具提示也可以在显示之前进行配置）。

希望是有道理的。

Answer 3

并不确切地知道你要在工具提示中显示什么，但你不能用这个：

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

在回调“这个”是点击的一天<td>。也许做一个功能的基础上，“日期”来渲染HTML，并从qtip触发称之为：

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

Answer 4

我没有被使用qTip是诚实的，但根据它的文档“显示”选项确定当显示工具提示，它似乎被设置为“鼠标悬停”为默认，所以尽量将其更改为“点击”，像这样：

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

Answer 5

我与fullCalendar和Qtip工作了一个星期，现在，对我来说，膝盖的解决方案应该在理想的情况下工作。

您可以先检查函数是否真的被调用。 试着这么做：

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

如果点击每天为您提供了该日期警报，那么问题在于Qtip实施。如果您没有收到警报，问题是使用fullCalendar实现。

正如膝盖所示，'show：click'应显示Qtip。但是，如果不是，请尝试：

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

最后，不要忘记检查文档： http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 6

如果弹出不为你工作，尝试使用jquery的旧版本。

我试着用jquery-1.4，它现在可以工作。我试着用jquery-1.2.6，它完美的作品。

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