jQuery fullCalendar和qTip

Question

jQuery fullCalendar和qTip

4

我正在考虑使用fullCalendar，并使用qTip在eventMouseover时显示描述。是否有人成功做到这一点或知道解决方案？我已经搜索了谷歌并尝试了实现此帖子，但没有成功。唯一一次我让它工作了，它就进入了一个循环并崩溃了我的浏览器。非常感谢任何建议/支持。 Von Schmytt。

更新：这是我开始使用的代码（意识到这是一个示例脚本，但如果我能集成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>

- Von Schmytt

需要代码示例来帮助您。 - Mark

3个回答

2

我建议查看http://craigsworks.com/projects/forums/thread-google-calendar-like-bubble-for-jquery-fullcalendar，这是与jQuery FullCalendar类似的谷歌日历气泡的一个例子。

我已经使用以下内容使其工作（有点）：


      viewDisplay: function(view) { 
         var calendar = $(this);
     alert('Google calendars loaded');
         $('.fc-event').each(function(){
            // Grab event data
            var title = $(this).find('.fc-event-title').text(),
               data = calendar.data('fullCalendar').clientEvents(function(event){
                  return event.title === title;
               })[0];
            var qtipContent = data.description ? data.description : data.title;
            $(this).qtip({
               content: qtipContent,
               position: {
                  corner: {
                     target: 'topRight',
                     tooltip: 'bottomLeft'
                  }
               },
               show: 'mouseover',
               hide: 'mouseout',
               style: {
                 width: 200,
                 padding: 5,
                 background: '#A2D959',
                 color: 'black',
                 textAlign: 'center',
                 border: {
                    width: 7,
                    radius: 5,
                    color: '#A2D959'
                 },
                 tip: true
               }
            });
         });
         return false;
    },

目前来看，我的 qtips 只有在弹出警告框后才能正常工作（原因尚不清楚）。另外，我的 qtips 只能在 Firefox 和 IE6 中正常工作（这太奇怪了！）。

- Sunset Bill

我在这方面很菜。完全没有任何进展！ :-( - Von Schmytt

你使用的是哪个版本的jquery？我曾经试着用jquery 1.4.2，但一直失败。后来换成了jquery 1.3.2，事情开始有所进展。但仍然无法在IE7或Opera上运行（没有Safari进行测试），如果去掉那个愚蠢的警告框，就什么也看不到。 - Sunset Bill

我已经尝试过使用jQuery 1.3.2，因为在以前的博客中发现了这个版本，但是没有成功。如前面的评论所述...我很菜。 :-) - Von Schmytt

我明白你的意思。我自己也不得不暂时放弃它，因为我有一个截止日期，仍然只能通过那个恼人的警报在两个前面提到的浏览器（没有IE7、Safari、Opera或Chrome）中使其工作。 - Sunset Bill

同样地。由于截止日期已过，我已经放弃了它。遗憾的是，这个不错的功能将不会出现在现场网站上。无论如何，感谢大家的帮助。PVS - Von Schmytt

0

虽然我没有专门使用qtip，但我使用了类似于你使用的eventRender回调函数，就像这里所述here。

你的代码应该长这样:

$('#calendar').fullCalendar({
events: [
    {
        title: 'My Event',
        start: '2010-01-01',
        description: 'This is a cool event'
    }
    // more events here
],
eventRender: function(event, element) {
    element.qtip({
        content: event.description
    });
}

});

如果这有帮助的话，请让我知道，否则今晚回家后我可以仔细看一下。

- Nick-ACNB

感谢您的帮助，但我发现eventRender与qTip不兼容。viewDisplay似乎是前进的方向，但是...我不知道。任何其他形式的工具提示都可以满足我的需求。再次感谢PVS - Von Schmytt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- orolo · Accepted Answer

尝试下载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' 
                } 
            } 
        });
    }