在jQuery的完整的日历弹出

StackOverflow https://stackoverflow.com/questions/1944238

题

我需要显示一个弹出（弹出气球如在谷歌日历），并创建在jquery的完整的日历的事件。

，它展示的气球，也弹出其处理点击事件（我使用创建/编辑/从弹出删除事件）任何插件最好？

有帮助吗？

解决方案 3

我写它显示采用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>

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

其他提示

我用 QTip 与fullCalendar和它的工作太棒了！

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

只要确保你定义在fullCalendar的eventRender事件您qtip。 ：）

我注意到（W / JQuery的1.3），唯一的问题是，当qtip弹出变淡式，它开始淡入fullCalendar的风格电网落后。首先〜几帧后，它的罚款。此外，这很可能是与我在我的项目也正在进行一些其他的东西有问题。我懒得进一步调试它，你的里程可能会有所不同。 ; P

在 qTip 插件可以处理在工具提示任意内容，包括分配事件处理程序的能力，并且诸如此类的东西来获得更丰富的功能。

请参阅演示。

下面是我的实现。我这样做悬停，BT，如果你想点击，只是改变了事件处理程序

$('#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) {

                                }

                    });

和，至少：

.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工作

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top