jQuery fullCalendar 和 qTip

Question

我正在考虑使用 fullCalendar 并使用 qTip 通过 eventMouseover 显示描述。

有人设法做到这一点或知道解决方案吗？我已经谷歌搜索并尝试实现 this post但我没有任何快乐。我唯一一次让它工作时它陷入了循环并导致我的浏览器崩溃。

任何建议/支持将不胜感激。

冯·施密特。

更新:这是我开始使用的代码(知道这是一个示例脚本，但是，如果我可以集成 qTip，我可以取得进展)。我有 qTip 等可以使用。我现在不知道从哪里开始？再次感谢。

更新:2010 年 7 月 15 日。有人可以帮忙吗？

<script type='text/javascript'>

     $(document).ready(function() {

      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();

      $('#calendar').fullCalendar({
       theme: false,
       header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
       },
       editable: false,
       events: [
        {
         title: 'All Day Event',
         start: new Date(y, m, 1),
                        description: 'Blah blah blah blah blah blah blah'
        },
        {
         title: 'Long Event',
         start: new Date(y, m, d-5),
         end: new Date(y, m, d-2),
                        description: 'Blah blah blah blah blah blah blah'
        },
        {
         title: 'Meeting',
         start: new Date(y, m, d, 10, 30),
         allDay: false,
                        description: 'Blah blah blah blah blah blah blah'
        }
       ]
      });
     });

    </script>

Answer 1

尝试下载 jquery.qtip-1.0.js

RC 似乎不起作用，但 1.0 可以(我在另一个论坛上发现)。我有 QTip 使用此代码:

    eventRender: function (event, element) {
        element.qtip({    
            content: {    
                title: { text: event.title },
                text: '<span class="title">Start: </span>' + ($.fullCalendar.formatDate(event.start, 'hh:mmtt')) + '<br><span class="title">Description: </span>' + event.description       
            },
            show: { solo: true },
            //hide: { when: 'inactive', delay: 3000 }, 
            style: { 
                width: 200,
                padding: 5,
                color: 'black',
                textAlign: 'left',
                border: {
                width: 1,
                radius: 3
             },
                tip: 'topLeft',

                classes: { 
                    tooltip: 'ui-widget', 
                    tip: 'ui-widget', 
                    title: 'ui-widget-header', 
                    content: 'ui-widget-content' 
                } 
            } 
        });
    }