HTML Calendar

by Turner

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Mr. Turner's Calendar</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css">
    <input type="submit" id="byBtn" value="Create Today" onclick="changeDate()" />
  </head>

  <body>
    <h1 align="center">Mr. Turner's Calendar</h1>
    <div id="loginPanel">
      <h3>Login to Submit Work</h3>
      <table id="loginTable">
      </table>
    </div>
    <div class="results"></div>

    <div id="selectCalendars">
      <h3>Select Calendars to Display</h3>
      <form action="">
        <input type="checkbox" name="class1" value="Trig">Trigonometry/Pre-Calculus
        <br>
        <input type="checkbox" name="class2" value="IM3">Integrated Mathematics 3
        <br>
        <input type="checkbox" name="class3" value="APCSA">AP Computer Science A
      </form>
    </div>

    <table id="calendarDisplay">
      <thead>
        <tr>
          <td>PREV</td>
          <td align="center" id="calendarHeader" colspan="5"><strong>Month Year</strong></td>
          <td>NEXT</td>
        </tr>
        <tr>
          <th>SUN</th>
          <th>MON</th>
          <th>TUE</th>
          <th>WED</th>
          <th>THR</th>
          <th>FRI</th>
          <th>SAT</th>
        </tr>
      </thead>
      <div id="days" align="center">
        <tr class="weeks" id="week1">
          <td id="spot1">1</td>
          <td id="spot2">2</td>
          <td id="spot3">3</td>
          <td id="spot4">4</td>
          <td id="spot5">5</td>
          <td id="spot6">6</td>
          <td id="spot7">7</td>
        </tr>
        <tr class="weeks" id="week2">
          <td id="spot8">8</td>
          <td id="spot9">9</td>
          <td id="spot10">10</td>
          <td id="spot11">11</td>
          <td id="spot12">12</td>
          <td id="spot13">13</td>
          <td id="spot14">14</td>
        </tr>
        <tr class="weeks" id="week3">
          <td id="spot15">15</td>
          <td id="spot16">16</td>
          <td...

CSS

#calendarDisplay {
  text-align: center;
  background-color: #cceeff;
  //float: center;
  border: 5px solid black;
  display: inline-block;
}

#selectCalendars {
  display: inline-block;
}

#loginPanel {
  display: inline-block;
}

JavaScript

$(document).ready(function(){
	var date = new Date();
	var today = date.getDate();
	var day = date.getDay();
	var month = date.getMonth();
	var year = date.getFullYear();
  makeCal();
});

function makeCal(){
	;
}


/*document.querySelector('.results').innerHTML = 'Hello World!';
// Using the jQuery library
$('.results').html('Hello World!');
var date = new Date();
var today = date.getDate();
var day = date.getDay();
var month = date.getMonth();
var year = date.getFullYear();*/