[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"page:tool-canvas-id:de:74":3},{"id":4,"order":5,"published":6,"dateInserted":7,"publishDate":8,"dateChanged":9,"author":10,"ratings":5,"ratingAmount":5,"ratingAverage":5,"ratingOwn":5,"files":16,"videos":23,"documents":24,"postTexts":25,"script":34,"markUp":35,"style":36,"distance":5},74,0,true,"0001-01-01T00:00:00","2022-12-31T23:00:00","2023-11-16T15:46:56.9600713",{"id":11,"name":12,"surname":13,"nickName":14,"fullName":15},1,"Schaffer","Alexander","the boss","Schaffer Alexander",[17],{"blobImgUrlBig":18,"blobImgUrlSharing":19,"blobImgUrlMedium":20,"blobImgUrlSmall":21,"blobImgUrlMicro":22},"https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Fyearweek-0f6c1814-418e-493e-bc5a-432d09d838d5-big.webp?sv=2024-11-04&se=2026-09-18T09%3A37%3A03Z&sr=b&sp=r&sig=a9cunaj5MUn0uPl7zLvb%2BWhHC%2FyxdHt1PRIvM4wK6SY%3D","https:\u002F\u002Fmaheviblobsunsec.blob.core.windows.net\u002Fimage\u002Fyearweek-0f6c1814-418e-493e-bc5a-432d09d838d5-sharing.jpeg?sv=2024-11-04&se=2026-09-18T09%3A37%3A03Z&sr=b&sp=r&sig=2WM4bO5lcCPTuNmBqLY4fifcg3jGTXmXQ6wssN%2BqCtM%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Fyearweek-0f6c1814-418e-493e-bc5a-432d09d838d5-medium.webp?sv=2024-11-04&se=2026-09-18T09%3A37%3A03Z&sr=b&sp=r&sig=LHjaIpug4gE7GwMj6TvncA2XjXDvlP%2B0RcnWnC6snOA%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Fyearweek-0f6c1814-418e-493e-bc5a-432d09d838d5-small.webp?sv=2024-11-04&se=2026-09-18T09%3A37%3A03Z&sr=b&sp=r&sig=lqmWvV8EWxY32%2FZckT7ncJvM4lqRmPP71068wV7tDuI%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Fyearweek-0f6c1814-418e-493e-bc5a-432d09d838d5-micro.webp?sv=2024-11-04&se=2026-09-18T09%3A37%3A03Z&sr=b&sp=r&sig=DkSniTT9eIaev0NKn6V0YgJN%2BvYhrj4uJw6IKbWVlQ4%3D",[],[],[26],{"id":5,"locale":27,"header":28,"subHeader":29,"contentShort":30,"content":28,"contentShortHTML":31,"contentHTML":31,"slug":32,"postId":4,"languageId":33,"automaticTranslation":6},"de","Uhr mit Kalender","einfache Uhr mit Monat und Tag","einfache Uhr mit Monat und Taganzeige","","uhr-mit-kalender",2,"\u003Cscript>\n  var clockDisplay = 12;\n  var daySplit = \"am\";\n  var chours = 12;\n  var cminutes = 60;\n  var cseconds = 60;\n  var chundreds = 100;\n\n  var canvas = document.getElementById('clockcanvas');\n  var context = canvas.getContext('2d');\n\n  var x = canvas.width \u002F 2;\n  var y = canvas.height \u002F 2;\n  var circ = Math.PI * 2;\n  var quart = Math.PI \u002F 2;\n\n  var cstart = -quart;\n  var cproportion = 1;\n\n  chours = chours \u002F cproportion;\n  cminutes = cminutes \u002F cproportion;\n  cseconds = cseconds \u002F cproportion;\n\n  chundreds = chundreds \u002F cproportion;\n  var textAlign = \"center\";\n  var primaryColour = \"#0b4f6c\";\n  var secondaryColour = \"transparent\";\n  var hourColour = \"#0b4f6c\";\n  var minuteColour = '#232323';\n  var secondColour = '#232323';\n  var hundredColour = 'red';\n\n  var radiushour = canvas.width \u002F 4 - 30;\n  var hsegDist = 100;\n  var hWidth = 6;\n  var hradDist = 6;\n\n  var radiusminute = canvas.width \u002F 4 - hWidth - 30;\n  var msegDist = 100;\n  var mWidth = 6;\n  var mradDist = 4;\n\n  var radiussecond = canvas.width \u002F 4 - hWidth - mWidth - 30;\n  var ssegDist = 100;\n  var sWidth = 2;\n  var sradDist = 4;\n\n  var radiushundred = canvas.width \u002F 4 - hWidth - mWidth - sWidth - 30;\n  var husegDist = 1000;\n  var huWidth = 2;\n  var huradDist = 1;\n\n  var radiusmonth = canvas.width \u002F 4 + 60;\n  var mosegDist = 120;\n  var moWidth = 7;\n  var moradDist = 5;\n\n  function set(hour, minute, second, hundred, month) {\n    context.clearRect(0, 0, canvas.width, canvas.height);\n\n    context.lineWidth = 2;\n    context.strokeStyle = primaryColour;\n\n    context.textAlign = textAlign;\n    context.textBaseline = \"middle\";\n    context.font = \"30px Nunito\";\n    if (minute \u003C 10) { minute = \"0\" + minute };\n    context.fillText(hour + \":\" + minute, x, y + 3);\n\n    context.textAlign = textAlign;\n    context.textBaseline = \"middle\";\n    context.font = \"16px Nunito\";\n    context.fillText(second, x, y + 30);\n\n    context.textAlign = textAlign;\n    context.textBaseline = 'middle';\n    context.font = '18px Nunito';\n    context.fillText(daySplit, x, y - 25);\n\n    setCircle(chours, hour, radiushour, hWidth, hradDist, hsegDist, true, hourColour);\n\n    setCircle(cminutes, minute, radiusminute, mWidth, mradDist, msegDist, true, minuteColour);\n\n    setCircle(cseconds, second, radiussecond, sWidth, sradDist, ssegDist, true, secondColour);\n\n    setCircle(chundreds, hundred, radiushundred, huWidth, huradDist, husegDist, false, hundredColour);\n\n    setCircle(12, month, radiusmonth, moWidth, moradDist, mosegDist, true, hourColour);\n\n    var color = '#F5F5F5';\n\n    var dt = new Date();\n    for (var d = new Date(dt.getFullYear(), 0, 1); d \u003C new Date(dt.getFullYear(), 11, 31); d.setDate(d.getDate() + 1)) {\n      var w = weekNum(d);\n      var tw = weeksInYear(d.getFullYear());\n      var wa = 360 \u002F tw;\n      if (d.toDateString() === dt.toDateString()) {\n        color = '#0b4f6c';\n      } else if (d.valueOf() \u003C dt.valueOf()) {\n        color = '#0b4f6c';\n      } else {\n        color = 'transparent';\n      };\n      setPoint(wa * w - wa \u002F 2, d.getDay(d), color);\n    };\n  };\n\n  function setCircle(segments, segment, radius, lineWidth, radDist, segDist, cumul, colour) {\n    var circleseg = segments;\n\n    for (let i = 0; i \u003C circleseg * cproportion; i++) {\n      if (segment > i && cumul) {\n        context.lineWidth = lineWidth;\n        context.strokeStyle = colour;\n      } else if (segment === i && !cumul) {\n        context.lineWidth = lineWidth;\n        context.strokeStyle = colour;\n      } else {\n        context.lineWidth = lineWidth;\n        context.strokeStyle = secondaryColour;\n      };\n\n      context.beginPath();\n      var outerstart = cstart + circ \u002F circleseg * i;\n      var outerend = outerstart + circ \u002F circleseg - (circ \u002F (segDist \u002F cproportion));\n      context.arc(x, y, radius + radDist, outerstart, outerend, false);\n      context.stroke();\n    };\n  };\n\n  var weekday = new Array(7);\n  weekday[0] = 7;\n  weekday[1] = 1;\n  weekday[2] = 2;\n  weekday[3] = 3;\n  weekday[4] = 4;\n  weekday[5] = 5;\n  weekday[6] = 6;\n\n  function setPoint(positiondegree, daynum, color) {\n    var px = x + (canvas.width \u002F 4 - 20 + 10 * weekday[daynum]) * Math.cos(Math.PI * 2 * (positiondegree \u002F 360 - 0.25));\n    var py = y + (canvas.height \u002F 4 - 20 + 10 * weekday[daynum]) * Math.sin(Math.PI * 2 * (positiondegree \u002F 360 - 0.25));\n\n    context.save();\n    context.fillStyle = color;\n    context.beginPath();\n    context.arc(px, py, 3, 0 * Math.PI, 2 * Math.PI, false);\n    context.fill();\n    context.restore();\n  };\n\n  function weekNum (dt) {\n    var tdt = new Date(dt.valueOf());\n    var dayn = (dt.getDay() + 6) % 7;\n    tdt.setDate(tdt.getDate() - dayn + 3);\n    var firstThursday = tdt.valueOf();\n    tdt.setMonth(0, 1);\n    if (tdt.getDay() !== 4) {\n      tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);\n    }\n    return 1 + Math.ceil((firstThursday - tdt) \u002F 604800000);\n  };\n\n  function weeksInYear (year) {\n    var month = 11;\n    var day = 31;\n    var week = 0;\n\n    do {\n      var d = new Date(year, month, day--);\n      week = weekNum(d);\n    } while (week === 1)\n    return week;\n  };\n\n  setInterval(function () {\n    var month = new Date().getMonth() + 1;\n    var hour = new Date().getHours();\n    if (hour > clockDisplay) {\n      hour = hour - clockDisplay;\n      daySplit = 'pm';\n    } else {\n      daySplit = 'am';\n    };\n    var minute = new Date().getMinutes();\n    var second = new Date().getSeconds();\n    var millisecond = new Date().getMilliseconds();\n    set(hour, minute, second, Math.round(millisecond \u002F 10), month);\n  }, 10);\n\n\u003C\u002Fscript>","\u003Cdiv class=\"vertical-center\">\n\t\u003Ccanvas id=\"clockcanvas\" width=\"350\" height=\"350\" class=\"center\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>","\u003Cstyle>\n.vertical-center {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n.center {\n  margin: auto;\n}\n\u003C\u002Fstyle>",1789637822884]