在javascript上调试日历应用

时间：2016-05-02 09:46:50

标签： javascript jquery debugging calendar

以下是一些pastebin（不想让我的代码永远存入互联网）来构建一个很酷的日历：

＆＃13;
＆＃13; 
var today = new Date(); // The current server date
var displayedMonth = new Date(today.getTime())
var mois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"];
var jour = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];

function initialSetup(date){
	addEventListener();
	buildCalendar(date);
}

function buildCalendar(date){
	$(".currentMonth").text(mois[date.getMonth()]);
	$(".currentYear").text(date.getFullYear());
	
	if($(".itemsCalendar").length == 0){
		$(".calendar:first").append('<table class="itemsCalendar"><thead><tr></tr></thead>');		
		for(var cpt = 1; cpt <= jour.length-1;cpt++)
			$(".calendar > table > thead > tr").append('<th>'+jour[cpt].substring(0,3)+'</th>');
	
		$(".calendar > table > thead > tr").append('<th>'+jour[0].substring(0,3)+'</th>');
	}
		
	// Set the days in the calendar
	return populateCalendar(date);
}

function populateCalendar(date){
	var itsToday = null;
	var appendLocation = null;
	var sendResult = false;
	
	if($(".itemsCalendar > tbody").length == 0){
		$(".itemsCalendar").append('<tbody class="dates"></tbody>');
		appendLocation = ".dates";
	}else{
		$(".calendar").append('<tbody class="tempCalendar"></tbody>');
		appendLocation = ".tempCalendar";
		sendResult = true;
	}
	
	if(date.getMonth() == today.getMonth() && date.getYear() == today.getYear() ){ // If is it the same day than today, buid as follow
		itsToday = 'class="today"'
		// date = today;
		date.setDate(today.getDate()); // copy the date of today
	}
	
	$(appendLocation).append("<tr><td><span "+itsToday+">"+date.getDate()+"</span></td></tr>");
	var currentDay = date.getDay();
	for(var cpt = date.getDate()-1; cpt>=1;cpt--){ // For each day before
		currentDay > 0 ? currentDay-- : currentDay = 6; // Negate 1 day
		currentDay == 0 ? $(appendLocation).prepend("<tr></tr>"):null; // Add a line in needed
		$(appendLocation+"  > tr:first").prepend("<td><span>"+cpt+"</span></td>");
	}
	fillCalendar(date, currentDay, true, appendLocation);
	
	currentDay = date.getDay();
	for(var cpt = date.getDate()+1; cpt<=dayInMonth(date);cpt++){ // For each day after
		currentDay < 6 ? currentDay++ : currentDay = 0;// Increase 1 day
		currentDay == 1 ? $(appendLocation).append("<tr></tr>"):null; // Add a line if needed
		$(appendLocation+"  > tr:last").append("<td><span>"+cpt+"</span></td>");
	}
	fillCalendar(date, currentDay, false, appendLocation);	
	
	if(sendResult){
		var ret = $(".tempCalendar").html();
		$(".tempCalendar").remove();
		return ret;
	}
		
}

function dayInMonth(date){
	if(date.getMonth() == 1) if(isBissextile(date.getYear())) return 29; else return 28;
	if(date.getMonth()%2 == 0) if(date.getMonth() <= 6) return 31; else return 30; else if(date.getMonth() <= 6) return 30; else return 31;
}

function isBissextile(year){
	if(year%4 != 0) return false; else if((year%100 == 0) && (year%400 != 0)) return false; else return true;
}

function fillCalendar(date, day, isBefore, where){
	var complete;
	
	if(isBefore){
		if(day == 1) return; else complete = false;
		date.setMonth(date.getMonth()-1);
		var cpt = dayInMonth(date);
		do{
			day != 0 ? day-- : day = 6; // Negate 1 day
			$(where+"  > tr:first").prepend("<td><span class='notInTheMonth'>"+cpt+"</span></td>");
			cpt--;
			day == 1 ? complete = true : null;
		}while(!complete);
		date.setMonth(date.getMonth()+1);
	}else{
		if(day == 0) return; else complete = false;
		var cpt = 1;
		do{
			day == 6 ? day = 0 : day++; // Increase 1 day
			$(where+"  > tr:last").append("<td><span class='notInTheMonth'>"+cpt+"</span></td>");
			cpt++;
			day == 0 ? complete = true : null;
		}while(!complete);
	}
}

function addEventListener(){
	$(".previousMonth").click(function(e){
		e.stopPropagation();
		displayedMonth.setMonth(displayedMonth.getMonth()-1);
		displayedMonth.setDate(15);
		var updated = buildCalendar(displayedMonth);
		updateCalendar(updated);	
	});
	
	$(".nextMonth").click(function(e){
		e.stopPropagation();
		displayedMonth.setMonth(displayedMonth.getMonth()+1);
		displayedMonth.setDate(15);
		var updated = buildCalendar(displayedMonth);
		updateCalendar(updated);
	});
	
	$(".previousYear").click(function(e){
		e.stopPropagation();
		displayedMonth.setFullYear(displayedMonth.getFullYear()-1);
		displayedMonth.setDate(15);
		var updated = buildCalendar(displayedMonth);
		updateCalendar(updated);
	});
	
	$(".nextYear").click(function(e){
		e.stopPropagation();
		displayedMonth.setFullYear(displayedMonth.getFullYear()+1);
		displayedMonth.setDate(15);
		var updated = buildCalendar(displayedMonth);
		updateCalendar(updated);	
	});
}

