Как определить событие click на ячейке даты в визуализации Google. Календарь

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', но не 'click' ...

использовать 'select' событие, слушатель должен быть добавлен к 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>