jQuery jquery中完整日历的弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1944238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
popup for full calendar in jquery
提问by Prasad
I need to show a popup (balloon popup as in google calendar) while creating an event in the jquery full calendar.
在 jquery 完整日历中创建事件时，我需要显示一个弹出窗口（如 google 日历中的气球弹出窗口）。
Any best plugins for the popup which shows as balloon and also which handles the click events (which I am using to create/edit/delete events from popup)?
弹出窗口的任何最佳插件显示为气球并处理点击事件（我正在使用它从弹出窗口创建/编辑/删除事件）？
采纳答案by Prasad
I wrote my own popup which displays using div with absolute position.
我编写了自己的弹出窗口，它使用具有绝对位置的 div 显示。
<div id="addEvent" style="display: none; position: absolute; width: 400px; z-index: 1000;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="PopupContainer">
<div class="header">
<img src="<%= ResolveUrl("~/Content/images/closepopup.gif") %>" id="addCalEventClose"
title="Close" alt="Close" class="cursorhand" />
</div>
<div class="clear" />
<div class="popup">
//Your content goes here
</div>
</div>
<div class="clear" />
<br />
</td>
</tr>
<tr>
<td>
<div style="margin-top: -1px">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="taC">
<img src="<%= ResolveUrl("~/Content/images/balloon_arrow.gif") %>" title="" alt=""
id="addEventBalloon" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
call the $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn();with some javascripting to calculate the position of mouse click and show the popup.
$('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn();使用一些 javascripting调用 来计算鼠标单击的位置并显示弹出窗口。
回答by duskstriker
I've used QTipwith fullCalendar and it's working great!
我已经将QTip与fullCalendar一起使用，并且效果很好！
$('#calendar').fullCalendar({
...
eventRender: function(event, element, view)
{
element.qtip({ content: "My Event: " + event.title });
}
...
});
Just make sure you're defining your qtip in fullCalendar's eventRender event. :)
只要确保你在 fullCalendar 的 eventRender 事件中定义你的 qtip。:)
The only issue I've noticed (w/ JQuery 1.3) is that when the qtip popup fades-in, it starts its fade-in behind fullCalendar's styled grid. After that first ~few frames, it's fine. Also, this could very well be a problem with some other stuff I have going on in my project. I'm too lazy to debug it further so your mileage may vary. ;p
我注意到的唯一问题（使用 JQuery 1.3）是当 qtip 弹出窗口淡入时，它会在 fullCalendar 样式的网格后面开始淡入。在最初的〜几帧之后，就可以了。此外，这很可能是我在项目中进行的其他一些事情的问题。我懒得进一步调试它，所以你的里程可能会有所不同。;p
回答by cletus
回答by Toni Michel Caubet
Here is my implementation. i did this on hover, bt if you want click, just change the event handler
这是我的实现。我是在悬停时完成的，如果你想点击，只需更改事件处理程序
$('#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 = '<span class="nube"><h2>'+event.title+'</h2><img src="'+event.avatar+'" /> <p class="text">'+event.name+'</p><p>'+event.start+' <br /> '+event.end+'</p><p><a href="/post.php?blogid='+event.id+'">read_more</a></p></span>';
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) {
}
});
and, at least:
并且，至少：
.nube{ position: absolute;left:0;top:0}
回答by T. Stone
The "balloon" plugin itself doesn't need to handle the click event, as fullcalender already provides a configured callback for that...
“气球”插件本身不需要处理点击事件，因为 fullcalender 已经为此提供了一个配置的回调......
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent){
// ... your code here ...
}
});
If you are looking for tooltip style "balloons", Qtip as recommended is a good choice. You could create the tooltip on the fly with the eventClick function on an as-needed basis, perhaps fetching the contents of the tip from somewhere else.
如果您正在寻找工具提示样式的“气球”，那么推荐的 Qtip 是一个不错的选择。您可以根据需要使用 eventClick 函数即时创建工具提示，也许可以从其他地方获取提示的内容。
回答by Krunal
Try this one... It is ajax based but you can remove it if you want.. you can also bind your events to the controls your want.
试试这个……它是基于 ajax 的，但如果你愿意，你可以删除它……你也可以将你的事件绑定到你想要的控件上。
回答by phauly
If the popup does not work for you, try to use an older version of jquery.
如果弹出窗口不适合您，请尝试使用旧版本的 jquery。
I tried with jquery-1.4 and it does now work. I tried with jquery-1.2.6 and it works perfectly.
我尝试使用 jquery-1.4，现在它可以工作了。我尝试使用 jquery-1.2.6，它运行良好。
See a discussion about using older jquery for making qtips work
