Как обнаружить событие клика по ячейке даты в Google visualization.Calendar

Question

У меня вопрос по поводу google.visualization.Calendar. Я прочитал [ https://developers.google.com/chart/interactive/docs/gallery/calendar но так и не смог найти решения

Ниже приведен код, который я использую для тестирования.

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

события календаря включают '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>