Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Воссоздать календарь 2018г (https://javascript.ru/forum/dom-window/73123-vossozdat-kalendar-2018g.html)

leonid6723 22.03.2018 18:35
Воссоздать календарь 2018г
 
Добрый вечер Уважаемые пользователи форума,помогите сделать в календари отступы,чтоб был как март месяц 2018 года+хотелось бы как то выделить сегодняшнюю дату
вот код
<html>
<head>
<title>test89</title>
<table id="table" border=5 name="table">
<tr>
<th class="header" colspan=7></th>
</tr>
<tr class="big">
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>

<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
</head>
<body onload="displayCalendar()">
<script>
function displayCalendar(){
var htmlContent ="";
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();
//имена месяцев и дни недель
var monthNames = ["Январь","Февраль","Март","Апр ель","Май","Июнь","Июль","Авгус т","Сентябрь","Октябрь","Нояб ь", "Декабрь"];
var dayNames = ["Пн","Вт","Ср","Чт","Пт","Сб", "Вс"];
var dayPerMonth = ["31", "28","31","30","31","30","31","31","30","31","30", "31"];
var nextDate = new Date(nextMonth +' 1 ,'+year);
var numOfDays = dayPerMonth[month];
var weekdays= nextDate.getDay();
var weekdays2 = weekdays;


//построение таблицы
var tbl=document.getElementsByClassName("header")[0].innerHTML=monthNames[month]+" "+year;
var tbl=document.getElementById('table');
for (i=0; i<7; i++) {
tbl.rows[1].cells[i].innerHTML=dayNames[i];
}
for ( i=0;i<=6;i++){
for (j=0; j<7; j++) {
tbl.rows[i+2].cells[j].innerHTML = counter;
counter++;
}
}



}
</script>
<div id="calendar"></div>
<style>
.dayNow{
border: 2px solid black;
color:Red;
text-align: center;
}
</style>
</body>
</html>

Dilettante_Pro 23.03.2018 11:58 
<html>
<head>
<title>test89</title>
<table id="table" border=5 name="table">
<tr>
<th class="header" colspan=7></th>
</tr>
<tr class="big">
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</head>
<body onload="displayCalendar()">
<script>
function displayCalendar(){
var today = new Date();
var dateOther = new Date();
var dateMont = new Date(today.getFullYear(),today.getMonth(),1);

var month = dateMont.getMonth();
var day = dateMont.getDay();
var year = dateMont.getFullYear();
//имена месяцев и дни недель 
var monthNames = ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Авгус т","Сентябрь","Октябрь","Ноябрь", "Декабрь"];
var dayNames = ["Пн","Вт","Ср","Чт","Пт","Сб", "Вс"];


//построение таблицы
var tbl=document.getElementsByClassName("header")[0].innerHTML=monthNames[month]+" "+year;
var tbl=document.getElementById('table');
for (i=0; i<7; i++) {
tbl.rows[1].cells[i].innerHTML=dayNames[i];
}
for ( i=0; i<6; i++){
   if(i == 5 && dateMont.getMonth() != month) {
      table.deleteRow(tbl.rows[i+2]);
      i++;
   } else {
      for (j=0; j<7; j++) {
         var k = j<6? j + 1 : 0;
         var n = dateMont.getDay() == 0? 7: dateMont.getDay();
         if(dateMont.getDay() == k && dateMont.getMonth() == month) {
            tbl.rows[i+2].cells[j].innerHTML = dateMont.getDate(); 
            if(today.getDate() == dateMont.getDate()) tbl.rows[i+2].cells[j].style.backgroundColor = 'lightgreen';
            dateMont.setDate(dateMont.getDate() + 1);
          } else {
            if(i == 0) {
               dateOther = new Date();
               dateOther.setDate(dateMont.getDate() - (n - k)); 
               tbl.rows[i+2].cells[j].innerHTML =  dateOther.getDate(); 
               tbl.rows[i+2].cells[j].style.color = 'gray';
            } else {
               dateOther = new Date();
               dateOther.setDate(dateMont.getDate());
               tbl.rows[i+2].cells[j].innerHTML =  dateOther.getDate(); 
               tbl.rows[i+2].cells[j].style.color = 'gray';
               dateMont.setDate(dateMont.getDate() + 1);
            }
         }
      }
   }
}



}
</script>
<div id="calendar"></div> 
<style> 
.dayNow{
border: 2px solid black;
color:Red;
text-align: center;
}
</style> 
</body>
</html>


Часовой пояс GMT +3, время: 20:58.