2018-11-14 ,

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