可滚动的Javascript日历

时间：2017-07-16 19:34:33

标签： javascript html calendar

我正在尝试制作一个可以使用javascript在几个月之间滚动的日历。此刻，日历显示今天的日期并构建它周围的月份。我有一个下一个按钮，它会更改月份标题，但日期保持完全不变。我已经尝试将"+ dayPerMonth[month+1] +"插入到日历正文中，然后再下一步＆＃39;被称为无济于事。它只是在表格上方说明下个月有多少天。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
.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;
}
＆＃13; 
<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>
					
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

尝试以下代码，我已将公共代码放入getCal()方法并稍微更新一下。 同样，为prev()

添加了previous方法

＆＃13;
＆＃13; 
var htmlContent = "";
var FebNumberOfDays = "";
var counter = 1;

var dateNow = new Date();
var month = dateNow.getMonth();
var curMonth = month;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
var curYear = year;

// 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, weekdays, weekdays2, numOfDays, nextMonth, prevMonth;

//to set the correct htmlContent
function getCal() {
  htmlContent = "";
  nextMonth = month + 1; //+1; //Used to match up the current month with the correct start date.
  prevMonth = month - 1;
  counter = 1;


  //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.
  monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
  dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];

  // days in previous month and next one , and day of week.
  nextDate = new Date(nextMonth + ' 1 ,' + year);
  weekdays = nextDate.getDay();
  weekdays2 = weekdays;
  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 && month == curMonth && year == curYear) {
      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() {

  getCal(); // to get the htmlContent

  // 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() {
debugger;
  if(month+1==12){
    ++year;
    month=-1;
  }

  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>";

  getCal(); // to get the htmlContent

  calendarBody += htmlContent;
  calendarBody += "</tr></table>";
  // set the content of div .
  document.getElementById("calendar").innerHTML = calendarBody;

}

function prev() {
  if(month-1==-1){
    --year;
    month=12;
  }

  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>";

  getCal(); // to get the htmlContent

  calendarBody += htmlContent;
  calendarBody += "</tr></table>";
  // set the content of div .
  document.getElementById("calendar").innerHTML = calendarBody;

}
＆＃13; 
.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;
}
＆＃13; 
<html>

<head>
  <title>Calendar</title>

  <script src="https://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>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题