在jquery中弹出完整日历

我需要在jquery完整日历中创建一个弹出窗口(如谷歌日历中的气球弹出窗口)。

弹出窗口的任何最好的插件,显示为气球,还处理点击事件(我用来创建/编辑/删除弹出窗口中的事件)?

我使用了QTip和fullCalendar,它运行得很好!

$('#calendar').fullCalendar({ ... eventRender: function(event, element, view) { element.qtip({ content: "My Event: " + event.title }); } ... }); 

只需确保在fullCalendar的eventRender事件中定义qtip。 🙂

我注意到的唯一问题(w / JQuery 1.3)是当qtip popup淡入时,它会在fullCalendar的样式网格后面开始淡入淡出。 在第一帧〜几帧之后,没关系。 此外,这可能是我在项目中遇到的其他一些问题。 我懒得调试它,所以你的里程可能会有所不同。 ,p

qTip插件可以处理工具提示中的任意内容,包括分配事件处理程序以及提供更丰富function的内容。

看演示 。

我编写了自己的弹出窗口,使用具有绝对位置的div显示。

  

调用$('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); 用一些javascripting来计算鼠标点击的位置并显示弹出窗口。

这是我的实施。 我是在hover时做的,如果你想点击,只需更改事件处理程序

 $('#calendario').fullCalendar({ events: "/includes/json-events.php", eventDrop: function(event, delta) { alert(event.title + ' was moved ' + delta + ' days\n' + '(should probably update your database)'); }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); }, eventMouseover: function( event, jsEvent, view ) { var item = $(this); if(item.find('.nube').length == 0){ var info = '

'+event.title+'

'+event.name+'

'+event.start+'
'+event.end+'

read_more

'; item.append(info); } if(parseInt(item.css('top')) <= 200){ item.find('.nube').css({'top': 20,'bottom':'auto'}); item.parent().find('.fc-event').addClass('z0'); } item.find('.nube').stop(true,true).fadeIn(); }, eventMouseout: function( event, jsEvent, view ) { var item = $(this); item.find('.nube').stop(true,true).fadeOut(); }, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, eventRender: function(event, element) { } });

至少:

 .nube{ position: absolute;left:0;top:0} 

“气球”插件本身不需要处理click事件,因为fullcalender已经为此提供了一个配置的回调…

  $('#calendar').fullCalendar({ eventClick: function(calEvent, jsEvent){ // ... your code here ... } }); 

如果您正在寻找工具提示风格的“气球”,推荐的Qtip是一个不错的选择。 您可以根据需要使用eventClick函数动态创建工具提示,也许从其他地方获取提示的内容。

尝试这个…它是基于ajax但你可以删除它,如果你想..你也可以将你的事件绑定到你想要的控件。

jquery ajax工具提示

如果弹出窗口不适合您,请尝试使用旧版本的jquery。

我尝试使用jquery-1.4,它现在可以工作了。 我尝试使用jquery-1.2.6,它完美无缺。

请参阅有关使用旧jquery进行qtips工作的讨论