Calender

Create a Calender

by Mentaldiarrhoe

HTML

<html>

  <body>
    <div class="clock">
      <div>
        <span id="main" class="clsTime"></span><span class="clsSTR">LOC</span>
      </div>
      <div>
        <span id="time" class="clsTime"></span><span class="clsSTR">UTC</span>
      </div>
    </div>
    <div id="calender" class="clscalender"></div>
  </body>

</html>

CSS

.clock {
  border: solid 1px blue;
  padding: 10px 40%;
}

.clsTime {
  display: inline-block;
  border: solid 1px grey;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  width: 66px;
}

.clsSTR {
  position: relative;
  top: -5px;
  left: 0px;
  color: grey;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  border: solid 1px grey;
}

.clscalender {
  border: solid 1px red;
  /* height: 200px;*/
}

.clscalender div {
  display: block;
  position: relative;
  left: 30%;
  border: solid 1px red;
  width: 355px;
  padding: 0px,
}

.clscalender span {
  display: inline-block;
  text-align: center;
  border: solid 1px blue;
  width: 20px;
  padding: 3px 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

JavaScript

//window.setInterval(myfirst, 1000);
myfirst();
create();

function myfirst() {
  var a = document.getElementById('main');
  var o = document.getElementById('time');
  var i;
  var d, h, m, s, x;

  d = new Date();
  h = d.getHours();
  h = (h < 10 ? "0" : "") + h;
  m = d.getMinutes();
  m = (m < 10 ? "0" : "") + m;
  s = d.getSeconds();
  s = (s < 10 ? "0" : "") + s;
  a.innerText = h + ":" + m + ":" + s;
  x = d.toString(d.length).replace(/[a-z A-Z]+/g, "#").split("#")[3];
  //o.innerText=(x.split(":")[0]<10 ?"0":"")+x.split(":")[0] +":"+(x.split(":")[1]<10 ?"0":"")+x.split(":")[1]+":"+(x.split(":")[2]<10 ?"0":"")+x.split(":")[2];
  //o.innerText=x;
  o.innerText = d.toUTCString().replace(/[a-z A-Z]+/g, "#").split("#")[4];
}

function create() {
  var i;
  var x;
  var a = 0;
  var z;
  var q;
  var week;
  var f;
  var e = document.getElementById('calender');
  f = getfistdate(new Date(2018, 12 - 1, 0));
  for (x = 1; x <= 7; x++) {
    var n = document.createElement("div");
    e.appendChild(n);
    for (i = 1; i <= 8; i++) {
      var d = document.createElement("span");
      if (x == 1) {
        if (i >= 1) {
          z = new Array("", "Mo", "Di", "Mi", "Do", "Fr", "Sa", "So")[i - 1]

        }
      } else {
        if (i == 1) {
          week = new Date(f.getFullYear(), f.getMonth(), f.getDate() + a + 7);
          z = getWeek(week);
        } else {

          a++;

          q = new Date(f.getFullYear(), f.getMonth(), f.getDate() + a);

          z = q.getDate();
        }

      }

      //z=((a % 2)==1 ? "h":"s");//Berechnung Rest von a
      d.innerText = z;
      n.appendChild(d);

    }
  }

}

function getWeek(fromDate) {

  var date = fromDate;

  // In JavaScript the Sunday has value 0 as return value of getDay() function.
  // So we have to order them first ascending from Monday to Sunday
  // Monday: ((1+6) % 7) = 0
  // Tuesday ((2+6) % 7) = 1
  // Wednesday: ((3+6) % 7) = 2
  // Thursday: ((4+6) % 7) = 3
  // Friday: ((5+6) % 7) = 4
  //...