Daily Agenda Page

<!DOCTYPE html>
<script type="text/javascript">
  var googleCalendar     = "";
  var todoSpreadsheet    = "";
  var contactSpreadsheet = "";
</script>


<html>
  <head>
    <title>Daily Agenda</title>
    <style>
      body {width: 100%; height: 100%; background-color: #fff;}
      div.page {margin: 0 auto; width: 8in; height: 10.5in; border: none;}
      div.header{width: 100%; border: none;}
      div.left {width: 20%; height: 8in; float: left; box-sizing: border-box;}
      div.middle{width: 50%; height: 8in; float: left; box-sizing: border-box; border: none;}
      div.right{width: 30%; height: 8in; float: left; box-sizing: border-box;}
      div.month{width: 100%; height: 1.5in;box-sizing: border-box;}
      iframe.month{width: 100%; height: 1.5in; box-sizing: border-box; margin: none; border: none;}
      div.input{width: 100%; height: 6.5in;box-sizing: border-box;}
      iframe.agenda{width: 100%; height: 8in; border: none; margin: none;}
      div.todo{width: 100%; height: 4in; box-sizing: border-box;}
      iframe.todo, iframe.tocontact{width: 100%; height: 358px; border: none; margin: none; box-sizing: border-box;}
      div.tocontact{width: 100%; height: 4in; box-sizing: border-box;}
      div.bottom{width: 100%; height: 2.25in; box-sizing: border-box;}
      div.clear{clear: both;}

      h1 {font-size: 14pt; font-weight: bold; color: white; background-color: black; margin: 0; text-align: center; height: 0.25in; padding-top: 2px;}

       @media print {
            body{
                visibility:hidden;
            }
            div.page, div.page * {
                visibility:visible;
            }
            div.page { /* aligning the printable area */
                position:absolute;
                left:0;
                top:0;
            }
        }
    </style>
  </head>


  <body>
    <div class="page">
      <div class="header">
        <script type="text/javascript">
          var monthNames = [
            "January", "February", "March",
            "April", "May", "June", "July",
            "August", "September", "October",
            "November", "December"
          ];
          var today = new Date();
          var dd = today.getDate();
          var yyyy = today.getFullYear();
          var mm = today.getMonth()

          var longdate = monthNames[mm] + " " + dd.toString() + ", " + yyyy.toString();

          document.write("<h1>Agenda for " + longdate + "</h1>");
        </script>
      </div>
      <div class="left">
        <div class="month">
          <iframe class="month" src="http://www.calendarlabs.com/calendars/web-content/calendar.php?cid=1001&amp;uid=1119331399&amp;c=8&amp;l=en&amp;cbg=FFFFFF&amp;cfg=333333&amp;hfg=333333&amp;hfg1=333333&amp;ct=1&amp;cb=0&amp;cbc=FFFFFF&amp;cf=verdana&amp;cp=bottom&amp;sw=0&amp;hp=t&amp;ib=0&amp;ibc=&amp;i=images/" align="center" marginwidth=0 marginheight=0 frameborder=no scrolling=no>Loading...</iframe>
        </div>
        <div class="input">
          <h1>Input Online</h1>
        </div>
      </div>
      <div class="middle">
        <script type="text/javascript">
          var today = new Date();
          var year = today.getFullYear();
          var month = today.getMonth() + 1;
          if (month < 10) {
           month = "0" + month;
          }
          var day = today.getDate();
          if (day < 10) {
           day = "0" + day;
          }
          var datestring = year.toString() + month.toString() + day.toString();
          document.write("<iframe class=\"agenda\" src=\"https://calendar.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=DAY&amp;dates=" + datestring + "/" + datestring + "&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=" + googleCalendar + "&amp;color=%232952A3\" frameborder=\"0\" scrolling=\"no\"></iframe>");
        </script>
      </div>
      <div class="right">
        <div class="todo">
          <h1>To Do:</h1>
          <script type="text/javascript">
            document.write("<iframe class=\"todo\" src=\"" + todoSpreadsheet + "/preview?gid=0\"></iframe>");
          </script>
        </div>
        <div class="tocontact">
          <h1>To Contact:</h1>
          <script type="text/javascript">
            document.write("<iframe class=\"todo\" src=\"" + contactSpreadsheet + "/preview?gid=0\"></iframe>");
          </script>
        </div>
      </div>
      <div class="clear"></div>
      <div class="bottom">
        <h1>Notes</h1>
      </div>
    </div>
  </body>
</html>