Lösungen ,kalender2

kalender2.php

Quell Code

<html>
  <head>
 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/f09496b7cc.js"></script>
<style>
  @import url("https://fonts.googleapis.com/css?family=Montserrat");
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 i {
  padding: 0 5px;
  cursor: pointer;
}
.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%;
}
.content-wrapper .left-wrapper .showDate i {
  cursor: pointer;
  background: #48A9A6;
  border-radius: 4px;
  padding: 8px 12px;
  transform: scale(1);
  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>