function addDayEventListener(){
	
	$(".dates").on('click', '.notInTheMonth', function() {
	   var selected = parseInt($(this).text());
		if(selected > 15)
			displayedMonth.setMonth(displayedMonth.getMonth()-1);
		else	
			displayedMonth.setMonth(displayedMonth.getMonth()+1);
		
		displayedMonth.setDate(selected);
		var updated = buildCalendar(displayedMonth);
		updateCalendar(updated);
		$(".dates > tr > td > span:not(.notInTheMonth)").filter(function() {
			return parseInt($(this).text()) === selected;
		}).addClass("today")
	});
	/*$(".notInTheMonth").each(function(){
		$(this).click(function(e){
			e.stopPropagation();
			
		});
	});*/
}

function updateCalendar(updated){
	$('.dates').animate({
		opacity: 0,
		transform: "scale(2,1)"
	},250, function(){
	   updated = $(updated);
	   $(this).empty();
	   $(this).html(updated);
	   addDayEventListener();
	$('.dates').animate({opacity: 100}, 250);
	});
	//$(".itemsCalendar > tbody").remove();
}

function colorize(colors){
	/*background: #ff3232;
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff2828 21%, #2989d8 21%, #2989d8 48%, #5aa85e 48%, #5aa85e 73%, #ffac4f 73%, #ffac4f 100%);
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#ff2828 20%,#2989d8 20%,#2989d8 40%,#5aa85e 40%,#5aa85e 60%,#ffac4f 60%,#ffac4f 80%, yellow 80%,yellow 100%);
background: linear-gradient(135deg, #ff3232 0%,#ff2828 21%,#2989d8 21%,#2989d8 48%,#5aa85e 48%,#5aa85e 73%,#ffac4f 73%,#ffac4f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ffac4f',GradientType=1 );*/
}

initialSetup(today);
＆＃13; 
* {
  font-family: 'Open Sans', sans-serif;
}
div,
ul,
li {
  list-style-type: none;
}
.planner {
  width: 66%;
  margin: 100px auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden;
  min-width: 280px;
}
.calendar {
  padding: 10px;
  background-color: #333333;
  min-width: 260px;
  transition: 250ms;
}
.calendar-header {
  color: #a7a7a7;
  margin: 0;
  padding: 0;
  text-align: justify;
  line-height: 0px;
  font-size: 0px;
}
.calendar-header span,
.calendar-header a {
  display: inline-block;
  font-size: 36px;
  font-weight: 200;
  text-align: center;
  line-height: 36px;
}
.calendar-header a:hover {
  color: #98cd60;
  cursor: pointer;
}
.calendar-header::after {
  content: '';
  display: inline-block;
  width: 100%;
}
table {
  width: 100%;
  padding: 10px;
  color: #9d9d9d;
  min-width: 240px;
}

tbody{
	overflow: hidden;
	max-height: 180px;
}

