Skip to content

Instantly share code, notes, and snippets.

Created September 16, 2020 15:26
  • Star 36 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
let currentColor = '#ebedf0';
let clicking = false;
const boxes = document.querySelectorAll('.js-calendar-graph-svg rect');
const graph = document.querySelector('.js-calendar-graph-svg');
// code for switching the current color
function handleColorChange(e) {
const el = e.currentTarget;
currentColor =['background-color'];
function handlePointerEnter(e) {
const rect = e.currentTarget;
if(clicking) {
rect.setAttribute('fill', currentColor)
boxes.forEach(box => box.addEventListener('pointermove', handlePointerEnter))
boxes.forEach(box => box.addEventListener('pointerup', handlePointerEnter))
document.querySelectorAll('.legend li').forEach(li => li.addEventListener('click', handleColorChange))
graph.addEventListener('pointerup', () => {clicking = false});
graph.addEventListener('pointerdown', () => {clicking = true});
graph.addEventListener('pointerleave', () => {clicking = false});
Copy link

hey forked and added 1 line so that when you click on a date it doesnt "shade" the rest of the boxes (undoing some of your hard work! )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment