Javascript Girl
  1. Javascript Girl
  3. Comment détecter l'événement de clic sur la cellule de date dans la visualisation de Google.Calendrier
Intereting Posts
Javascript oblige à ouvrir un lien dans un navigateur Définir les membres du domaine privé et l'héritage dans le modèle de module JAVASCRIPT "Origin null n'est pas autorisé par Access-Control-Allow-Origin" dans Chrome. Pourquoi? Détection de collision de texte Comparez deux tableaux contenant des objets afin de calculer ce qui a changé? Filtrer les fichiers dans le dialogue HTML du fichier HTML JavaScript dans un <img title = "<a href = '#' onClick = 'alert (' Hello World! ')> The Link </a>" /> possible? Noscript google snapshot, la manière sûre Comment envoyer des données à l'aide de JSONP depuis localhost vers domain.com Éditeurs d'images libres Open Source In-browser Une tentative de module de jeton inattendu échoué: SyntaxError JS un clic Clic (pas deux clics) – valeur par défaut de l'élément basculé Comment utiliser canvas.toDataURL () pour obtenir base64 d'image dans Adobe AIR? Convertir les propriétés d'objet JSON retournées en (bas en premier) camelCase Ajouter des valeurs de correspondance des clés dans un tableau d'objets

Comment détecter l'événement de clic sur la cellule de date dans la visualisation de Google.Calendrier

J'ai une question concernant google.visualization.Calendar. J'ai lu [ https://developers.google.com/chart/interactive/docs/gallery/calendar#months][1] mais je n'ai toujours pas trouvé de solutions

Le code ci-dessous est le code que j'utilise pour tester. 

var dataTable=new google.visualization.DataTable(); dataTable.addColumn({type:'date', id:'Date'}); dataTable.addColumn({type:'number',id:'Events Found'}); dataTable.addRows([ [ new Date(2016, (05-1), 19), 400], [ new Date(2016, 02, 23), 300], [ new Date(2016, 05, 24), 300], [ new Date(2016, 06, 23), 300] ]); var chart=new google.visualization.Calendar(document.getElementById('calendarView')); var options={ title: "Event Calendar", width: 500, height:400, calendar: { cellSize: 5 , focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 } }, /*noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' },*/ calendar: { underYearSpace: 2, yearLabel: { fontName: 'Times-Roman', fontSize: 32, color: '#e6ecff', bold: true, italic: true } } }; chart.draw(dataTable,options);

Je dois ajouter un gestionnaire d'événement de clic lorsque l'utilisateur clique sur la date spécifique. Comment faire ça?

Voici les codes que j'ai testés sans résultats.

Code: 1 

 google.visualization.events.addListener(chart,'click',function(){ alert ('click'); });

Code: 2 

 google.visualization.events.trigger(dataTable, 'select', selectHandler); function selectHandler() { alert('A table row was selected'); }

Tout un conseil pour les résoudre serait apprécié.

Les événements du calendrier incluent 'select' , mais pas 'click' …

Pour utiliser l'événement 'select' , l'auditeur doit être ajouté au chart ,
Avant qu'il ne soit dessiné.

Voir l'exemple suivant … 

 google.charts.load('current', { callback: function () { var dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'date', id: 'Date'}); dataTable.addColumn({type: 'number', id: 'Events Found'}); dataTable.addRows([ [ new Date(2016, (05-1), 19), 400], [ new Date(2016, 02, 23), 300], [ new Date(2016, 05, 24), 300], [ new Date(2016, 06, 23), 300] ]); var chart = new google.visualization.Calendar(document.getElementById('calendarView')); var options={ title: 'Event Calendar', calendar: { focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 }, underYearSpace: 2, yearLabel: { fontName: 'Times-Roman', fontSize: 32, color: '#e6ecff', bold: true, italic: true } }, }; google.visualization.events.addListener(chart, 'select', function () { document.getElementById('msg_div').innerHTML = JSON.stringify(chart.getSelection()); }); chart.draw(dataTable, options); }, packages:['calendar'] }); 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="calendarView"></div> <div id="msg_div"></div>