Google visualization.Calendarの日付セルでクリックイベントを検出する方法

Question

google.visualization.Calendarに関する質問があります。私は[https://developers.google.com/chart/interactive/docs/gallery/calendar#months][1]を読んだが、まだ解決策を見つけることができなかった

以下のコードは私がテストに使用しているコードです。

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); 

ユーザーが特定の日付をクリックすると、クリックイベントハンドラを追加する必要があります。どうやってするか？

結果はテストされていません。

コード：1

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

コード：2

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

それらを解決するために、任意の先端が理解されるであろう。

Answer 1

calendar eventsが'select'イベントを使用する'select'、ない'click' ...

を含めることが描かれる前に、リスナーはchart、
に追加する必要があります。

次の例を参照してください...

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>