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

Question

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

Существует event callback для этого, но я не уверен, как интегрировать это с 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.

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

UPDATE 26/05/2010

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

Here is the post:

Вот код:

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, доступной через этот обратный вызов, что делает невозможным поставить подсказку рядом с нажатой датой.

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

Спасибо,

Tim

Answer 1

Это идет как 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 
      } 
     }); 
    } 
} 

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

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

Приветствия, LionHeart

Answer 2

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

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

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

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

Answer 3

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

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

В обратном вызове «это» является <td> из щелкнутого дня. Может быть, сделать функцию для отображения HTML на основе «дата» и вызывать его из QTIP триггера:

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

Answer 4

Я не использую QTIP быть честным, но в соответствии с документацией опция «показать» определяет когда, чтобы показать всплывающую подсказку, это, кажется, установлен в «наведении курсора мыши» по умолчанию, так что попробуйте изменить его на «кнопку», как это:

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

Answer 5

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

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

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

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

Как предложено knepe, 'show: click' должен показать Qtip. Но если это не так, попробуйте:

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

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

Answer 6

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

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

См a discussion about using older jquery for making qtips work with fullcalendar