th {
  font-weight: normal;
  font-size: 14px;
  color: #5b5b5b;
}
td {
  font-weight: normal;
  font-size: 12px;
  text-align: center;
}
td > span {
  display: inline-block;
  text-align: center;
  padding: 3px;
  margin: 0px;
  width: 20px;
  height: 20px;
  line-height: 20px;
}
td > span:hover {
  font-weight: bold;
}
td > span.active {
  border: 2px solid #98cd60;
  border-radius: 30px;
}
.schedule {
  margin: 0;
}
.tabs {
  margin: 0;
  padding: 0;
  text-align: justify;
  line-height: 0px;
  font-size: 0px;
  background-color: #6b6b6b;
}
.tabs .tab {
  display: inline-block;
  width: 33.3333%;
  background-color: #6b6b6b;
  text-align: center;
  color: #333333;
  margin: 0;
  padding: 0;
  border: 0px none;
  line-height: 38px;
  font-size: 14px;
  transition: background 0.2s;
}
.tabs .tab.active {
  background-color: #999999;
  color: #ffffff;
  font-weight: 600;
}
.tabs .tab.active:hover {
  background-color: #999999;
}
.tabs .tab:hover {
  background-color: #777777;
}
.tabs .tab a {
  color: inherit;
  text-decoration: none;
}
.tabs::after {
  content: '';
  width: 100%;
  display: inline-block;
}
.schedule-list {
  padding: 20px;
  margin-left: 37px;
  border-left: 2px solid #cccccc;
  display: block;
}
.schedule-item {
  display: block;
  margin-bottom: 50px;
  padding: 0;
  clear: both;
  min-height: 100px;
  overflow: visible;
}
.schedule-item:last-child {
  margin-bottom: 10px;
  min-height: 30px;
}
.schedule-item .time {
  display: block;
  float: left;
  margin-left: -41px;
  width: 36px;
  height: 36px;
  border: 2px solid #cccccc;
  background-color: #ffffff;
  color: #cccccc;
  border-radius: 40px;
  text-align: center;
  padding: 0px;
  line-height: 25px;
}
.schedule-item .time span {
  font-size: 12px;
  height: 10px;
  margin: auto;
  display: block;
}
.schedule-item .description {
  display: block;
  float: left;
  width: 305px;
  margin-top: 10px;
  margin-left: 10px;
  color: #fd9a4a;
  font-size: 14px;
  overflow: visible;
}
.schedule-item .description .description-content {
  margin-top: 5px;
}
.schedule-item .description .description-content p {
  font-size: 12px;
  margin: 0;
  color: #c5c5c5;
}
.schedule-item .description .description-content .contact-list {
  margin: 0;
  margin-top: 10px;
  padding: 0;
}
.schedule-item .description .description-content .contact-list .contact {
  overflow: hidden;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(152, 205, 96, 0.25);
  border-radius: 60px;
  width: 56px;
  height: 56px;
  text-decoration: none;
  text-align: center;
  margin-right: 10px;
  transition: all 0.2s;
}
.schedule-item .description .description-content .contact-list .contact img {
  width: 60px;
  height: 60px;
}
.schedule-item .description .description-content .contact-list .contact:hover {
  border: 2px solid #98cd60;
}
.schedule-item .description .description-content .contact-list .contact.add-contact {
  color: #98cd60;
  font-size: 20px;
  line-height: 60px;
}
.schedule-item .description .description-content .contact-list .contact.add-contact a {
  color: inherit;
  text-decoration: none;
}
.schedule-item .description .description-content .contact-list .contact.add-contact:hover {
  background-color: rgba(152, 205, 96, 0.25);
}
.schedule-item.free .time {
  border: 2px solid #98cd60;
}
.schedule-item.free .description .description-header {
  background-color: #ffffff;
  color: #c5c5c5;
  display: block;
  float: left;
}
.schedule-item.free .description .description-content {
  margin-left: 5px;
  margin-top: 0;
  content: '';
  width: 215px;
  display: block;
  float: right;
  background-image: url(https://dl.dropboxusercontent.com/u/2915418/filler.png);
  background-repeat: no-repeat;
  background-position: right center;
}
footer {
  margin-top: 30px;
  color: #c5c5c5;
  display: block;
  text-align: center;
}
footer a {
  color: #98cd60;
  text-decoration: none;
}

.today{
    background-color: #7D7D7D;
    color: #98CD60;
    border-radius: 30px;
    width:  20px;
    height: 20px;
}

.notInTheMonth{
	background-color: #272727;
    border-radius: 30px;
    color: #444444;
}

.headerWrapper{
	color: #a7a7a7;
	border-bottom: 1px solid #484848;
	margin: 0;
	padding: 0;
	text-align: justify;
	line-height: 0px;
	font-size: 0px;
	padding: 10px 0px;
}

.headerWrapper::after {
  content: '';
  display: inline-block;
  width: 100%;
}

.itemsCalendar{
	display: block;
	max-height: 225px;
}

.itemsCalendar thead, .dates tr, .tempCalendar tr{
	display: table;
	width: 100%;
	table-layout: fixed;
}

.tempCalendar{
	display: none;
}
＆＃13; 
<html>
	<head>
		<title>Calendrier</title>
		<meta charset="utf-8" />
		<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
		
	</head>
	
	<body>
		<div class="planner">
			<div class="calendar">
				<div class="calendar-header">	
					<div class="headerWrapper">
						<a class="btn btn-prev previousYear">
							<i class="icon-angle-left"></i>
						</a>
						<span class="currentYear">July</span>
						<a class="btn btn-next nextYear">
							<i class="icon-angle-right"></i>
						</a>
					</div>
					
					<div class="headerWrapper">
						<a class="btn btn-prev previousMonth">
							<i class="icon-angle-left"></i>
						</a>
						<span class="currentMonth"></span>
						<a class="btn btn-next nextMonth">
							<i class="icon-angle-right"></i>
						</a>
					</div>
				</div>
			</div>
		</div>	
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

js/calendar.js

index.html

css/style.css

当点击notInTheMonth分类元素时，会出现问题（输出中的日期过多，超过一个月过去等等）

要首次触发点击事件监听器，您必须提前一个月或一年。之后，它将在notInTheMonth日启用click事件（背景为深灰色和文本灰色的元素，指的是非月中日。

通常，我们在第二次或第三次点击notInTheMonth元素时会出现问题。

我无法纠正我的麻烦，你能帮助我吗？

0 个答案:

没有答案
相关问题
最新问题