0
JavaScriptを使用して月間にスクロールできるカレンダーを作ろうとしています。カレンダーは、現時点では今日の日付を表示し、周りに月を構築します。私は月のタイトルを変更する次のボタンを持っていますが、日は完全に変更されません。私は、 'next'が呼び出されたときにカレンダー本体に"+ dayPerMonth[month+1] +"を挿入しようとしましたが、無駄です。翌月に何日かかるのかを表の上に述べるだけです。Scrollable Javascript Calendar
var htmlContent ="";
var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)
if (month == 1){
if ((year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.
var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"];
// days in previous month and next one , and day of week.
var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays= nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays){
// When to start new line.
if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
}
weekdays2++;
counter++;
}
function displayCalendar(){
var htmlContent ="";
var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)
if (month == 1){
if ((year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.
var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"];
// days in previous month and next one , and day of week.
var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays = nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays){
// When to start new line.
if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
}
weekdays2++;
counter++;
}
// building the calendar html body.
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month]+" "+ year +"</th></tr>";
calendarBody +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody;
}
function next(){
var calendarBody2 = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month++]+" "+ year +"</th></tr>";
calendarBody2 +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>"
;
calendarBody2 += "<tr>";
calendarBody2 += htmlContent ;
calendarBody2 += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody2;
}
.btns{
width: 48%;
height: 5%;
}
#legend{
font-size: 20pt;
}
.ui-content{
margin-top: 1%;
}
.calendar{
width: 100%;
height: 80%;
}
.monthPre{
color: gray;
text-align: center;
}
.monthNow{
color: black;
text-align: center;
font-size: 20pt;
}
.dayNow{
border: 2px solid black;
color: #FF0000;
text-align: center;
font-size: 20pt;
}
.calendar td{
htmlContent: 2px;
width: 40px;
border: 2px solid black;
}
.monthNow th{
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames{
background: #FF0000;
color: #FFFFFF;
text-align: center;
}<html>
<head>
<title>Calendar</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<button class='btns' onclick=prev()>Prev</button>
<button style=margin-left:3.25%; class='btns' onclick=next()>Next</button>
<body onload="displayCalendar()">
<div id="calendar"></div>
</body>
\t \t \t \t \t
</html>
あなたに私の友人を
previousためprev()方法を追加し、絶対的な伝説です。 –あなたは 'if（month-1 == 0）'と書いたprev（）関数で小さなエラーを作りました。それ以外は完璧です。 –
それを指摘してくれてありがとう、間違って私はそれをしました。答えを更新しました。 –