Переключение месяцев в календаре
Сделал календарь. Но показывает только текущий месяц. Подскажите как написать функцию которая при нажатии на кнопки NEXT и PREV будет переходить к следующему и предыдущему месяцу?
<div class="container"> <button>Prev</button><button>Next</button> <br> <div id="calendar"></div> </div> var button = document.getElementsByTagName('button'); var all_td = 0; var now = new Date(); var month = new Date().getMonth(); var today = now.getDate(); //Пустые ячейки в начале месяца now.setDate(1); var blank = (now.getDay()==0)?6:now.getDay() - 1; var text = "<table><tr>"; for(var i=0; i<blank; i++) text+="<td> </td>"; all_td = blank; //Дни в месяце now.setMonth(now.getMonth() + 1) now.setDate(0); var days = now.getDate(); for(var k=1; k<=days; k++){ text+="<td>"+k+"</td>"; all_td++; if(all_td%7==0){text+="</tr><tr>";} } //Пустые ячейки в конце var last = now.getDay(); var last_blank = (last==0)?0:7-last; for(var k=1; k<=last_blank; k++){ text+="<td> </td>"; } text +="</tr></table>"; document.getElementById('calendar').innerHTML = text; |
miusov,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> td{ border: 1px solid #0000FF; } </style> </head> <body> <div class="container"> <button>Prev</button><button>Next</button> <br> <div id="calendar"></div> </div> <script> var button = document.getElementsByTagName('button'); var all_td = 0; var now = new Date(); var month = new Date().getMonth(); var today = now.getDate(); function create(num) { month += (num || 0) now = new Date(); now.setMonth(month) //Пустые ячейки в начале месяца now.setDate(1); var blank = (now.getDay()==0)?6:now.getDay() - 1; var text = "<table><tr>"; for(var i=0; i<blank; i++) text+="<td> </td>"; all_td = blank; //Дни в месяце now.setMonth(now.getMonth() + 1) now.setDate(0); var days = now.getDate(); for(var k=1; k<=days; k++){ text+="<td>"+k+"</td>"; all_td++; if(all_td%7==0){text+="</tr><tr>";} } //Пустые ячейки в конце var last = now.getDay(); var last_blank = (last==0)?0:7-last; for(var k=1; k<=last_blank; k++){ text+="<td> </td>"; } text +="</tr></table>"; document.getElementById('calendar').innerHTML = text; } create() var item = document.querySelectorAll('button'); item[0].addEventListener('click', function() { create(-1) }); item[1].addEventListener('click', function() { create(1) }); </script> </body> </html> |
Спасибо
|
Часовой пояс GMT +3, время: 13:54. |