Google Calendarで過ぎた日の色を変える(2018)

Google Calendarで過ぎた日の色を変えるが動かなくなって久しいので調べて書き直しました。

DOMを見たところ、カレンダーの各セルにdata-datekeyという属性があったのでこれを使えば簡単そうだなと。このdatekeyの数字の意味については Googleカレンダーのdata-datekeyの謎で。

次のようなユーザースクリプトを作ってGreasemonkeyなりTampermonkeyで使えばOKでした。

(function(){
    'use strict';

    var timer = null;
    function schedule(){
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(update, 200);
    }

    function update(){
        const PAST_COLOR = "#eeeeee";
        const TODAY_COLOR = "#ffffaa";

        const now = new Date();
        const todayKey = (now.getFullYear()-1970)*512+(now.getMonth()+1)*32+now.getDate();
  
        const cells = Array.prototype.slice.call(document.querySelectorAll("[data-datekey]"));
        cells.forEach((e)=>{
            if(e.dataset.datekey < todayKey){
                e.style.backgroundColor = PAST_COLOR;
            }
            else if(e.dataset.datekey == todayKey){
                e.style.backgroundColor = TODAY_COLOR;
            }
        });
    }

    var observer = new MutationObserver(schedule);
    observer.observe(document.body, {childList:true, subtree:true});

    update();
})();

DOMが書き換わってから100msだと切り替えたときにたまに元に戻ってしまうことがあったので200msにしました。

Pingback / Trackback