jQuery fullCalendar和qTip [英] jQuery fullCalendar and qTip

问题描述

我期待在使用fullCalendar和使用qTip显示使用eventMouseover的说明。

有没有人成功地做到这一点还是知道解决办法吗？我已经google'd并尝试实施
这篇文章但我没有喜乐。我唯一的工作就是进入一个循环，并使我的浏览器崩溃。

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

冯Schmytt。

更新：这是我开始使用的代码（知道它是一个示例脚本，但如果我可以将qTip集成，我可以继续）。我有qTip等准备使用。我现在不知道从哪里开始？
$ b
$ b 更新日期：2010年7月15日。 $ c>< script type ='text / javascript'>

$（document）.ready（function（）{

var date = new Date（）;
var d = date.getDate（）;
var m = date.getMonth（）;
var y = date.getFullYear（）;
$ b $（'＃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），
说明： '等等等等等等等等等等等等等等'
}，
{
标题： '龙事件'，
开始，新的日期（Y，M，D- 5）
端，新的日期（Y，M，d-2），
说明： '等等等等等等等等等等等等等等'
}，
{
标题：'会议'，
开始：新达te（y，m，d，10，30），
allDay：false，
描述：'Blah等等等等等等等等等等等等等等等等等等。 }）;
}）;

< / script>

解决方案

尝试下载jquery.qtip-1.0.js

RC似乎不起作用，但是1.0（我在另一个论坛上发现）。我已经QTip与此代码运行：

  eventRender：功能（事件，元素）{
 element.qtip（{ 
 content：{
 title：{text：event.title}，
 text：'< span class =title>开始：< / span>'+（$。 fullCalendar.formatDate（event.start，'hh：mmtt'））+'< br>< span class =title>描述：< / 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 
 }，
提示：'topLeft'，
 
类：{
工具提示：'ui-widge t'，
提示：'ui-widget'，
标题：'ui-widget-header'，
内容：'ui-widget-content'
} 
} 
}）; 
} 
  

I'm looking at using fullCalendar and using qTip to display a description using eventMouseover.

Has anyone managed to do this or know of a solution? I've google'd and also tried implementing this post but i've had no joy. The only time I got it to work it got into a loop and crashed my browser.

Any advice / support would be greatly appreciated.

Von Schmytt.

UPDATED: Here's the code i'm starting off with (aware it's an example script but, if I could get qTip integrated I could progress). I have qTip, etc ready to use. I just don't know where to start with this now? Thanks again.

UPDATED: 15th July 2010. Can anyone help please?

<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>

解决方案

Try downloading jquery.qtip-1.0.js

The RC's don't seem to work but 1.0 does (I found that on another forum). I have QTip working with this code:

    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' 
                } 
            } 
        });
    }    

这篇关于jQuery fullCalendar和qTip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！