Триггер jQuery Qtip на FullCalendar dayClick

у меня есть jquery fullcalendar. Я хотел бы вызвать jquery QTip (или другое решение jquery (например, Лайтбокс)), когда я нажимаю на день, чтобы вызвать список опций. Этот вопрос похож на этот вопрос уже отвечал, однако достаточно разные, чтобы оправдать новый вопрос.

есть событие обратного вызова для этого, но я не уверен, как интегрировать это с jQuery Qtip...

    $('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            alert('Clicked on the entire day: ' + date);
        }else{
            alert('Clicked on the slot: ' + date);
        }

        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

        alert('Current view: ' + view.name);

        // change the day's background color just for fun
        $(this).css('background-color', 'red');

    }
});

этот очевидно, вызывает оповещения и изменяет цвет нажатой ячейки красного цвета.

вот еще один пример, показывающий, что QTip интегрируется для наведения курсора на события.

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

в этом примере показан обратный вызов наведения, используемый для запуска QTIP.

Теперь мне нужно объединить эти два примера...

обновление 26/05/2010

Крейг на форумах Qtip предложил использовать обратный вызов viewDisplay в качестве альтернативы Обратный вызов DayClick, который, кажется, вызывает всевозможные проблемы. (Блокировка браузера является наиболее заметным).

вот такое сообщение:

вот код:

viewDisplay: function() {
                  var calendar = $(this);

                $(this).qtip({
                   content: 'TEST',
                   position: {
                 my: 'top center',
                 at: 'top center'
                   },
                   show: 'click',
                   hide: 'click',
                   style: {
                 tip: true
                   }
                })
         },

этот метод показывает всплывающую подсказку при выборе дня. Однако несколько проблем.

  1. насколько я могу судить, нет никакой информации о дате, доступной через этот обратный вызов, что затрудняет отображение подсказки, специфичной для даты нажатый.
  2. нет информации о кликах X и Y, доступной через этот обратный вызов, что делает почти невозможным поместить наконечник рядом с датой щелчка.

вся помощь очень ценится!

спасибо,

Тим

6
events fullcalendar javascript jquery qtip

6 ответов

это идет как css для применения к Qtip.

$.fn.qtip.styles.tipstyle = {
    width: 400,
    padding: 0,
    background: '#FFFFFF',
    color: 'black',
    textAlign: 'center',
    border: {
        width: 3,
        radius: 4
    },
    tip: 'bottomMiddle',
    name: 'dark'
}

и это функция dayClick:

dayClick: function(date, allDay, jsEvent, view) {
    if (typeof $(this).data("qtip") !== "object") {
        $(this).qtip({
            content: {
                prerender: true,
                text: "Hello World"
            },
            position: {corner: {tooltip: 'bottomMiddle', target: 'topMiddle'}},
            style: {
                name: 'tipstyle'
            },
            show: {
                when: {event: 'click'},
                ready: true
            },
            hide: {
                fixed: true
            }
        });
    }
}

оператор if внутри функции dayClick гарантирует, что Qtip не создается каждый раз, когда вы нажимаете на ту же дату.

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

Ура, Львиное сердце!--3-->

7

Я работаю с fullCalendar и Qtip уже неделю, и для меня решение knepe должно работать в идеальном случае.

вы можете сначала проверить, действительно ли функция вызывается или нет. Попробуйте что-то вроде :

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
         alert(date);
        }
});

если нажатие на день дает вам предупреждение с этой датой, то проблема заключается в реализации Qtip. Если вы не получите предупреждение, проблема заключается в реализации fullCalendar.

как предложил knepe, "показать: нажмите" должен показывать Qtip. Но если это не так, попробуйте :

show: { when: { event: 'click' } }

и наконец, не забудьте проверить документы : http://craigsworks.com/projects/qtip/docs/reference/#show

2

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

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

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

2

Я вижу две возможности, которые могут сработать. Во-первых, вы добавляете невидимый div в документе, в 20px раз в 20px и так. В день нажмите обратный вызов, вы позиционируете, что в середине дня ячейки таблицы в вопросе (получить его с помощью $('td.fc-day' + dayNr)) и сделать его видимым (вы также можете разместить его на указателе мыши, возможно). Тогда звоните click() на нем появится всплывающая подсказка.

вторая возможность: вы звоните qtip на каждой ячейке таблицы (по $('div.fc-content').find('td') или так) и не использовать dayClick на всех. Или вы объединяете обе идеи и запускаете событие для qtip в dayClick обратный.

Я бы пошел на возможность один, я думаю, потому что он включает в себя меньше слушателей событий. Однако предполагается, что у вас есть одна и та же подсказка независимо от конкретного дня (но подсказку также можно настроить перед ее отображением).

надеюсь, что это имеет смысл.

1

не знаю точно, что вы хотите показать в подсказке, но вы не можете использовать это:

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content' });
    }
});

вызов 'это' - это <td> нажатого день. Возможно, сделайте функцию для рендеринга html на основе "даты" и вызовите ее из триггера qtip:

$(this).qtip({ content: yourQtipRenderer(date) });
1

Я не использовал qTip, чтобы быть честным, но в соответствии с его документацией опция "показать" определяет, когда показывать всплывающую подсказку, похоже, по умолчанию установлено значение "mouseover", поэтому попробуйте изменить его на "click", например:

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content', show: 'click' });
    }
});
1