Why Is Appearing in My Html

Javascript and CSS code literally appearing on my HTML page

Move the script and style to the head
change this

    var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");

    for (var month = 0; month < 12; month++) {
        createCalendar(month);
    }

    window.addEventListener("load",function() { // wait for page load
      var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");
      for (var month = 0; month < 12; month++) {
        createCalendar(month);
      }
    })

As Chris noticed, you have a very disruptive style entry

body,
body * {
  display: flex;
  justify-content: center;
}

I moved that to just under the other body style and now had to add

script,
style {
  display: none
}

to stop the disruption

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>ICSI301 - Lab 2</title>
  <script>
    var monthNamesRy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var daysOfTheWeekRy = ["S", "M", "T", "W", "T", "F", "S"]

    var d = new Date();
    var year = d.getFullYear();

    var thisMonth = d.getMonth();
    var today = d.getDate();
    //var nthday = d.getDay();
    window.addEventListener("load", function() {
      var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");

      for (var month = 0; month < 12; month++) {
        createCalendar(month);
      }
    });

    function createCalendar(month) {
      var monthDiv = createMonthHeader(month);

      var firstDayOfTheMonth = getFirstDayOfTheMonth(year, month);
      var daysinmonth = daysInMonth(year, month)
      var counter = 0,
        order = 6;

      for (var i = 0; i < firstDayOfTheMonth + 7; i++) {
        order++;
        createDay(month, " ", order, monthDiv);
      }
      for (var i = firstDayOfTheMonth; i < daysInMonth(year, month) + firstDayOfTheMonth; i++) {
        counter++;
        order++;
        createDay(month, counter, order, monthDiv);
      }

      for (var i = firstDayOfTheMonth + daysinmonth; i < 6 * 7; i++) {
        order++;
        createDay(month, " ", order, monthDiv);
      }
    }

    function createDay(month, counter, order, monthDiv) {

      var day = document.createElement("div");
      if (month == thisMonth && counter == today) {
        day.setAttribute("class", "to day");
      } else {
        day.setAttribute("class", "day");
      }
      day.setAttribute("style", "order:" + order);
      day.innerHTML = counter;
      monthDiv.appendChild(day);
    }

    function createMonthHeader(month) {
      var calendar = document.querySelector(".calendar");

      var monthDiv = document.createElement("div");
      monthDiv.setAttribute("class", "month");
      calendar.appendChild(monthDiv);

      var h4 = document.createElement("h4");
      h4.innerHTML = monthNamesRy[month];
      monthDiv.appendChild(h4);

      for (var i = 0; i < 7; i++) {
        var hday = document.createElement("div");
        hday.setAttribute("class", "day OfWeek");
        hday.setAttribute("style", "order:" + i);
        hday.innerHTML = daysOfTheWeekRy[i].toUpperCase();
        monthDiv.appendChild(hday);
      }

      return monthDiv;
    }

    function daysInMonth(year, month) {
      return new Date(year, month + 1, 0).getDate();
    }

    function getMonthName(month) {
      return monthNamesRy[month];
    }

    function getDayName(day) {
      return daysOfTheWeekRy[day];
    }

    function getFirstDayOfTheMonth(y, m) {
      var firstDay = new Date(y, m, 1);
      return firstDay.getDay();
    }

    function getLastDayOfTheMonth(y, m) {
      var lastDay = new Date(y, m + 1, 0);
      return lastDay.getDay();
    }
  </script>

  <style>
    body * {
      margin: 0;
      padding: 0;
      font-family: "Times New Roman";
    }
    
    body,
    body * {
      display: flex;
      justify-content: center;
    }
    
    script,
    style {
      display: none
    }
    
    .calendar,
    section {
      max-width: 50rem;
    }
    
    .day {
      width: 1.5em;
      height: 1.5em;
    }
    
    .day:nth-of-type(-n+7) {
      background-color: #7CFC00;
    }
    
    .to.day {
      background: aquamarine;
    }
    
    .month {
      width: calc(1.5em * 8);
      padding: 1em;
    }
    
    h4 {
      font-size: 1em;
      text-transform: uppercase;
    }
    
    h1#year {
      font-size: 3em;
      height: 29px;
      font-weight: normal;
      padding: 1em 1em .5em 1em;
      margin-bottom: .5em;
      color: #006400;
    }
    
    h4 {
      justify-content: center;
      flex: 1 0 100%;
    }
    
    h1 {
      justify-content: center;
      align-self: stretch;
    }
    
    .calendar,
    .month {
      flex-wrap: wrap;
    }
    
    .month {
      align-items: flex-start;
      border: 3px double black;
      margin: 5px;
    }
    
    .day {
      border: 1px solid black;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <h1 id="year">2021 School Calendar</h1>

  <div class="calendar"></div>

</body>

</html>

Why does this extra symbol is coming in my html page?

Remove all of the <br/> in your table, they're not allowed there.

Why is this HTML showing up as plain text in browser?

This HTML isn't being interpreted as plain text: it's being interpreted as HTML.

It's just that the contents of your HTML include markup that has been escaped, such as < and >.

Update

Is this the markup you want?

<!--square.html-->
<!DOCTYPE html>
<html>


<script id="vertex-shader" type="x-shader/x-vertex">
// GLSL vertex shader code
attribute vec4 vPosition;

void main()
{
gl_Position = vPosition;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
// GLSL fragment shader code
precision mediump float;

void main()
{
gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
}
</script>

<!--Include A/S WebGL support libraries-->
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="../Common/webgl-debug.js"></script>
<script type="text/javascript" src="square.js"></script>

<body>
<canvas id="gl-canvas" width="512" height=" 512">>
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

Random commas appearing on html page on inspect when not in code

After .map try tagging on .join(" ")

Solution based on @VLAZ's comment:

When you convert an array to a string, it automatically joins the elements with commas between them. Assigning an array to innerHTML converts it to a string.

Why are squares instead of whitespaces appearing in my HTML?

It appears to be coming from your CSS font setting in body. If you inspect the element in Chrome and disable the style the issue goes away.

body {
   font-family: LiberationSansRegular;
}