SimpleCalendar.js

SimpleCalendar.js

/**
 * Simple Calendar
 * Copyright (c) 2021 Koichi OKADA. All rights reserved.
 * This script is distributed under the MIT license.
 */
(function(){
  let wd0 = 0; // week day of the first cell in calendar
  let pad = (s,w,c="0")=>(Array(w).fill(c).join("")+s).slice(-w);
  let isSameMonth = (d1,d2) => d1.getMonth() == d2.getMonth();
  let today = new Date();
  let d = new Date(today); d.setDate(1); d.getDay() != wd0 && d.setDate(1 + wd0 - (7 + d.getDay()) % 7);
  let table = document.body.appendChild(document.createElement("table"));
  table.classList.add("calendar");
  table.createCaption().textContent = `${d.getFullYear()}/${pad(today.getMonth()+1,2)}`;
  Array(6).fill().map(z=>table.insertRow(-1)).forEach(tr=>{
    Array(7).fill().map(z=>tr.insertCell(-1)).forEach(td=>{
      td.classList.add("month-"+(isSameMonth(today, d)?"inside":"outside"), "wday"+d.getDay());
      d.setDate((td.textContent = d.getDate()) + 1);
    })  
  });

  document.body.appendChild(document.createElement("style"));
  let style = document.styleSheets[document.styleSheets.length-1];
  `
    .calendar {text-align: right;}
    .month-outside {filter: opacity(0.2);}
    .calendar, .calendar td {border: 1px solid black; background: white;}
    .calendar caption {border: 1px solid black; border-width: 1px 1px 0 1px;}
    .calendar .wday0 {background: #FDD;}
    .calendar .wday6 {background: #DDF;}
    .calendar td:hover {background: #8F8; cursor: pointer;}
    `.split("\n").forEach(s=>{s=s.trim();if(s!="")style.insertRule(s)});
})();