Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Kalender

Kalender

Ein Kalender, der mit Javascript erstellt wurde

Der hier verwendete Code

<html> <head> <script src="/js_webseite/jquery.js"></script> <style> body, html { width: 100%; height: 100%; font-family: "Montserrat"; color: #303633; background-color: #C8D9E7; overflow: hidden; position: relative; outline: none; perspective: 1000px; } .content-wrapper { position: absolute; width: 730px; height: 420px; top: 50%; left: 50%; box-sizing: border-box; transform: translate(-50%, -50%); transition: all 0.195s ease; transform-style: preserve-3d; } .content-wrapper.is-rotated-left { transform: translate(-50%, -50%) rotateY(-4deg); } .content-wrapper.is-rotated-right { transform: translate(-50%, -50%) rotateY(4deg); } .content-wrapper .left-wrapper, .content-wrapper .right-wrapper { background-color: white; width: 50%; float: left; height: 100%; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .content-wrapper .header { padding: 15px 0 20px; display: flex; justify-content: space-between; width: 100%; } .content-wrapper .header span { display: inline-block; margin: 0 3px; font-weight: 700; } .content-wrapper .right-wrapper { background-color: #48A9A6; color: white; transform-origin: left center; transform: rotateY(110deg); transition: all 0.5s; } .content-wrapper .right-wrapper.is-active { transform: rotateY(0deg); } .content-wrapper .right-wrapper .header { text-align: left; justify-content: center; } .content-wrapper .right-wrapper .day { font-size: 12em; text-indent: -12px; display: block; } .content-wrapper .right-wrapper .month { font-size: 2.5em; } .content-wrapper .left-wrapper .showDate { color: white; text-align: right; width: 100%; } i { cursor: pointer; background: #48A9A6; border-radius: 4px; padding: 8px 12px; cursor: pointer; transition: all 0.3s; } .content-wrapper .left-wrapper .showDate i.is-active { transform: scale(-1); } .content-wrapper .left-wrapper table { text-align: center; font-family: "Open Sans"; width: 90%; margin: 30px auto 0; table-layout: fixed; border-collapse: collapse; } .content-wrapper .left-wrapper table tbody:before { content: "-"; display: block; line-height: 0.75em; color: transparent; } .content-wrapper .left-wrapper table th { color: #48A9A6; font-size: 0.75em; text-transform: uppercase; margin-bottom: 10px; } .content-wrapper .left-wrapper table td { padding: 11px 5px; color: #ced0ce; font-size: 0.75em; transition: all 0.3s; position: relative; } .content-wrapper .left-wrapper table td::before { content: ""; display: none; width: 50%; height: 2px; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -8px); background-color: #48A9A6; } .content-wrapper .left-wrapper table td.currentDay::before { display: block; } .content-wrapper .left-wrapper table td.selectable { color: #303633; cursor: pointer; } .content-wrapper .left-wrapper table td.selectable:hover { background: #48A9A6; color: white; } .content-wrapper .left-wrapper table td.between { background: rgba(72, 169, 166, 0.65); color: white; } .content-wrapper .left-wrapper table td.active, .content-wrapper .left-wrapper table td.hover { background: #48A9A6; color: white; } </style> </head> <body> <div class="content-wrapper"> <div class="left-wrapper"> <div class="header"> <i class="fa fa-angle-left" aria-hidden="true"><</i> <span> <span class="month"> </span> <span class="year"></span> </span> <i class="fa fa-angle-right" aria-hidden="true">></i> </div> <div class="calender"> <table> <thead> <tr class="weedays"> <th data-weekday="sun" data-column="0">Sun</th> <th data-weekday="mon" data-column="1">Mon</th> <th data-weekday="tue" data-column="2">Tue</th> <th data-weekday="wed" data-column="3">Wed</th> <th data-weekday="thu" data-column="4">Thu</th> <th data-weekday="fri" data-column="5">Fri</th> <th data-weekday="sat" data-column="6">Sat</th> </tr> </thead> <tbody> <tr class="days" data-row="0"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="1"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="2"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="3"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="4"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="5"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> </tbody> </table> </div> <div class="showDate"><i class="fa fa-angle-double-right" aria-hidden="true">>></i></div> </div> <div class="right-wrapper"> <div class="header"><span></span></div><span class="day"></span><span class="month"></span> </div> </div> <script> var month = [ "January", "February", "March", "April", "Mai", "June", "July", "August", "September", "October", "November", "Dezember" ]; var weekday = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; var weekdayShort = [ "sun", "mon", "tue", "wed", "thu", "fri", "sat" ]; var monthDirection = 0; function getNextMonth() { monthDirection++; var current; var now = new Date(); if (now.getMonth() == 11) { current = new Date(now.getFullYear() + monthDirection, 0, 1); } else { current = new Date(now.getFullYear(), now.getMonth() + monthDirection, 1); } initCalender(getMonth(current)); } function getPrevMonth() { monthDirection--; var current; var now = new Date(); if (now.getMonth() == 11) { current = new Date(now.getFullYear() + monthDirection, 0, 1); } else { current = new Date(now.getFullYear(), now.getMonth() + monthDirection, 1); } initCalender(getMonth(current)); } Date.prototype.isSameDateAs = function (pDate) { return ( this.getFullYear() === pDate.getFullYear() && this.getMonth() === pDate.getMonth() && this.getDate() === pDate.getDate() ); }; function getMonth(currentDay) { var now = new Date(); var currentMonth = month[currentDay.getMonth()]; var monthArr = []; for (i = 1 - currentDay.getDate(); i < 31; i++) { var tomorrow = new Date(currentDay); tomorrow.setDate(currentDay.getDate() + i); if (currentMonth !== month[tomorrow.getMonth()]) { break; } else { monthArr.push({ date: { weekday: weekday[tomorrow.getDay()], weekday_short: weekdayShort[tomorrow.getDay()], day: tomorrow.getDate(), month: month[tomorrow.getMonth()], year: tomorrow.getFullYear(), current_day: now.isSameDateAs(tomorrow) ? true : false, date_info: tomorrow } }); } } return monthArr; } function clearCalender() { $("table tbody tr").each(function () { $(this).find("td").removeClass("active selectable currentDay between hover").html(""); }); $("td").each(function () { $(this).unbind('mouseenter').unbind('mouseleave'); }); $("td").each(function () { $(this).unbind('click'); }); clickCounter = 0; } function initCalender(monthData) { var row = 0; var classToAdd = ""; var currentDay = ""; var today = new Date(); clearCalender(); $.each(monthData, function (i, value) { var weekday = value.date.weekday_short; var day = value.date.day; var column = 0; var index = i + 1; $(".left-wrapper .header .month").html(value.date.month); $(".left-wrapper .header .year").html(value.date.year); if (value.date.current_day) { currentDay = "currentDay"; classToAdd = "selectable"; $(".right-wrapper .header span").html(value.date.weekday); $(".right-wrapper .day").html(value.date.day); $(".right-wrapper .month").html(value.date.month); } if (today.getTime() < value.date.date_info.getTime()) { classToAdd = "selectable"; } $("tr.weedays th").each(function () { var row = $(this); if (row.data("weekday") === weekday) { column = row.data("column"); return; } }); $($($($("tr.days").get(row)).find("td").get(column)).addClass(classToAdd + " " + currentDay).html(day)); currentDay = ""; if (column == 6) { row++; } }); $("td.selectable").click(function () { dateClickHandler($(this)); }); } initCalender(getMonth(new Date())); var clickCounter = 0; $(".fa-angle-double-right").click(function () { $(".right-wrapper").toggleClass("is-active"); $(this).toggleClass("is-active"); }); function dateClickHandler(elem) { var day1 = parseInt($(elem).html()); if (clickCounter === 0) { $("td.selectable").each(function () { $(this).removeClass("active between hover"); }); } clickCounter++; if (clickCounter === 2) { $("td.selectable").each(function () { $(this).unbind('mouseenter').unbind('mouseleave'); }); clickCounter = 0; return; } $(elem).toggleClass("active"); $("td.selectable").hover(function () { var day2 = parseInt($(this).html()); $(this).addClass("hover"); $("td.selectable").each(function () { $(this).removeClass("between"); }); if (day1 > day2 + 1) { $("td.selectable").each(function () { var dayBetween = parseInt($(this).html()); if (dayBetween > day2 && dayBetween < day1) { $(this).addClass("between"); } }); } else if (day1 < day2 + 1) { $("td.selectable").each(function () { var dayBetween = parseInt($(this).html()); if (dayBetween > day1 && dayBetween < day2) { $(this).addClass("between"); } }); } }, function () { $(this).removeClass("hover"); }); } $(".fa-angle-left").click(function () { getPrevMonth(); $(".content-wrapper").addClass("is-rotated-left"); setTimeout(function () { $(".content-wrapper").removeClass("is-rotated-left"); }, 195); }); $(".fa-angle-right").click(function () { getNextMonth(); $(".content-wrapper").addClass("is-rotated-right"); setTimeout(function () { $(".content-wrapper").removeClass("is-rotated-right"); }, 195); }); </script> </body> </html>