在FullCalendar dayClick上触发jQuery Qtip

Question

我有一个jquery fullcalendar.当我点击一天来显示选项列表时,我想触发jquery QTip(或其他jquery解决方案(例如灯箱)).这个问题类似于已发布的这个问题,但不同的是足以保证一个新问题.

有一个事件回调,但我不确定如何将其与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

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

这是帖子:

这是代码:

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函数中访问某些事件数据.但同样可以解决这个问题.

干杯,LionHeart