Teacher Calendar

v3.0

by Turner

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Mr. Turner's Calendar</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css">
    <script language="JavaScript">
<!--
function resize_iframe()
{

	var height=window.innerWidth;//Firefox
	if (document.body.clientHeight)
	{
		height=document.body.clientHeight;//IE
	}
	//resize the iframe according to the size of the
	//window (all these should be on the same line)
	document.getElementById("glu").style.height=parseInt(height-
	document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 

//Instead of using this you can use: 
//	<BODY onresize="resize_iframe()">


//-->
</script>
  </head>

  <body>
    <div class="leftPanel">
      <button id="updateButton">
      Update
      </button>
    </div>

    <div class="rightPanel">
    </div>
    
    <div class="tableHolder">
      <table id="calTable">
      </table>
    </div>


  </body>

</html>

CSS

#tableTitle{
  font-family:sans-serif;
  font-size:35pt;
}

#daysOfWeek {
  font-family:sans-serif;
  font-size:15pt;
}

.hoverCell{
    border: solid #FF9900;
    font-weight: bold;
}

.tableHolder{
  display: table;
  width: 100%;
  margin: auto;
}

.otherMonth{
  background-color: #ccccff;
}

.cell{
  display: table-cell;
  width: 100px;
  height: 100px;
}

#today{
  color: #ff0000;
  font-weight: bold;
}

#calTable {
  text-align: center;
  background-color: #cceeff;
  border-collapse: collapse;
  border: 5px solid black;
}

td{
    border: 2px solid black;
    text-align: left;
    vertical-align: top;
    font-size: 25px;
}

.leftPanel, .rightPanel {
  position: relative;
}

#dateRange{
  font-family:sans-serif;
  font-size:20pt;
  display: table-cell;
  position: relative;
}

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);
  makeCal(firstDate, lastDate);
  $("#updateButton").click(function() {
    //$('#calTable tr').remove(); 
    $(".tableHolder").detach();
    makeCal(document.getElementById('firstDate').value, document.getElementById('lastDate').value);
});
  $('.cell').hover(
  		function(){
  			$(this).addClass('hoverCell');
    	},
    	function(){
        $(this).removeClass('hoverCell');
    	}
    );
});

function makeCal(startDate, endDate){
    var focusDate = new Date();
    if (startDate.getDay() != 0){
      startDate.setDate(startDate.getDate() - startDate.getDay(0))
    };
    if (endDate.getDay() != 6){
    	endDate.setDate(endDate.getDate()+(6-endDate.getDay()));
    };
    var startWeek = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
    var endWeek = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()+(6-startDate.getDay()));
    
    $('#calTable').append("<thead><tr><th id='tableTitle' colspan='7'></th></tr><tr><th></th><th></th><th id='dateRange' colspan='3'>Date Range Here</th><th></th><th></th></tr><tr id='daysOfWeek'><th>SUN</th><th>MON</th><th>TUE</th><th>WED</th><th>THU</th><th>FRI</th><th>SAT</th></tr></thead>");
    do{
    	$('#calTable').append(makeWeek(startWeek, endWeek, focusDate.getMonth(), focusDate));
      startWeek.setDate(endWeek.getDate()+1);
      endWeek.setDate(endWeek.getDate()+7);
    } while(endWeek.getDate() != endDate.getDate());
$('#calTable').append(makeWeek(startWeek, endWeek, focusDate.getMonth(), focusDate));

$('#tableTitle').append("Mr. Turner's Calendar");

$('.leftPanel').prepend("<input type='date' min='2016-08-01' max='2017-07-01' id='lastDate' value=''>");
document.getElementById('lastDate').value = dateField(endDate);
$('.leftPanel').prepend("<input type='date'...