Ein Kalender, der mit Javascript erstellt wurde
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>