How to get div of selected date in Google Chart Calendar

Question

I use Google Chart Calendar and I would like to get to know how to manipulate with the selected date. I can get selected 'row' and 'date' by using the listener for select:

google.visualization.events.addListener(chart, 'select', function() {
    console.log(chart.getSelection()[0].date)
    console.log(chart.getSelection()[0].row)
});

Here is official documentation.

1. How can I find the div with selected date by using the 'row'?
2. My goal is to manipulate it and add additional colors for following 5 days like this:
3. I also wanted to display tooltip after click which I did by cloning the current tooltip on hover but my intention is to get the selected div rather than row

Answer 1

each date on the calendar is represented by an svg <rect> element,
that has height and width attributes of 16

$('#chart_div rect[width="16"][height="16"]')

to find the selected element, calculate the day number of the year (1-366),
you can use the functions found in the following answer to calculate the day number...
calculate the day of the year (1 - 366)

then use jquery to get the element...

var selection = chart.getSelection();
if (selection.length > 0) {
  var dayNumber = new Date(selection[0].date).getDOY();
  var selectedRect = $('#chart_div rect[width="16"][height="16"]').get(dayNumber);
}

be sure to check the length of the selection,
the event is also fired when a selection is removed,
which will cause this to fail --> selection[0]

note: the chart probably won't let you change the style of the selected element,
because it will override any styles according to option --> calendar.focusedCellColor
but you can definitely change the 5 elements that follow the selected element,
using --> dayNumber + 1 -- etc...