FullCalendar - Événements de l'agenda Google + eventRender

Question

FullCalendar - Événements de l'agenda Google + eventRender

Demandé el 11 de Avril, 2018: Quand la question a-t-elle été
776 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Un site existant sur lequel est installée la version 3.9.0 (précédemment version 3.4.0) de FullCalendar, utilisée pour afficher le contenu de divers calendriers Google, n'affiche plus les fenêtres contextuelles des événements lorsque l'on clique sur un événement pour en afficher la description complète. Au lieu de cela, le code suivant est ignoré :

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

        // Prevent redirect to Google Calendar
        return false;
        }

Je me demandais si eventRender est capable d'afficher les informations sur l'événement ? Ma recherche dans les documents actuels de FullCalendar n'a révélé aucune information indiquant comment cela peut être réalisé, ou même si c'est possible ou non. Je ne sais pas comment intégrer/utiliser le seul code que j'ai trouvé :

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

Toute aide serait grandement appréciée.

Demandé el 11 de Avril, 2018 par ridgedale

Answer 1

2 Réponses

Answer 2

1voto

ridgedale Points 142

La solution était d'utiliser popper.js comme suit :

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

Merci encore à ADyson pour son aide.

Répondu el 11 de Avril, 2018 par ridgedale (142 Points )

Answer 3

0voto

ridgedale Points 142

Pour clarifier et éviter toute confusion : la solution pour rendre les infobulles contextuelles a été obtenue pour un fichier de type simple en utilisant le code suivant :

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

<link href='http://stackoverflow.com/css/fullcalendar.min.css' rel='stylesheet' />
<link href='http://stackoverflow.com/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>

Répondu el 14 de Avril, 2018 par ridgedale (142 Points )

FullCalendar - Événements de l'agenda Google + eventRender

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

FullCalendar - Événements de l'agenda Google + eventRender

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: