Fullcalendar - события календаря google + eventrender

На существующем сайте, на котором теперь установлена ​​версия 3.9.0 (ранее версия 3.4.0) программы FullCalendar, которая используется для отображения содержимого из различных календарей Google, больше не отображаются всплывающие окна событий при нажатии на событие, чтобы отобразить полное описание события. . Вместо этого игнорируется следующий код:

        eventClick: function(calEvent, jsEvent, view) {
        showEventInformation(calEvent);

        // Prevent redirect to Google Calendar
        return false;
        }

Мне было интересно, может ли eventRender отображать информацию о событии? Мой поиск в текущих документах FullCalendar не выявил никакой информации, которая показывала бы, как это может быть достигнуто, и возможно ли это вообще. Я не уверен, как интегрировать / использовать единственный найденный мной код:

eventRender: function(event, element) {
  element.qtip({
  content: event.description
  });
}

Будем очень благодарны любой помощи.

"код игнорируется" ... что вы имеете в виду? AFAIK обратный вызов eventClick не был удален. Ошибка какая-то, что ли? Вы установили точку отладки в своем браузере, чтобы увидеть, выполняется ли обратный вызов eventClick или нет? Если да, что произойдет дальше, успешно ли он выполняет вашу функцию showEventInformation, или есть ошибка в консоли или что-то в этом роде? Если он вообще не запускает обратный вызов, что происходит вместо этого? Стандартное поведение (без вашего кода) заключается в том, что страница переходит к этому событию на главном веб-сайте Календаря Google. Короче говоря, нам нужно больше информации / контекста.

ADyson 11.04.2018 14:21

Кстати, второй фрагмент кода, который вы нашли, отлично работает, если вы интегрируете плагин qtip - это еще один сторонний плагин, вы можете получить его на любом CDN, и у него есть веб-сайт с документацией и т. Д.

ADyson 11.04.2018 14:22

Спасибо за ваш ответ.

ridgedale 11.04.2018 19:34

... Я не знал, что поведение по умолчанию при нажатии на событие Google приводит пользователя на сайт Google. Вот что на самом деле происходит. Я бы хотел, чтобы сведения о событии отображались во всплывающем окне без перенаправления пользователя на веб-сайт Google. Я попробую интегрировать плагин qtip и расскажу, как у меня дела. Еще раз спасибо.

ridgedale 11.04.2018 19:40

Это поведение по умолчанию, потому что событие включает свойство «url» - при нажатии браузер переходит к URL-адресу, определенному для этого события. Это стандартно для событий fullCalendar в целом, а не только для событий, производных от Google. Теоретически код, который у вас есть для eventClick, должен работать, я бы подумал ... если нет ошибки или задокументированного изменения поведения, при котором возврат false больше не отменяет щелчок по умолчанию. Мне пришло в голову, что еще один способ обойти это - обработать обратный вызов eventDataTransform и удалить свойство url из каждого события.

ADyson 11.04.2018 20:50

Еще раз спасибо за вашу помощь, ADyson. В конце концов, мне удалось добиться того, чем я был после использования popper.js, добавив следующий код:

ridgedale 11.04.2018 23:14

eventRender: функция (eventObj, $ el) {$ el.popover ({заголовок: eventObj.title, контент: eventObj.description, триггер: 'наведение', размещение: 'сверху', контейнер: 'тело'}); },

ridgedale 11.04.2018 23:14
2
7
1 277
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Решением было использовать popper.js следующим образом:

eventRender: function(eventObj, $el) {
    $el.popover({
      title: eventObj.title,
      content: eventObj.description,
      trigger: 'hover',
      placement: 'top',
      container: 'body'
    });
  },

Еще раз спасибо ADyson за помощь.

Ответ принят как подходящий

Чтобы прояснить и избежать путаницы: решение для отображения всплывающих подсказок было достигнуто для календаря Один с использованием следующего кода:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />

<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.css' rel='stylesheet' media='print' />

<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>

<style>

  html, body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 40px auto;
  }

  #calendar a.fc-event {
    color: #fff; /* bootstrap default styles make it black. undo */
  }

</style>

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>

<script>

  $(function() {

    $('#calendar').fullCalendar({

      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listYear'
      },

      displayEventTime: false, // don't show the time column in list view


      googleCalendarApiKey: 'MyAPIkey',
// Single Calendar
      events: {
        googleCalendarId: 'gCalID-1',
            color: 'green',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-1
      },

      eventRender: function(eventObj, $el) {
        $el.popover({
          title: eventObj.title,
          content: eventObj.description,
          trigger: 'hover',
          placement: 'top',
          container: 'body'
        });
      }

    });

  });

</script>

</head>
<body>

  <div id='calendar'></div>

</body>

</html>

Другие вопросы по теме