jQuery qTip и полный календарь с agendaWeek в качестве представления

#javascript #jquery #fullcalendar #qtip

#javascript #jquery #полный календарь #qtip

Вопрос:

Я создаю веб-сайт, который любой может встроить в наш календарь с помощью iFrame. Этот календарь использует полный календарь и qTip.

Я использую полный календарь с представлением по умолчанию agendaWeek , проблема в том, что когда я нажимаю на событие, появляется qtip, но когда я прокручиваю вниз, всплывающее окно qtip выглядит fixed так. Это очень сложно объяснить, поэтому вот jsfiddle

Вот мой код:

 $("#calendar").fullCalendar({
  defaultView: 'agendaWeek',
  allDayDefault: false,
  allDaySlot: false,
  columnFormat:{
    week: 'ddd dS'
  },
  events:{
    url:"http://<?=$rootUrl;?>/studios/fetch_event_calendar_public/",
    data:{
      id:"<?=$studio_id;?>",
    }
  },
  eventRender: function(event,element,view){
   ... ... ... ..
    jQuery(element).qtip({ // Grab some elements to apply the tooltip to
      id: 'calendar',
      content: {
        text: html,
        button: 'Close',
        title: 'Event Details',
      },
      style: 'qtip-light',
      position: {
        my: 'bottom center',
        at: 'top center'
      },
      show:{
        event:'click',
      },
      hide:{
        event: 'unfocus'
      },
    });
  },
  windowResize: function( view ) {
    calendar.fullCalendar('option', 'height', $(window).height() - 40);
  }
});
 

Итак, я хочу, чтобы при прокрутке полного календаря вниз или вверх qtip не имел позиции fixed , он должен просто оставаться там, где находится событие.

Ваша помощь будет высоко оценена! Спасибо!

Комментарии:

1. qtip имеет абсолютное положение. Может быть, вы могли бы прослушать событие прокрутки и обновить верхнюю часть qtip вручную?

2. @merlin это звучит как хорошая идея! Спасибо за это! но тоже сложно. Может быть, есть более простой способ? Я попробую это 🙂

3. Кажется, qTip 1.0 скоро устареет. Почему бы не взглянуть на qTip2, у них есть демонстрация , показывающая, как интегрировать qTip2 в FullCalendar.

4. @merlin Это qTip2 🙂

5. упс, просто игнорируйте мой комментарий или нет..