title: Creating a calendar in HTML
body: <p>I'm currently creating a calendar in HTML as part of a school project. </p>
  
  <p>So far I've created the basics of the page. What I'd like is a calendar, where you're able to create appointments, which will then show up (like a basic calendar). </p>
  
  <p>Here is what I've made so far (It's is danish, but I don't think it should be a problem. Let me know if you'd like it translated though): </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;December&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
      &lt;script src="javascript.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="navigation"&gt;
                  &lt;div id="forrige"&gt;
                      &lt;a href="november.html"&gt;Forrige måned&lt;/a&gt; 
                  &lt;/div&gt;
  
                  &lt;div id="naeste"&gt;
                      &lt;a href="januar.html"&gt;Næste måned&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;br&gt;&lt;br&gt;
  
      &lt;table class="ugedage"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Mandag&lt;/th&gt;
                      &lt;th&gt;Tirsdag&lt;/th&gt;
                      &lt;th&gt;Onsdag&lt;/th&gt;
                      &lt;th&gt;Torsdag&lt;/th&gt;
                      &lt;th&gt;Fredag&lt;/th&gt;
                      &lt;th&gt;Lørdag&lt;/th&gt;
                      &lt;th&gt;Søndag&lt;/th&gt;
                  &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;28&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;29&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;30&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;1&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;2&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;3&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;4&lt;/td&gt;   
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="dato" data-href="#"&gt;5&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;6&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;7&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;8&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;9&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;10&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;11&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="dato" data-href="#"&gt;12&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;13&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;14&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;15&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;16&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;17&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;18&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="dato" data-href="#"&gt;19&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;20&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;21&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;22&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;23&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;24&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;25&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="dato" data-href="#"&gt;26&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;27&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;28&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;29&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;30&lt;/td&gt;
                          &lt;td class="dato" data-href="#"&gt;31&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;1&lt;/p&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;2&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;3&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;4&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;5&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;6&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;7&lt;/p&gt;&lt;/td&gt;
                          &lt;td class="grayedout" data-href="#"&gt;&lt;p&gt;8&lt;/p&gt;&lt;/td&gt;
                      &lt;/tr&gt;
  
              &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ugedage {
      width: 95%;
      margin-left: 2.5%;
      margin-right: 2.5%;
  }
  
  .ugedage th {
      border: 1px solid;
      padding: 20px;
      border-radius: 4px;
  }
  
  .ugedage td {
      border: 1px solid;
      border-radius: 4px;
      padding: 20px;
      padding-top: 0px;
      padding-right: 5px;
      padding-bottom: 10px;
      padding-left: 10px;
      text-align: right;
  }
  
  .grayedout {
      background-color: #d3d3d3;
      font-size: 12;
  }
  
  .dato {
      color: black;
      font-size: 12;
      text-decoration: none;
  }
  
  td a {
      display:block;
      width:100%;
      height: 100%;
  }
  
  .grayedout p {
      color: gray;
      font-size: 12;
      text-decoration: none;
  }
  
  #forrige {
      float: left;
      margin-left: 1%;
  }
  
  #naeste {
      float: right;
      margin-right: 1%;
  }
  
  table td[data-href] {
          cursor: pointer;
      }
  </code></pre>
  
  <p>The small Javascript (I haven't learned Java yet, this was something I've found online):</p>
  
  <pre><code>$(document).ready(function(){
          $('table td').click(function(){
              window.location = $(this).data('href');
              return false;
          });
      });
  </code></pre>
  
  <p>So far I've only created a calendar for the current month and the following 2, since I'm doing them manually (if you know how to automate this process I'd like to know as well, but it's not the most important thing). 
  The thing I'd like is, when I click one of the <code>&lt;td&gt;</code> 's, that represent the days, a popup window, or something like that, appears, where I'm able to type in the details of the appointment I want to add.</p>
  
  <p>How could/should I do this? From my understanding, it'd be difficult/impossible to do in HTML purely, which is where my problem is; I don't know anything else than basic HTML and PHP, and have never worked with Javascript, so I'm in a bit of a tough spot. </p>
  
  <p>Let me know if you need any additional information, and I'll be glad to give you whatever I can. </p>
  
  <p>Thanks :-)</p>