Super Simple SVG Calendar

<div id="d">

  <button class="left">

    <svg height="100%" width="100%" viewbox="0 0 10 10">

      <path d="m 7 1 L 1 5 L 7 9 Z" fill="rgba(255,255,255,0.8)" />

    </svg></button>

  <button class="right">

    <svg height="100%" width="100%" viewbox="0 0 10 10">

      <path d="m 3 1 L 9 5 L 3 9 Z" fill="rgba(255,255,255,0.8)" />

    </svg>

  </button>

</div>

body{

  margin:0 auto;

  background:steelblue;

}

#d {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  height:200px;

  width:200px;

  border-radius:13px;

  background:rgba(0,0,0,0.2);

  border:2px solid rgba(255,255,255,0.5);

  padding-top:10px;

  padding-bottom:10px;

}

.left, .right {

  background:none;

  color:#fff;

  padding:0;

  margin:0 auto;

  border:1px solid rgba(255,255,255,0.5);

//this one SVG calendar function is all you need.

//************************

const svgCal = (

  el = document.querySelector("#svgCalendar"), 

  today = new Date()) => {

  if (!el) {

    console.error('Tell us where to put the calendar!');

    return;

  }

  const DAYS = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

  const MONTHS = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];

  const month = today.getMonth();

  const dayOfMonth = today.getDate();

  const year = today.getFullYear();

  const firstDayOfMonth = new Date(year, month, 1).getDay();

  const daysInMonth = new Date(year, month + 1, 0).getDate();

​

  //capitalized month name