Sometimes for scheduling purposes it would be nice to be able to take a screenshot of your calendar and send it to someone, but you may not want to show that someone the names of every event on your calendar. This code and bookmarklet solves that problem by blurring out event names on your calendar.
Here is the code:
var style = document.getElementById('--style') || document.createElement('style'), // <style> element holding blur/hide rules
spans = document.querySelectorAll('[data-eventchip] span'); // This worked as of May 3, 2023 but it may change.
// Add the styles
style.id = '--style';
style.innerHTML = trustedTypes.createPolicy('forceInner', { createHTML: (t) => t }).createHTML(`
.--blur { -webkit-filter: blur(4px); filter: blur(4px); }
.rsvp-no-chip.--hide, .rsvp-no-bg.--hide { opacity: 0; }
`);
document.head.appendChild(style);
// Blur active event titles
for (var i = 0, l = spans.length; i < l; i++) {
spans[i].classList.toggle('--blur');
}
Run it once (e.g. in the browser console) to blur, then run it again to un-blur.
And here is that code as a bookmarklet:
javascript:void%20function(){var%20a=document.getElementById(%22--style%22)||document.createElement(%22style%22),b=document.querySelectorAll(%22[data-eventchip]%20span%22);a.id=%22--style%22,a.innerHTML=trustedTypes.createPolicy(%22forceInner%22,{createHTML:a=%3Ea}).createHTML(`
%20%20%20%20.--blur%20{%20-webkit-filter:%20blur(4px);%20filter:%20blur(4px);%20}
%20%20%20%20.rsvp-no-chip.--hide,%20.rsvp-no-bg.--hide%20{%20opacity:%200;%20}
`),document.head.appendChild(a);for(var%20c=0,d=b.length;c%3Cd;c++)b[c].classList.toggle(%22--blur%22)}();
This page doesn't allow linking bookmarklets, so you'll need to add the bookmarklet manually.
The second one that pulls elements by span tag is nice, but it also blurs out the times on the side of the calendar which then essentially renders this unusable for the intended purpose. Anyone have ideas how to fix this?
Update:
This works for Chrome current as of today:
var style = document.getElementById('--style') || document.createElement('style'), // <style> element holding blur/hide rules
spans = document.getElementsByTagName('span');
// Add the styles
style.id = '--style';
style.innerHTML = '.--blur { -webkit-filter: blur(4px); filter: blur(4px); }
.rsvp-no-chip.--hide, .rsvp-no-bg.--hide { opacity: 0; }';
document.head.appendChild(style);
// Blur active event titles
for (var i = 0, l = spans.length; i < l; i++) {
if (spans[i].classList.contains('FAxxKc')){
spans[i].classList.toggle('--blur');
}
}