Teacher Calendar

v1.0

by Turner

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Mr. Turner's Calendar</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css">
  </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>
    
    <div id="test">
    </div>
    <div id="tableHolder">
      <table id="calTable">
      </table>
    </div>


  </body>

</html>

CSS

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

#selectCalendars {
  display: inline-block;
}

#loginPanel {
  display: inline-block;
}

td{
    border: 2px solid black;
}

JavaScript

$(document).ready(function(){
  var toDate = new Date();
  var firstDate = new Date(toDate.getFullYear(), toDate.getMonth(), 1);
  var lastDate = new Date(toDate.getFullYear(), toDate.getMonth()+1, 0);
  //$("#test").append("<p>" + firstDate + "</p>");
  makeCal(toDate, firstDate, lastDate);
});

var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

function makeCal(focusDate, startDate, endDate){
    var startWeek = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()-(6-startDate.getDay()));
    var endWeek = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()+(6-startDate.getDay()));
    $("#test").append("<p>" + endDate.getDate() + "</p>");
    if (endDate.getDay() != 6){
    	endDate.setDate(endDate.getDate()+(6-endDate.getDay()));
    };
	  $("#test").append("<p>" + endDate.getDate() + "</p>");
    $('#calTable').append("<thead><tr><th></th><th></th><th>" + month[startDate.getMonth()] + "</th><th></th><th> " + startDate.getFullYear() + "</th><th></th><th></th></tr> <tr><th>SUN</th><th>MON</th><th>TUE</th><th>WED</th><th>THU</th><th>FRI</th><th>SAT</th></tr></thead>");
    //$("#test").append("<p>" + (endDate != + "</p>");
    /*while (endWeek endDate){*/
    	$('#calTable').append(makeWeek(startWeek, endWeek));
      //startWeek.setDate(startWeek.getDate()+7);
      //endWeek.setDate(endWeek.getDate()+7);
    //$("#test").append("<p>" + startWeek + "</p>");
 		//$("#test").append("<p>" + endWeek + "</p>");
    }
}

function makeWeek(startDate, endDate){
	var week = "<tr>";
  for (var day = 0; day < 7; day++){	
    week += ("<td>" + startDate.getDate() + "</td>");
    startDate.setDate(startDate.getDate()+1);
  }
  week += "</tr>";
  //$('calTable').text(week);
  return week;
}