📅 Tiny Calendar App

I wrote a tiny app that simply displays a calendar and the ability to traverse the calendar by month.

Copy-paste into address bar (582b)

data:text/html,<body onload="d=new Date();M=d.getMonth(d=new Date());Y=d.getFullYear();p=_=>{d=new Date(Y,M,1,d.getHours());Y=d.getFullYear();M=d.getMonth();s=d.toLocaleDateString(0,{month:`long`,year: `numeric`})+`<table width=100%><tr>`;a=d.getDay();while(a--)s+=`<td>`;while(M==d.getMonth()){s+=`<td>${d.getDate()}`;d.setDate(d.getDate()+1);a=d.getDay();if(!a)s+=`<tr>`}o.innerHTML=s};p()"><button onclick=M--;p()>-</button><button onclick=M++;p()>+</button>
<p id=o></p><style>*{margin:0;font-size:9vh}td,p{text-align:center;height:1.3rem}button{width:50%;display:inline-block}

Another boring option, lol:

data:text/html,<input type=date>

A good exercise

This was a fun exercise in using and understanding JavaScript date functions. I ran into the issue of UTC time and local time. This is especially apparent on the first or last day of the month your timezone would be different from Zulu time.

The un-minified code

This was written with plans to minify it. So it's not using good variable naming practices but I think you can pick up what it's doing.

<button onclick="M--;p()">-</button><button onclick="M++;p()">+</button>
<p id="o"></p>
<script>
d = new Date();
M = d.getMonth();
Y = d.getFullYear();
p = _ => {
  d = new Date(Y, M, 1, d.getHours());
  Y = d.getFullYear();
  M = d.getMonth();
  s = d.toLocaleDateString(0, {month: 'long', year: 'numeric'}) + `<table width=100%><tr>`;
  a = d.getDay();
  while (a--) s += `<td>`;
  while (M == d.getMonth()) {
    s += `<td>${d.getDate()}`;
    d.setDate(d.getDate()+1);
    a = d.getDay();
    if (a == 0) s += `<tr>`;
  }
  o.innerHTML = s
};
p();
</script>
<style>
* { margin:0; font-size: 9vh }
td, p { text-align:center; height:1.3rem }
button { width:50%; display: inline}
</style>

lewdev/tiny-calendar.md

Select an option