const TOTAL_YEARS = 100;

​

const BASE_OFFSET_X = 40;

const BASE_OFFSET_Y = BASE_OFFSET_X;

const DATE_W = 20;

const YEAR_H = 28;

const MONTH_W = {0: 31, 1: 29, 2: 31, 3: 30, 4: 31, 5: 30, 6: 31, 7: 31, 8: 30, 9: 31, 10: 30, 11: 31};

const MONTH_DIVIDER_W = 8;

const YEAR_LABEL_W = 40;

const YEAR_LABEL_DIVIDER_X = BASE_OFFSET_X + getMonthOffset(6) + MONTH_DIVIDER_W * 6 - 12;

const CIRCLE_R = 5;

const CANVAS_W = getMonthOffset(12) + BASE_OFFSET_X * 2 + MONTH_DIVIDER_W * 11 + YEAR_LABEL_W;

const CANVAS_H = YEAR_H * TOTAL_YEARS + BASE_OFFSET_Y * 2;

​

const daysToMark = [];

​

function drawDividers() {

  for (let i = 0; i <= TOTAL_YEARS; i += 1) {

    strokeWeight(i == 0 || i == TOTAL_YEARS || i % 10 == 0 ? 2.5 : 1)

    let ycoord = BASE_OFFSET_Y + i * YEAR_H - 18;

    line(BASE_OFFSET_X - 12, ycoord, CANVAS_W - BASE_OFFSET_X - 4, ycoord);

  }

  strokeWeight(2.5);

  for (let i = 0; i <= 12 + 1; i++) {

    let xcoord = BASE_OFFSET_X + getMonthOffset(i) + MONTH_DIVIDER_W * i + getYearLabelOffset(i) - 12;

    line(xcoord, BASE_OFFSET_Y - 18, xcoord, CANVAS_H - BASE_OFFSET_Y - 18);

  }

  line(YEAR_LABEL_DIVIDER_X, BASE_OFFSET_Y - 18, YEAR_LABEL_DIVIDER_X, CANVAS_H - BASE_OFFSET_Y - 18);

  strokeWeight(1);

}

​

function drawMonthLabels() {

  for (let i = 0; i < 12; i++) {

    const xcoord = BASE_OFFSET_X + getMonthOffset(i) + MONTH_DIVIDER_W * i + getYearLabelOffset(i) - 12 + MONTH_W[i] * DATE_W / 2;

    text(new Date(START_YEAR, i, 1).toLocaleString('default', { month: 'long' }), xcoord, 14);

  }

}

​

function drawKey() {

  circle(YEAR_LABEL_W * 2, CANVAS_H - BASE_OFFSET_Y, 5);

  text("Sunday", YEAR_LABEL_W * 2 + DATE_W * 2, CANVAS_H - BASE_OFFSET_Y + 4)

}

​

function getYearLabelOffset(month) {

  if (month > 5) {

    return YEAR_LABEL_W;

  }

  return 0;

}

​

function getMonthOffset(month) {

  let sum = 0;

  for (let i = 0; i < month; i++) {

    sum += MONTH_W[i] * DATE_W;

  }

  return sum;

}

​

function daysInMonth (year, month) {

  return new Date(year, month + 1, 0).getDate();

}

​

function drawMonth(year, month) {

  for (let i = 0; i < daysInMonth(year, month); i++) {

    const dayOfWeek = new Date(year, month, i).getDay();

    const [xcoord, ycoord] = getCoords(year, month, i);

    if (dayOfWeek == 6) {

      circle(xcoord, ycoord - 3.5, CIRCLE_R);

    } else {

      text(i + 1, xcoord, ycoord);

    }

  }

}

​

function getCoords(year, month, date) {

  const yearOffset = year - START_YEAR;

  const xcoord = BASE_OFFSET_X + getMonthOffset(month) + MONTH_DIVIDER_W * month + DATE_W * date + getYearLabelOffset(month);

  const ycoord = BASE_OFFSET_Y + YEAR_H * yearOffset;

  return [xcoord, ycoord];

}

​

function drawYear(year) {

  const yearOffset = year - START_YEAR;

  for (let i = 0; i < 12; i++) {

    drawMonth(year, i);

  }

  const ycoord = BASE_OFFSET_Y + YEAR_H * yearOffset;

  text(year, YEAR_LABEL_DIVIDER_X + YEAR_LABEL_W / 2, ycoord);

}

​

function markDay(dateString) {

  const dateObj = new Date(dateString);

  const [year, month, day] = [dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate()];

  const [xcoord, ycoord] = getCoords(year, month, day - 1);

  circle(xcoord, ycoord - 4, 25);

}

​

function setup() {

  createCanvas(CANVAS_W, CANVAS_H);

  noLoop();

}

​

function draw() {

  // textFont("Inter");

  background('white');

  fill('#ffdf00');

  strokeWeight(0);

  for (const date of daysToMark) {

    markDay(date);

  }

  fill('black');

  strokeWeight(1);

  fill('black');

  textAlign('center');

  drawDividers();

  drawMonthLabels();

  drawKey();

  for (let i = 0; i < TOTAL_YEARS; i += 1) {

    drawYear(START_YEAR + i);

  }

}