всплывающее окно для полного календаря в JQuery

Question

Мне нужно показать всплывающее окно (всплывающее окно, как в календаре Google) при создании события в полном календаре jquery.

Есть ли лучшие плагины для всплывающих окон, которые отображаются в виде всплывающей подсказки, а также обрабатывают события щелчка (которые я использую для создания / редактирования / удаления событий из всплывающих окон)?

Answer 1

Я использовал QTip с fullCalendar, и он отлично работает!

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

Просто убедитесь, что вы определяете свой qtip в событии fullCalendar eventRender. :)

Единственная проблема, которую я заметил (w / JQuery 1.3), заключается в том, что, когда всплывающее окно qtip появляется, оно начинает появляться за стилизованной сеткой fullCalendar. После первых нескольких кадров все нормально. Кроме того, это вполне может быть проблемой с некоторыми другими вещами, которые у меня есть в моем проекте. Мне лень отлаживать дальше, поэтому ваш пробег может отличаться. ; Р

Answer 2

Я написал свое собственное всплывающее окно, которое отображает 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(); с некоторыми javascripting, чтобы вычислить позицию щелчка мыши и показать всплывающее окно.

Answer 3

Плагин qTip может обрабатывать произвольный контент во всплывающих подсказках, включая возможность назначать обработчики событий и многое другое для расширения функциональности.

См. демонстрации .

Answer 4

Вот моя реализация. я сделал это при наведении курсора, если хотите щелкнуть мышью, просто измените обработчик события

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

Answer 5

Если всплывающее окно не работает для вас, попробуйте использовать более старую версию jquery.

Я пытался с jquery-1.4, и теперь он работает. Я пробовал с jquery-1.2.6, и он отлично работает.

См. обсуждение использования старого jquery для работы qtips

Answer 6

Попробуйте это ... Он основан на ajax, но вы можете удалить его, если хотите ... вы также можете привязать свои события к элементам управления, которые вы хотите.

jquery ajax tooltip

Answer 7

Самому плагину "balloon" не нужно обрабатывать событие click, поскольку fullcalender уже предоставляет сконфигурированный обратный вызов для этого ...

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

Если вы ищете «всплывающие подсказки» в виде всплывающей подсказки, Qtip, как рекомендовано, является хорошим выбором. Вы можете создать всплывающую подсказку на лету с помощью функции eventClick по мере необходимости, возможно, извлекая содержимое подсказки откуда-то еще.